Accessible React Components
WCAG 2.1 AA compliant components with Radix-powered keyboard navigation, ARIA semantics, and automated axe audits.
import { Modal, Tabs, Select, Tooltip } from "@ninna-ui/overlays";
import { Select } from "@ninna-ui/forms";
// All components handle ARIA, keyboard nav, and focus management
// automatically — no manual aria-* props needed.Key features
WCAG 2.1 AA compliance across all 67 components
Radix UI internals for complex widgets (Modal, Select, Tabs, Tooltip)
Full keyboard navigation: Tab, Arrow keys, Esc, Home/End
Screen reader announcements via ARIA live regions
Automated vitest-axe audits in CI — 708 tests across 51 files
Focus management: trapping, restoration, skip links
Accessibility as a foundation, not an add-on
Ninna UI is built on Radix UI primitives, which implement the full WAI-ARIA design patterns for every complex widget. Focus management, keyboard navigation, ARIA semantics, and screen reader announcements are handled automatically — you don't need to add aria-* props manually.
Accessibility is verified by 708 automated vitest-axe tests across 51 test files. These run in CI on every pull request, so accessibility regressions are caught before they ship.
What WCAG 2.1 AA means in practice
Every interactive component follows the WAI-ARIA Authoring Practices: Tab and Shift+Tab for sequential navigation, arrow keys for composite widgets (tabs, menus, radio groups), Esc to dismiss overlays, Home/End to jump to first/last items.
Color contrast meets WCAG 2.1 AA ratios (4.5:1 for normal text, 3:1 for large text) across all 5 theme presets in both light and dark modes.