Skip to content

Commit

Permalink
Update accessibility.mdx (#4362)
Browse files Browse the repository at this point in the history
* Update accessibility.mdx

addresses a shortcoming in the current keyboard guidance on the a11y tab as discussed in #4342 (comment)

* chore: format

---------

Co-authored-by: Alison Joseph <[email protected]>
  • Loading branch information
mbgower and alisonjoseph authored Nov 20, 2024
1 parent afb1676 commit 36ba86e
Showing 1 changed file with 24 additions and 17 deletions.
41 changes: 24 additions & 17 deletions src/pages/components/dropdown/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,10 @@ 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
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.

Expand All @@ -72,11 +73,14 @@ 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 +97,18 @@ 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 36ba86e

Please sign in to comment.