Keyboard navigation for Tabs and Tab Dropdown Menues

[sboeck]

Prerequisites

• [x] I have searched for duplicate or closed issues
• [x] I have validated any HTML to avoid common problems
• [x] I have read the contributing guidelines

Describe the issue

I am experiencing a possible accessibility issue involving keyboard navigation when using Tabs combined with Tab menus. When a tab has focus the roving tab index sets the other tabs to have tabindex="-1" so that they are skipped when pressing Tab. However, this does not happen for Tab Menus, and pressing Tab while on a Tab will skip from the current Tab to the Tab Menu, and Shift+Tab will move back to the last focused tab. Left and Right arrow keys successfully navigate between Tabs, but once a Tab Menu is focused, arrow keys do not seem to allow one to navigate back to Tabs. Meanwhile if one has multiple tab menus, arrow keys do not navigate between them and one must use Tab or Shift+Tab to navigate between tab menus. This inconsistent keyboard navigation, and conflicting when using them in combination, seems like an accessibility issue.

Reduced test cases

https://codepen.io/sboeck/pen/empgbJe

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

5.3.3

[mpatra193]

Hi, I’d like to work on this issue.

[cgteate-ats]

@mpatra193 just checking in if there was an update on a fix for this issue. (I am another developer working with @sboeck)

[tulsaskaterchic]

This may have a similar root cause as logged in https://github.com/twbs/bootstrap/issues/41021 (which has a PR) and https://github.com/twbs/bootstrap/issues/41167