Summary

Updates Combobox JS to allow Tab and Spacebar keyboard inputs to operate as expected within combobox drowdowns

Breaking change

This is potentially a breaking change if developers instruct users to make a selection via tab.

Related issue

Closes USWDS-Site uswds/uswds#5161

Preview link

Combobox →

Problem statement

Keyboard users should expect consistent behaviour when navigating with a combobox component. Users should be able to use Tab to escape the combobox selection without making a choice, and Space to select the current highlighted option when within the dropdown menu.

Currently, we include JS that captures the tab event and uses it to select a highlighted combobox option instead of escaping the element.

Pressing the spacebar currently causes the combobox to scroll, rather than selecting the highlighted element as expected.

Solution

I've replaced the Tab functionality with the Spacebar. Now both elements behave as expected when within the combobox dropdown menu

Testing and review

1. The combobox story or a page with a combobox component
2. Navigate to the component using your keyboard
3. Use the up and down arrows to make a selection
4. Press tab to escape the combobox
5. Check that the combobox is no longer selected and that no selection was made
6. Return to the combobox and repeat step 3
7. Press the spacebar
8. Check that a selection was made

Before opening this PR, make sure you’ve done whichever of these applies to you:

• Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
• Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
• Run npm test and confirm that all tests pass.