Repository navigation
USWDS-Site - Bug: ComboBox #5161
Description
Describe the bug
Finding an Option from the Combobox List
- Keyboard users (especially those using AT) expect to be able to type the same character to navigate through all options starting with the same letter (example: type “S” multiple times to move through “South Carolina” followed by “South Dakota”, etc.)
Finding_option_error.mp4
Selecting a Combobox Option
- Combobox allows users to confirm a selection using either the ENTER key (which is good) or the TAB key (which is unexpected behavior).
- Additionally, the SPACE key (often used to confirm selections) only scrolls down the Combobox list.
Space_input_error.mp4
Tab_Selection_Error2.mp4
Steps to reproduce the bug
Finding an Option from the Combobox List
- Turn on screen reader
- Keyboard navigation to the Combobox input
- Type a alphabetical letter to get to an item i.e.
Sfor South Carolina - Repeat typing the same letter
- FAIL
Selecting a Combobox Option via spacebar
- Turn on screen reader
- Keyboard navigation to the Combobox input
- Use arrow keys to navigate to an item
- Type spacebar to select the item
- FAIL
Selecting a Combobox Option via tab
- Turn on screen reader
- Keyboard navigation to the Combobox input
- Use arrow keys to navigate to an item
- Type tab to move focus from the field
- FAIL
Expected Behavior
Finding an Option from the Combobox List
Users working with AT expected to be able to type the same character to navigate through all options starting with the same letter (example: type “S” multiple times to move through “South Carolina” followed by “South Dakota”, etc.)
Selecting a Combobox Option or tab
- Combobox allows users to confirm a selection using either the ENTER key (which is good) or the TAB key (which is unexpected behavior).
- Additionally, the SPACE key (often used to confirm selections) only scrolls down the Combobox list.
Screenshots
No response
System setup
OS: MacOS: 12.6 Monterey
Browser: Safari 16.1 (17614.2.9.1.13, 17614)
Voiceover and keyboard
Additional context
On videos above, the green text indicates the keyboard inputs.
cc: @jonadecker @steveja11y
Code of Conduct
- I agree to follow this project's Code of Conduct.
- I checked the current issues for duplicate bug reports.
Activity
mahoneycm commentedon Feb 10, 2023
Hello @fpigeonjr,
Thank you for raising this issue!
Selecting Combobox option via Tab and Spacebar
We agree that keyboard behaviors should follow expected conventions. We'll look into correcting the space bar and tab selection errors you brought up!
Finding an Option from the Combobox List
For combobox keyboard interaction, W3C ARIA Authoring Practices Guide states the following regarding printable characters:
Because this combobox is editable, it is standard convention that typed characters are entered into the input and not used to cycle through options.
We'll get ready to work on the tab and spacebar issues you raised and link them back to this issue!
Thanks again,
Charlie
Footnotes
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#:~:text=Printable%20Characters%3A,the%20typed%20characters. ↩
Merge pull request #5160 from uswds/cm-combobox-tab-space-fix