Guide
Accessibility reference
Which components take keyboard input, every component's key map in one place, and what is checked for each page.
View as Markdown for coding assistants, or see llms.txt.
This page is generated from the component pages when the docs are built, so it lists every component and cannot drift from them. For what is tested and what is not, see Accessibility.
By component
"Live demos" counts the demos embedded on the page. The docs tests render every demo and fail on an axe violation, so each one is accessibility-checked. "Key map rows" counts the rows of the key map on the page.
Keyboard reference
21 components take keyboard input. Each key map below is the one on the component's own page.
ScrollArea
ScrollArea accessibility section
| Key | Action |
|---|---|
| Tab | Moves focus to the scrollable region. |
| ArrowDownorArrowUp | Scrolls the region vertically. |
| ArrowRightorArrowLeft | Scrolls horizontally when it overflows that way. |
| PageDownorPageUp | Scrolls by a page. |
| HomeorEnd | Scrolls to the start or end. |
Button
| Key | Action |
|---|---|
| EnterorSpace | Activates the button. Ignored while loading. |
| Tab | Moves focus to the button. A loading button stays in the tab order. |
| ShiftorTab | Moves focus to the previous control. |
SplitButton
SplitButton accessibility section
| Key | Action |
|---|---|
| Tab | Moves to the main button, then to the arrow button. |
| EnterorSpace | On the main button: runs the primary action. On the arrow: opens the menu. |
| ArrowDown | On the arrow button: opens the menu on its first item. |
| Escape | Closes the menu and returns focus to the arrow button. |
Input
| Key | Action |
|---|---|
| Tab | Moves focus into and out of the field. Disabled inputs are skipped. |
| ShiftorTab | Moves focus to the previous control. |
| Esc | Not captured, so a parent dialog can use it to close. |
Input group
Input group accessibility section
| Key | Action |
|---|---|
| Tab | Moves focus to the input, then to each button in the group. |
| ShiftorTab | Moves focus back through the buttons to the input. |
| Enter | On a button, activates it without submitting the form. |
Password input
Password input accessibility section
| Key | Action |
|---|---|
| Tab | Moves focus to the input, then to the show/hide button. |
| Enter | On the show/hide button, shows or hides the password. |
| Space | On the show/hide button, shows or hides the password. |
Number field
Number field accessibility section
| Key | Action |
|---|---|
| ArrowUp | Increases the value by step. |
| ArrowDown | Decreases the value by step. |
| ShiftorArrowUp | Increases the value by 10. |
| ShiftorArrowDown | Decreases the value by 10. |
| AltorArrowUp | Increases the value by 0.1. |
| Home | Sets the minimum, when there is one. |
| End | Sets the maximum, when there is one. |
| Enter | Commits the value. |
Field
| Key | Action |
|---|---|
| Tab | Moves focus to the control. The label, description and error are not focusable. |
| ShiftorTab | Moves focus to the previous control. |
Form layout
Form layout accessibility section
| Key | Action |
|---|---|
| Tab | From the focused summary, moves through its error links, then on into the form. |
| Enter | On an error link, moves focus to that field. |
| ShiftorTab | Moves focus to the previous link or control. |
Field array
Field array accessibility section
| Key | Action |
|---|---|
| ArrowUp | On a drag handle: moves the row up one place. |
| ArrowDown | On a drag handle: moves the row down one place. |
| Home | On a drag handle: moves the row to the top. |
| End | On a drag handle: moves the row to the bottom. |
| Escape | Cancels a drag in progress. |
| Enter | On the add, remove or move buttons: activates the button. |
Toggle
| Key | Action |
|---|---|
| Tab | Enters the group at a single tab stop, then moves on. Only one item is in the tab order at a time (roving tabindex). |
| ArrowRightorArrowLeft | Moves focus to the next or previous item and wraps (ArrowDown and ArrowUp when vertical). It never changes the selection. |
| HomeorEnd | Moves focus to the first or last item. |
| SpaceorEnter | Presses or releases the focused item. |
Display
| Key | Action |
|---|---|
| Tab | Moves focus to the dismiss button of an Alert that has one. |
| EnterorSpace | Dismisses the Alert (calls onDismiss). |
Table
| Key | Action |
|---|---|
| Tab | Moves to the scroll region when the table has a label. Nothing else in a static table is focusable. |
| ArrowDownorArrowUporArrowRightorArrowLeft | Scrolls a focused, labelled region. |
| PageDownorPageUporHomeorEnd | Scrolls by a page, or to the start or end. |
Disclosure
Disclosure accessibility section
Accordion keys
| Key | Action |
|---|---|
| Tab | Moves to the next trigger (or the first focusable element in an open panel). |
| EnterorSpace | Opens or closes the focused section. |
| ArrowDownorArrowUp | Moves focus to the next or previous trigger and wraps. It does not open anything. |
| HomeorEnd | Moves focus to the first or last trigger. |
Tabs keys
| Key | Action |
|---|---|
| Tab | Enters the tab list at the selected tab, then moves on to the panel. |
| ArrowRightorArrowLeft | Moves focus between tabs and wraps (ArrowDown and ArrowUp when vertical). |
| HomeorEnd | Moves focus to the first or last tab. |
| EnterorSpace | Selects the focused tab (not needed with activateOnFocus). |
Toast
| Key | Action |
|---|---|
| F6 | Moves focus into the notifications region. Tab then moves between the actions and close buttons. |
| TaborShift+Tab | Moves between the toasts' buttons. The timers pause while focus is inside. |
| EnterorSpace | Activates the focused action or close button. |
Floating
Floating accessibility section
| Key | Action |
|---|---|
| Tab | Focusing a tooltip trigger or hover-card link shows its surface; leaving hides it. |
| EnterorSpace | Opens a popover from its trigger. |
| TaborShift+Tab | Moves through the content of an open popover. |
| Escape | Closes the open tooltip, popover or hover card. Focus returns to the trigger. |
Modal
| Key | Action |
|---|---|
| TaborShift+Tab | Moves through the controls inside the surface and wraps at the ends. |
| Escape | Closes the top surface. Focus returns to the control that opened it. |
| EnterorSpace | Opens from a trigger, and activates the focused button inside. |
Menu
| Key | Action |
|---|---|
| EnterorSpaceorArrowDown | On the trigger: opens the menu on the first item. |
| ArrowUp | On the trigger: opens the menu on the last item. |
| ArrowDownorArrowUp | Moves to the next or previous item and wraps at the ends. |
| HomeorEnd | Jumps to the first or last item. |
| A–Z | Typeahead: jumps to the item that starts with the letters you type. Letters typed together are one search. |
| EnterorSpace | Runs the focused item and closes the menu. A checkbox or radio item toggles. |
| ArrowRight | On a submenu trigger: opens the submenu and focuses its first item. |
| ArrowLeft | In a submenu: closes it and returns to its trigger. |
| Escape | Closes the open submenu, or the menu. Focus returns to the trigger. |
| Tab | Closes the menu and moves on. Focus is never trapped. |
Breadcrumb
Breadcrumb accessibility section
| Key | Action |
|---|---|
| Tab | Moves through the links in order. The current page and the separators are not focusable. |
| Enter | Follows the focused link. |
Pagination
Pagination accessibility section
| Key | Action |
|---|---|
| Tab | Moves through the page controls. A disabled Previous or Next is skipped. |
| Enter | Follows a link, or activates a button. |
| Space | Activates a button page. (Links respond to Enter only, as native links do.) |
Stepper
| Key | Action |
|---|---|
| Tab | Nothing in a stepper is focusable: it only reports progress. |
Accessibility
The accessibility target for @azmr/ui, what is tested automatically, what is not tested yet, and how to build accessible screens with it.
Set up the monorepo
Clone the Azmara Platform repository, build every package and run the docs site locally. For contributors; to use @azmr/ui in your own app, see Installation.