Issue Summary

On the "Accessibility assessment | Roadmaps" page, Focus inappropriately navigates onto the "More actions" button twice.

Steps to Reproduce

1. Navigate onto the above mentioned page.
2. Using just your keyboard, tab through the above.
3. Observe the keyboard focus order.
4. Observe that focus goes onto the same component multiple times.

Screen Recording

Screen Recording 2024-02-12 at 2.29.06 PM.mov

Actual Results

The "More actions" button receives keyboard focus multiple times. This is because the "More actions" button is inappropriately wrapped within another <button> element. 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 parent <button> elements containing the "More action" button in the DOM.

Code Snippet

<div>
  <button aria-expanded="false">More actions</button>
</div>

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