Comment faire le menu déroulant bootstrap4 sélectionnable par clavier?

Question

Comment rendre le menu déroulant bootstrap4 sélectionnable au clavier?

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="dropdown show"> 
 
    <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    Dropdown link 
 
    </a> 
 

 
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuLink"> 
 
    <a class="dropdown-item" href="#">Action</a> 
 
    <a class="dropdown-item" href="#">Another action</a> 
 
    <a class="dropdown-item" href="#">Something else here</a> 
 
</div>

Answer 1

Avec tabindex="0" vous pouvez maintenant utiliser la touche tab puis sur la touche space pour ouvrir la liste déroulante et utilisez tab pour naviguer dans l'élément de liste.

En outre, l'ordre de votre source de référence était incorrecte, vérifiez le code ci-dessous

$(document).ready(function() { 
 
    $('.dropdown').keydown(function(e) { 
 
    switch (e.which) { 
 
     // user presses the "up arrow" key 
 
     case 38: 
 
     var focused = $(':focus'); 
 
     if (focused.hasClass('dropdown-toggle') || focused.is(':first-child')) { 
 
      $('.dropdown').find('.dropdown-item').first().focus(); 
 
     } else { 
 
      focused.prev().focus(); 
 
     } 
 
     break; 
 
     // user presses the "down arrow" key 
 
     case 40: 
 
     var focused = $(':focus'); 
 
     if (focused.hasClass('dropdown-toggle') || focused.is(':last-child')) { 
 
      $('.dropdown').find('.dropdown-item').first().focus(); 
 
     } else { 
 
      focused.next().focus(); 
 
     } 
 
     break; 
 
    } 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="dropdown show"> 
 
    <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    Dropdown link 
 
    </a> 
 

 
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuLink"> 
 
    <a class="dropdown-item" href="#" tabindex="0">Action</a> 
 
    <a class="dropdown-item" href="#" tabindex="0">Another action</a> 
 
    <a class="dropdown-item" href="#" tabindex="0">Something else here</a> 
 
    </div> 
 

 
</div>