Enabling keyboard navigation in the Bootstrap dropdown-menu

Question

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/

Raphael

I see you edited after I answered. Did you see my answer? – Caruthers

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... – Homosporous

Answer 1

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.

Caruthers

home/end and letter navigation is missing :-) – Dambrosio

@xamiro-dev See updated answer. You can add letter navigation by finding the keycode and adding a switch case. – Caruthers

Answer 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.

Mydriasis

It's likely it was a quirk of the browser at the time. – Caruthers

@Emzor The code has now been updated if you're interested. – Caruthers