Skip to content

Commit

Permalink
[docs] Autosuggest a11y tab update (#1513)
Browse files Browse the repository at this point in the history
<!--- Provide a general summary of your changes in the Title above -->

## 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

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [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.
  • Loading branch information
sheila-semrush committed Jul 12, 2024
1 parent bfe11ec commit dd721ad
Showing 1 changed file with 11 additions and 16 deletions.
27 changes: 11 additions & 16 deletions website/docs/components/auto-suggest/auto-suggest-a11y.md
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

0 comments on commit dd721ad

Please sign in to comment.