From dd721adad1376b214ef2e6d494398d65291e1b01 Mon Sep 17 00:00:00 2001 From: Sheila <166654065+sheila-semrush@users.noreply.github.com> Date: Fri, 12 Jul 2024 19:26:39 +0200 Subject: [PATCH] [docs] Autosuggest a11y tab update (#1513) ## Motivation and Context 1. Fixed the keyboard behavior description. 2. Removed the radio/checkbox reference, as it seems it's unnecessary here. 3. Instead added a link to the Select guide. 4. Removed the link to "a11y style guide", because it's about other type of select, doesn't seem relevant to autosuggest. 5. Removed the duplicate of the link to the "popper keyboard control" guide. ## Types of changes - [ ] Bug fix (non-breaking change which fixes an issue). - [ ] New feature (non-breaking change which adds functionality). - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected). - [x] Nice improve. ## Checklist: - [x] My code follows the code style of this project. - [x] I have updated the documentation accordingly or it's not required. - [ ] Unit tests are not broken. - [ ] I have added changelog note to corresponding `CHANGELOG.md` file with planned publish date. - [ ] I have added new unit tests on added of fixed functionality. --- .../auto-suggest/auto-suggest-a11y.md | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/website/docs/components/auto-suggest/auto-suggest-a11y.md b/website/docs/components/auto-suggest/auto-suggest-a11y.md index 0bb0a6635f..d600e8c390 100644 --- a/website/docs/components/auto-suggest/auto-suggest-a11y.md +++ b/website/docs/components/auto-suggest/auto-suggest-a11y.md @@ -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.
**When the dropdown is open:** closes the dropdown. If an option was selected, applies its value to the input. | +| `Up Arrow` , `Down Arrow` | **When the dropdown is closed:** opens the dropdown.
**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