-
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, Focus inappropriately navigates onto the "3M", "1Y", and so on, buttons twice.
Steps to Reproduce
- Navigate onto the above mentioned page.
- Navigate onto the "Filter" button and activate it.
- Using just your keyboard, tab through the above.
- Observe the keyboard focus order.
- Observe that focus goes onto the same component multiple times.
Screen Recording
Screen Recording 2024-02-12 at 11.59.28 AM.mov
Actual Results
The "3M", "1Y", and so on, buttons receives keyboard focus multiple times. This is because the parent <div> elements containing the <button> elements inappropriately use tabindex="0" along with role="menuitem". This may particularly disadvantage keyboard users who often navigate by tabbing through the interactive elements. The focus order may suggest that these component are multiple, separate controls, rather than single components.
Expected Results
Interactive elements must not receive keyboard focus multiple times. Make sure that focus only goes onto the interactive elements once. Refactor the components to provide a logical focus order. Avoid nesting interactive items. As well, avoid using tabindex="0" on elements that contain interactive elements. In this case, we would recommend you to remove the tabindex="0" and role="menuitem" attributes from the parent <div> elements containing the buttons in the DOM. Code Snippet <ul> <li><button aria-pressed="true">3M</button></li> <li><button>1Y</button></li> ... </ul>
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
