Permettre la navigation au clavier dans le "Bootstrap" dropdown-menu

Est-il possible de naviguer à l'aide du clavier pour le menu déroulant à l'aide de Tab, et naviguer à l'aide des touches fléchées pour les sous-éléments de la liste déroulante?

Voici le code que j'ai maintenant:

<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/

Je vois que vous l'avez édité après j'ai répondu. Avez-vous vu ma réponse?
Fin de commentaire, mais... je pense que de nos jours il suffit d'ajouter role="menu" à l'ul.dropdown-menu et role="navigation" à la div.barre de navigation (dans les deux bootstrap 2 et 3) et qui semble permettre l'accessibilité du clavier assez bien. Mais je pense que le balisage html dans votre question n'a pas suivi le bootstrap des exemples...

OriginalL'auteur user648026 | 2013-07-18

  1. 11

    Mise à jour

    Bootstrap prend désormais en charge les touches haut/bas standard.

    Donc, si vous voulez Tab pour activer la liste déroulante, juste obtenir le code de clé (9) et effectuez les opérations suivantes:

    $('.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();
    }
});

    Et si vous voulez ajouter plus de fonctionnalités pour quand l'utilisateur se concentre sur l'élément de menu déroulant:

    $('.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;
    }
});

    Voir cette JSFiddle pour une démo.

    home/fin et la lettre de navigation est manquant 🙂
    Voir mise à jour de réponse. Vous pouvez ajouter la lettre de navigation par trouver le mot de code et l'ajout d'un commutateur de cas.

    OriginalL'auteur rybo111

  2. 1

    Bel exemple.

    Mais, Pourquoi avez-vous mis un setTimeout?
    Certains de raison particulière?

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

    J'ai fait le même exemple, en simulant une sélection de l'entrée de la boîte, sans délai d'attente. Check this out.

    Il est probable que c'était un caprice de la navigateur à l'époque.
    Le code a été mis à jour si vous êtes intéressé.
    Merci beaucoup pour l'info 🙂

    OriginalL'auteur nneeggrroo