From 889afcdfdb942d648fa3fd32267207304640fed7 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Wed, 20 Nov 2024 12:22:15 -0600 Subject: [PATCH] chore: format --- .../components/dropdown/accessibility.mdx | 29 +++++++++++++++++-- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/pages/components/dropdown/accessibility.mdx b/src/pages/components/dropdown/accessibility.mdx index 3cb526c21f0..9e2af5b456d 100644 --- a/src/pages/components/dropdown/accessibility.mdx +++ b/src/pages/components/dropdown/accessibility.mdx @@ -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. @@ -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. @@ -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.