[BUG] - NavbarMenu Doesn't Trap Focus

[xNS5]

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

1. Open https://nextui.org/
2. Adjust the size of the window until the navbar menu toggle is visible
3. Open the browser HTML inspector
4. Toggle the navbar menu button
5. 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]]

ENG-1360 [BUG] - NavbarMenu renders at bottom of DOM

[wingkwong]

seems not reproducible now.

[xNS5]

I can reproduce this on the HeroUI website, and this issue is still present.

Steps to reproduce:

1. Open the HeroUI website, shrink the webpage so that the dropdown menu toggle is present.
2. Open the hamburger menu
3. Use the tab key to navigate the dropdown

I expect as a user that the only elements that will focus will be the ones listed and only those elements. However, the focus isn't trapped by the navbar component and I'm able to interact with the page behind it.

[wingkwong]

oh you mean the doc one. focus trap works fine in individual component (doc examples / storybook). need to check.

[xNS5]

I'll do some digging on my end to double check, sorry for the confusion! I didn't fully understand what was going wrong when I created the ticket and that's on me.

[romanticsoul]

+1

oh you mean the doc one. focus trap works fine in individual component (doc examples / storybook). need to check.

The focus trap works because in the component examples, only the lorem ipsum text is displayed on the page, if you add other elements, the focus trap will not be.

P.S. the text is written using Google Translate