New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug Report][3.0.1] v-navigation-drawer does not have focus trap #16140
Comments
Have the same problem. |
Seems like the problem also affects the v-overlay component, which is used for temporary drawers and menus. Focus is not changed when element is created. Both v2-3 have the same behaviour. Open the overlay and hit tab, you'll see that the focus isn't within the recently opened overlay. https://vuetifyjs.com/en/components/overlays/ |
I'm also experiencing this issue. |
Lets wait for this PR to be merged. |
@atilkan I'm not entirely sure this relates to the focus being set on overlays or any dynamically created elements. |
Environment
Vuetify Version: 3.0.1
Vue Version: 3.2.45
Browsers: Chrome 107.0.0.0
OS: Mac OS 10.15.7
Steps to reproduce
Just open the drawer and hit tab, the focused element is not within the drawer. Drawer is not being focused.
I can see the same behaviour happening for the v-menu, the overlay is created but not focus trap is added.
The docs for v-menu state that (no reference of this for v-navigation-drawer)
By default, v-menu components are detached and moved to the root of your application. In order to properly support inserting dynamic content into the DOM, you must use the attach prop. This will ensure that focus transfers from the activator to the content when pressing the tab key.
Expected Behavior
Once drawer is open, focus should be trapped within new element. As per Material UI drawers (Open any of the example drawers and hit tab)
https://mui.com/material-ui/react-drawer/
Actual Behavior
Drawer and V-Menu is opened and focus is not set to overlay div.
Reproduction Link
https://codepen.io/rafaeldesousa/pen/abKqLgL
The text was updated successfully, but these errors were encountered: