-
Bug
-
Resolution: Unresolved
-
Medium (View bug fix roadmap)
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Issue Summary
On the "Accessibility assessment | Roadmaps" page, JAWS users cannot select an option using Up and Down arrow keys that appears for the "Start" and "End" custom input field. It can only be navigated with Left and Right arrow keys.
Steps to Reproduce
- Navigate onto the above mentioned page.
- Navigate onto the "Custom" button in the "Filter" section and activate it.
- Navigate onto the mentioned instances with JAWS running.
- Observe that a list of options appear.
- Try to select any of these options using Up and Down arrow keys.
- Observe that the options cannot be selected.
Screen recording
accessibility assessment - Advanced Roadmaps - InstEnv Jira - Google Chrome 2024-02-12 11-17-10.mp4
Actual Results
As soon as JAWS user use Up and Down arrow keys within the "Start" and "End" custom input fields, a list of options appear visually. While trying to select an option using JAWS, the virtual cursor exits forms mode and none of the option could be selected. The focus is not managed appropriately such that using JAWS an option can be selected. Moreover, the options are not placed inline to the <input> elements. Instead, they are placed at the end of the page.
As a result, the screen reader users cannot select any options that appears for the custom input fields.
Expected Results
All interactive elements must be completely operable and compatible with all screen readers. In this scenario, Make sure that the options that appear on expanding the input fields are coded directly after the <input> elements in the DOM. As well, use aria-activedescendant attribute on the <input> elements to determine the active option. This attribute uses the "id" of the active option. For more information on using aria-activedescendant, you can refer "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant#:~:text=The%20value%20of%20aria%2Dactivedescendant%20refers%20to%20an%20owned%20element,is%20controlled%20by%20the%20combobox. As well, provide an instruction containing complete information as to how to select the dates properly. For instance, "Use Up and Down arrow keys to navigate by week. Use Left and Right arrow keys to navigate by days. Press enter to select the focused option. Press Escape to exit the input field.".
Code Snippet
<label for="ex">Start</label> <input id="ex" aria-activedescendant="01" aria-autocomplete="list" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" role="combobox" ...>
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 Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2023
NVDA- Version 2023.3
Voiceover - Version Latest
- links to
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|