Accessibility
Build on the component behavior, then verify labels, focus, and content in your app.
The catalog documents 71 components, with accessibility notes and standards references where they apply. Those references describe implementation guidance; they do not certify the screen you compose from them.
Check your app
- Give inputs visible labels and icon-only actions accessible names. Placeholders do not replace labels.
- Follow a complete task with the keyboard. Keep focus visible and check where it goes after a dialog or menu closes.
- Keep headings in a meaningful order. Use links for navigation and buttons for actions.
- Check your actual text, backgrounds, error messages, and disabled states in each theme. Do not rely on color alone to convey meaning.
- Test zoom, narrow layouts, and reduced-motion preferences with realistic content.
Read the accessibility section for each component you use. It records requirements specific to that control and its composition.
Keyboard patterns
These are common patterns, not a promise that every key applies to every component. Check the individual component's behavior, especially when changing its rendered element.
Key | Expected interaction |
|---|---|
| Tab / Shift + Tab | Move between focusable elements. |
| Enter / Space | Activate a focused button or trigger. |
| Arrow keys | Move within composite controls such as menus, tabs, and radio groups. |
| Escape | Dismiss an open dialog, menu, or popover when its configuration allows it. |
| Home / End | Move to the first or last item in controls that support this pattern. |
Try the controls
Tab into the demo. Open the menu with Enter, move with the arrow keys, then press Escape. Confirm focus returns to the trigger. In the tab list, use the arrow keys to change panels.
Configure app shortcuts
Use configureShortcuts to remap or disable a registered Fragments shortcut. Global handlers registered with useKeyboardShortcutskip editable elements by default, so typing does not unexpectedly trigger an app action.
import { configureShortcuts } from "@usefragments/ui";
// Disable the global sidebar shortcut.
configureShortcuts({ SIDEBAR_TOGGLE: null });Keep an on-screen control for the same action. Verify custom shortcuts do not conflict with your editor, browser, or assistive technology.
Test beyond the component
The library uses axe checks and interaction tests. Automated checks catch only part of the problem: they cannot determine whether a label explains the action or whether a full task makes sense to a screen reader user.
Run automated checks on your assembled pages, then test their main tasks with keyboard and screen reader navigation. Recheck custom themes and changed compositions in the browser; a passing component test does not cover those changes.
Standards references
Use these references alongside the requirements for your product.
Next steps
- Component referenceSpecific labeling, keyboard, and composition guidance.
- Install the packageSet up styles and render your first component.