Accessibility

Accessible UI is easy to get subtly wrong and costly to retrofit. Vortex builds it into each component, so your team starts from working behavior.

What Vortex handles

• No key handlers to write: arrow keys, Enter, Space, and Escape work the way each pattern expects.
• No ARIA state to sync: roles and states update with the component, such as aria-selected on tabs.
• No focus logic to maintain: focus rings appear for keyboard users, and menus return focus to their trigger.
• No announcements to wire up: Actionbar announces its summary when it changes.

What you provide

Name controls that have no visible text. Use ariaLabel on an icon-only Button:

<Button onlyIcon={Trash} ariaLabel="Delete project" />

Name dialogs with Modal.Title or ariaLabel, and radio groups with Radio.GroupLabel. Each component's Accessibility section lists what it needs.

Components can't check that your labels, content, and page structure make sense, so test key flows with a keyboard and a screen reader.

Keyboard behavior

These examples show the range. Each component page lists its full behavior.

Custom controls

Use these hooks to give your own interactions the same behavior:

• useRovingFocus moves focus between controls with arrow keys.
• useKeyboardFocusMode controls focus rings, such as for an element focused by your code.
• useShortcuts binds keyboard shortcuts to callbacks.

Right-to-left

Set dir="rtl" on <html> or any wrapper. Components inside mirror their layout, animations, popover positions, and arrow-key navigation. Use useRTL to read or change the direction.