14

Is it possible to navigate using the keyboard to the drop down menu using Tab, and navigate using the arrow keys to the sub elements of the drop down?

Here is the code I have now:

<input type="text" value="click tab to jump to the drop down."/>
<div class="bs-docs-example">
    <div class="dropdown clearfix">
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
        <li><a tabindex="-1" href="#">Menu Item A</a></li>
        <li><a tabindex="-1" href="#">Menu Item B</a></li>
        <li><a tabindex="-1" href="#">Menu Item C</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Menu Item A1</a></li>
            <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Menu Item B1</a>
                <ul class="dropdown-menu">
                    <li><a tabindex="-1" href="#">You should navigate here with the keyboard.</a></li>
                    <li><a tabindex="-1" href="#">Thanks For your Help!</a></li>
                </ul>
            </li>
      </ul>
    </div>
</div>

http://jsfiddle.net/MGwVM/1/

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
JavaSheriff
  • 7,074
  • 20
  • 89
  • 159
  • I see you edited after I answered. Did you see my answer? – rybo111 Jul 27 '13 at 13:43
  • 2
    Late comment, but... I think nowadays we can just add role="menu" to the ul.dropdown-menu and role="navigation" to the div.navbar (in both bootstrap 2 and 3) and that seems to enable keyboard accessibility pretty well. But I think the html markup in your question doesn't follow the bootstrap examples... – djKianoosh Aug 20 '14 at 19:22

2 Answers2

15

Update

Bootstrap now supports up/down keys as standard.

So if you want Tab to activate the dropdown, just get the key code (9) and do the following:

$('.input-group input').keydown(function(e){
    if(e.which == 9){ // tab
        e.preventDefault();
        $(this).parent().find('.dropdown-toggle').click();
        $(this).parent().find('.dropdown-menu a:first').focus();
    }
});

And if you want to add further functionality for when the user is focused on a dropdown menu item:

$('.dropdown-menu a').keydown(function(e){
    switch(e.which){
        case 36: // home
            e.preventDefault();
            $(this).closest('.dropdown-menu').find('a:first').focus();
            break;
        case 35: // end
            e.preventDefault();
            $(this).closest('.dropdown-menu').find('a:last').focus();
            break;
    }
});

See this JSFiddle for a demo.

rybo111
  • 12,240
  • 4
  • 61
  • 70
-2

Nice example.

But, Why did you set a setTimeout? Some specific reason?

setTimeout(function(){
    $(".search-option:first").focus();
},100);

I made the same example, simulating an input select box, without a timeout. Check this out.

Emzor
  • 1,380
  • 17
  • 28
nneeggrroo
  • 17
  • 5