html - tabindex="-1" on <ul> doesn't work -
i have mega dropdown menu bootstrap (code simplified) :
<li class="dropdown mega-dropdown"> <a href="#">menu button</a> <ul tabindex="-1"> <li>1st link</li> <li>2nd link</li> <!-- many other links --> </ul> <!-- many other menu buttons --> </li>
small fiddle here : https://jsfiddle.net/48m2ppzc/
i want simplify navigation tab key :
- at beginning element
<ul>
hasmax-height
of0px
shoudn't able navigate inside tab key (because menu hidden). - when click on "menu button" link, menu should show (i set
max-height
500px
), , need change tabindex '0' (i can jquery that's not problem)
the problem @ first point : tabindex="-1"
doesn't work, can still navigate inside menu tab key.
how can fix problem? use html5 tabindex
should work on html elements, tried tabindex="0"
.
tabindex
not inherited children of element, need set manually on items:
<li class="dropdown mega-dropdown"> <a href="#">menu button</a> <ul> <li><a href="#" tabindex="-1">1st link</a></li> <li><a href="#" tabindex="-1">2nd link</a></li> <!-- many other links --> </ul> <!-- many other menu buttons --> </li>
since accessibility related, might semantically use aria-hidden
attribute (and toggle it, once visible):
<li class="dropdown mega-dropdown"> <a href="#">menu button</a> <ul aria-hidden="true"> <li><a href="#" tabindex="-1">1st link</a></li> <li><a href="#" tabindex="-1">2nd link</a></li> <!-- many other links --> </ul> <!-- many other menu buttons --> </li>
Comments
Post a Comment