From 36ba86e7aa2fd8413024a9c7ed92024226c649c3 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Wed, 20 Nov 2024 10:22:48 -0800 Subject: [PATCH] Update accessibility.mdx (#4362) * Update accessibility.mdx addresses a shortcoming in the current keyboard guidance on the a11y tab as discussed in https://github.com/carbon-design-system/carbon-website/pull/4342#issuecomment-2479830755 * chore: format --------- Co-authored-by: Alison Joseph --- .../components/dropdown/accessibility.mdx | 41 +++++++++++-------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/src/pages/components/dropdown/accessibility.mdx b/src/pages/components/dropdown/accessibility.mdx index 95e8cc7d1ba..9e2af5b456d 100644 --- a/src/pages/components/dropdown/accessibility.mdx +++ b/src/pages/components/dropdown/accessibility.mdx @@ -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. @@ -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. @@ -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.