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> has max-heightof 0px 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

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -