Skip to content

Commit

Permalink
Update accessibility.mdx
Browse files Browse the repository at this point in the history
addresses a shortcoming in the current keyboard guidance on the a11y tab as discussed in #4342 (comment)
  • Loading branch information
mbgower committed Nov 15, 2024
1 parent 87678a9 commit e236fc5
Showing 1 changed file with 3 additions and 19 deletions.
22 changes: 3 additions & 19 deletions src/pages/components/dropdown/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,7 @@ each variant.

#### Dropdown

The default dropdown opens with `Enter`, `Space`, or `Down arrow`, with focus
moving to the currently selected option. Arrow keys change options, and any
option with focus is selected with `Space` or `Enter`, which also closes the
dropdown. Pressing `Esc` or `Tab` closes a dropdown without changing the
selected option.
The default dropdown opens with `Enter`, `Space`, or `Down arrow`. If an option is already selected or if `Down arrow` is used to open the component, the focus moves to the first or currently selected option. Arrow keys change options, and any option with focus is selected with `Space` or `Enter`, which also closes the dropdown. Pressing `Esc` or `Tab` closes a dropdown without changing the selected option.

<Row>
<Column colLg={8}>
Expand All @@ -72,11 +68,7 @@ selected option.

#### Multiselect

The multiselect opens with the `Enter` or `Space` keys, which are also used to
toggle the selection of any option. Once items are selected, a tag appears in
the field, showing a numerical representation of the number of items selected
along with an ‘x’. Pressing `Esc` closes the multiselect. Pressing `Delete`
while focus is in the collapsed field will clear all selected options.
The multiselect opens with `Down arrow`, or with the `Enter` or `Space` keys, which are also used to toggle the selection of any option. Focus handling is the same as with the default dropdown: focus is only moved to the options list if an item is already selected or if the multiselect is opened with the `Down arrow`. Once items are selected, a tag appears in the field, showing a numerical representation of the number of items selected along with an ‘x’. Pressing `Esc` closes the multiselect. Pressing `Delete` while focus is in the collapsed field will clear all selected options.

<Row>
<Column colLg={8}>
Expand All @@ -93,15 +85,7 @@ while focus is in the collapsed field will clear all selected options.

#### Combo box

The combo box's operation is quite different, since it is a combination of a
text input and a dropdown. `Enter` or the `Up` or `Down` arrow keys will open
the list of options, as will typing any character or string of characters (which
will also filter the list to only show items that match the typed string).
Pressing `Esc` will clear the input and collapse the list. Pressing `Enter` will
select a highlighted option and collapse the list. (If nothing is highlighted in
the list, pressing `Enter` will toggle the combo box open and closed.) `Space`
cannot be used for selecting, as pressing it will submit a space character into
the filter string.
The combo box’s operation (as well as the filterable multiselect's) is quite different, since it is a combination of a text input and a dropdown. `Enter` or the `Up` or `Down arrow` keys will open the list of options, as will typing any matching character or string of characters (which will also filter the list to only show items that match the typed string). Focus handling in the options list is similar to the default dropdown: focus is only moved to the options list if an item is already selected, a matching string is entered, or if opened with an arrow key. Pressing `Esc` will collapse the list or clear the typed string. Pressing `Enter` will select a highlighted option and collapse the list. (If nothing is highlighted in the list, pressing `Enter` will toggle the combo box open and closed.) `Space` cannot be used for selecting, as pressing it will submit a space character into the filter string.

<Row>
<Column colLg={8}>
Expand Down

0 comments on commit e236fc5

Please sign in to comment.