Issue Summary

The functionality of dropdown menus is limited for users, unable to navigate through options using up-down arrow keys.

Steps to Reproduce

1. Open the “JIRA Align” page.
2. Navigate to the dropdown using TAB key and activate it.
3. Try to navigate within the option using up-down arrow keys.
4. Observe that, options are accessible with TAB key only and not accessible with arrow keys.

Screen Recording

Actual Results

While keyboard users can navigate dropdown fields using TAB key, the inability to navigate through option with arrow keys poses a significant accessibility challenge. Moreover the user’s are not able to select the options using the “Return” key.

This made it difficult for keyboard-only and screen reader users to access the functionality associated with the custom drop-down.

Expected Results

The drop-down must be keyboard operable with a keyboard as well as screen reader and keyboard users should be able to select an option. Users should be able to move up and down options using the arrow keys, ensuring a smoother and more accessible selection process.

Replace the custom dropdown with the standard dropdown using <select> and <option> elements. In addition we can also add an event listener to the dropdown element to listen for “Keydown” event.

For more information refer the link : https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.4.1
Chrome - Version 120.0.6099.71 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.1 (19616.2.9.11.7)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest