How to skip keyboard focus of hidden responsive menu? #3102
-
|
Hi, I'm using the DaisyUI SaaS landing page template which includes a responsive menu. I'm checking the keyboard navigation and I found an issue, where the focus goes to the sidenav menu when it's collapsed. You can check at https://rocketvalidator.com - if you're on a laptop browser and hit the tab key several times, the focus goes first through the top navigation which is fine, but then it goes through the hidden side menu, which should not happen. How can I exclude the hidden menu from keyboard navigation? Thanks! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
You can use JS to add https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert Let me know if you have any questions |
Beta Was this translation helpful? Give feedback.
You can use JS to add
inertattribute to sidebar when the drawer checkbox is unchecked.Unfortunately we can't do that in CSS and the
inertattribute is something should be added/removed using JS.https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert
Let me know if you have any questions