Wie Einträge in der Listenliste zyklisch angezeigt werden

Question

Ich versuche die zyklische Tabbed-Funktion in einem Dropdown-Menü zu ändern.

Hier ist meine JSFiddle: https://jsfiddle.net/Lc7saks3/

<nav id="primary_nav_wrap"> 
    <div> 
    <ul> 
     <li tabindex="0"><a href="#">Menu</a> 
     <ul> 
      <li><a href="#">Option 1</a></li> 
      <li><a href="#">Option 2</a></li> 
      <li><a href="#">Option 3</a></li> 
      <li><a href="#">Option 4</a></li> 
      <li><a href="#">Option 5</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
    <br /> 
    <br /> 
    <input type="text" /> 
</nav> 

Klicken Sie auf das Menü-Element und dann auf das Register durch die Optionen.

Momentan durchläuft die Registerkarte die 5 Optionen im Dropdown-Menü und geht dann zum Eingabeelement über.

Wie kann ich es machen, so dass die Drop-Down-Optionen wieder mit Registerkarten werden, zyklisch, von Option 1, sobald die letzte Option (Option 5) erreicht ist?

Answer 1

Sie müssten Skript verwenden listen for the Tab key während on the last item und, wenn sie gedrückt wird, sofort move focus zurück auf das erste Element (oder dynamisch tabindex Werte einstellen, wenn Sie zum letzten Punkt erhalten).

Jedoch TUN SIE DIESES NICHT, da es eine Tastaturfalle darstellt und ein Fehler von WCAG 2.0 Element 2.1.2, No Keyboard Trap ist. Es gibt eine lange Technik ist dies für den Umgang, der sagt im Wesentlichen nicht tun, was Sie zu tun versuchen: G21: Ensuring that users are not trapped in content

Schließlich schlage ich vor, Sie nehmen die tabindex vom li als dass nicht eine interaktiven/umsetzbare Steuerung ist und kein Platz für a tabindex.