Make links not focusable inside a burger menu
I'm trying to create a keyboard accessible menu, but the problem is if
button/a/input are in that menu, they are still focusable. To move menu in-n-out I use translateX.
The only solution I can think of is conditionally setting each focusable element's tabIndex to -1, if menu is closed. Yet I wonder is it the best solution out here?
Codepen: https://codepen.io/Kamidashi/pen/poQaYvZ (Just Tab through and you'll get what I mean)1 Reply
Apparently toggling
visibility: hidden (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) fixes my problemvisibility - CSS: Cascading Style Sheets | MDN
The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a .