Skip to content

Commit

Permalink
chore: format
Browse files Browse the repository at this point in the history
  • Loading branch information
alisonjoseph committed Nov 20, 2024
1 parent e236fc5 commit 889afcd
Showing 1 changed file with 26 additions and 3 deletions.
29 changes: 26 additions & 3 deletions src/pages/components/dropdown/accessibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,12 @@ each variant.

#### Dropdown

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.
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 @@ -68,7 +73,14 @@ The default dropdown opens with `Enter`, `Space`, or `Down arrow`. If an option

#### Multiselect

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.
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 @@ -85,7 +97,18 @@ The multiselect opens with `Down arrow`, or with the `Enter` or `Space` keys, wh

#### Combo box

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.
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 889afcd

Please sign in to comment.