Topic: Sidenav Menu
Hi,
I've noticed that every .sidenav-link in my project has tabindex="1" injected automatically. I'm curious to know if there's a specific reason for this behavior.
It seems to be affecting keyboard navigation. Because of this, the natural tab order isn't working as expected, and it's making keyboard navigation through the sidenav challenging (in my case: impossible).
Is this intended behavior, or is there a way to prevent tabindex="1" from being added to .sidenav-link elements? Any guidance on how to resolve this issue would be greatly appreciated.
Thank you!
Can you create a snippet where the tab order is incorrect?
The focus trap option requires tab index to be set. You can set data-mdb-focus-trap="
false" to disable focus trap option.
webshapers pro premium priority commented 1 months ago
Thank you, Grzegorz, I managed to create a snippet, that should demonstrate 2 problems: * problematic injection of tabindex="1" on sidebar.show and * indistinguishable focus outlines on certain elements like sidenav items or buttons
https://mdbootstrap.com/snippets/standard/webshapers/6268763?view=project
I have also included a few lines of rem-ed-out css that could easily improve the hardly visible focus outlines for mouseless users. Just uncomment them and see what happens!
Concerning data-mdb-focus-trap: I could not find any documentation on this. It sounds very interesting and I definitely would like to learn more about it! Kind regards from Austria, Thomas
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: Desktop
- Browser: Chrome
- OS: OSX
- Provided sample code: No
- Provided link: No