The <NavbarMenu/> component doesn't have any built-in focus trap behavior which is throwing off the tab index order as a result. When the navbar menu is open, the user should only be able to focus elements within the menu itself. To implement this behavior, the developer would need to hand-roll their own focus trap which wouldn't really be necessary if the navbar menu were higher in the DOM.
Adjust the size of the window until the navbar menu toggle is visible
Open the browser HTML inspector
Toggle the navbar menu button
Attempt to tab to the first element in the list
Expected behavior
As a user, I expect the navbar menu to prevent the user from interacting with any element that isn't contained by the menu. The user should not be able to interact with elements behind the expanded menu.
Screenshots or Videos
Operating System Version
Linux, Pop_OS 22.04
Browser
Firefox
Additional Notes
When working with the <Dropdown/> component, the element is rendered at the bottom of the DOM (similar to the NavbarMenu component), however this component traps the browser's focus just fine.
linear[bot]
commented
2 months ago
NextUI Version
2.4.6
Describe the bug
The
<NavbarMenu/>component doesn't have any built-in focus trap behavior which is throwing off the tab index order as a result. When the navbar menu is open, the user should only be able to focus elements within the menu itself. To implement this behavior, the developer would need to hand-roll their own focus trap which wouldn't really be necessary if the navbar menu were higher in the DOM.Your Example Website or App
https://nextui.org/
Steps to Reproduce the Bug or Issue
Expected behavior
As a user, I expect the navbar menu to prevent the user from interacting with any element that isn't contained by the menu. The user should not be able to interact with elements behind the expanded menu.
Screenshots or Videos
Operating System Version
Linux, Pop_OS 22.04
Browser
Firefox
Additional Notes
<Dropdown/>component, the element is rendered at the bottom of the DOM (similar to the NavbarMenu component), however this component traps the browser's focus just fine.