Skip to main content
⌘K

Accessibility

Built-in, not bolted on. Fragments accessibility docs cover WCAG 2.2 AA mapping, automated audits, and WAI-ARIA guidance across 66 documented components.

Use this page to review accessibility expectations for the Fragments React component library: keyboard interaction patterns, testing coverage, and standards references used across 66 documented components.

WCAG 2.2 AAAutomated accessibility audits run across all components
Components are tested against axe-core in CI on every pull request and evaluated for WCAG 2.2 target size guidance. Keyboard navigation flows are verified end-to-end with Playwright.View full compliance report

What We Test

Keyboard Navigation
Tab, Enter, Space, Arrow keys, and Escape. All interactive components are fully navigable without a mouse.
Screen Readers
WAI-ARIA attributes, live regions, and semantic HTML ensure screen readers announce content correctly.
Reduced Motion
Animations are automatically disabled or minimized when prefers-reduced-motion is enabled.
High Contrast
Enhanced borders and focus rings activate when prefers-contrast: more is detected.
Focus Management
Dialogs trap focus, menus restore it, and focus rings are always visible during keyboard navigation.
Automated Testing
Every component is audited with axe-core in CI. Keyboard flows are tested with Playwright end-to-end.

Keyboard Shortcuts

All interactive components follow WAI-ARIA keyboard interaction patterns.

TabMove to next interactive element
Shift + TabMove to previous interactive element
Enter / SpaceActivate buttons, open menus
Arrow KeysNavigate within menus, tabs, radio groups
EscapeClose dialogs, menus, and popovers
Home / EndJump to first/last item in a list

Customizing Keyboard Shortcuts

Global shortcuts like Ctrl+B (sidebar toggle) automatically yield to editable areas — pressing Ctrl+B inside an Editor bolds text instead of collapsing the sidebar. You can also remap or disable any shortcut at the app level:

import { configureShortcuts } from '@fragments-sdk/ui';

// Remap sidebar toggle to Ctrl+\
configureShortcuts({
  SIDEBAR_TOGGLE: { key: '\\', meta: true, label: 'Ctrl+\\' },
});

// Or disable it entirely
configureShortcuts({ SIDEBAR_TOGGLE: null });

Component authors can use the useKeyboardShortcut hook to register handlers that automatically respect overrides and skip editable elements for global-scoped shortcuts.

Try It

Tab through the interactive elements below to experience keyboard navigation first-hand.

Interactive Playground
Button
Menu
Tabs
Overview content - Use arrow keys to navigate tabs
Input

Standards References