Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Autosuggest a11y tab update #1513

Merged
merged 2 commits into from
Jul 12, 2024
Merged

[docs] Autosuggest a11y tab update #1513

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c3c9ca
[docs] Autosuggest a11y tab update
sheila-semrush Jul 12, 2024
9a08a50
[docs] Autosuggest, small grammar fix
sheila-semrush Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 11 additions & 16 deletions website/docs/components/auto-suggest/auto-suggest-a11y.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,21 @@ tabs: Design('auto-suggest'), A11y('auto-suggest-a11y'), Example('auto-suggest-c

Table: Keyboard support

| Key | Function |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `Tab` | Moves focus to the next focusable element. |
| `Shift + Tab` | Moves focus to the previous focusable element. |
| `Space` , `Enter` , `Down Arrow` | When focus is on the AutoSuggest trigger, opens the dropdown with options. |
| `Up Arrow` , `Down Arrow` | Moves focus between the options in the dropdown. If focus is on the last/first option, moves focus to the first/last option respectively. |
| `Space` , `Enter` | Selects the option and closes the dropdown. |
| `Esc` | Closes the dropdown and returns focus to the AutoSuggest trigger. |

See detailed information for the controlling dropdown with the keyboard in the [Keyboard control guide](/core-principles/a11y/a11y-keyboard#keyboard_support_for_popper).
| Key | Function |
| ------------------------------ | -------------------------------------------------------------- |
| `Tab` | Moves focus to the next focusable element. |
| `Shift + Tab` | Moves focus to the previous focusable element. |
| `Enter` | **When the dropdown is closed:** opens the dropdown. <br>**When the dropdown is open:** closes the dropdown. If an option was selected, applies its value to the input. |
| `Up Arrow` , <nobr>`Down Arrow`</nobr> | **When the dropdown is closed:** opens the dropdown. <br>**When the dropdown is open:** moves selection between the options in the list. If the last/first option is selected, moves selection to the first/last option respectively. |
| `Esc` | Closes the dropdown. |

### Roles and attributes

* For more information about the radio or checkbox list, see [Radio button](/components/radio/radio-a11y) and [Checkbox](/components/checkbox/checkbox-a11y) guides.
* For information about the dropdown behavior, see [Keyboard support for dropdown](/core-principles/a11y/a11y-keyboard#keyboard_support_for_popper).
* Fo more information about the input behavior, refer to [Input](/components/input/input-a11y).

## Resources
For more information about the accessibility of these patterns, refer to the documentation of the components used in them:

[A11y style guide](https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-select-lists) gives recommendations for the accessible select menus and lists.
* [Input](/components/input/input-a11y)
* [Select](/components/select/select-a11y)
* [Keyboard support for popper](/core-principles/a11y/a11y-keyboard#keyboard-support-for-popper)

## Other recommendations

Expand Down
Loading