Le cycle de claviers JS/JQuery à travers le sous-nav (fonction de mise au point) ne fonctionne pas comme prévu

Pour l'accessibilité, je dois disposer d'une fonctionnalité de mise au point étendue sur ma navigation. Si vous appuyez sur les touches bas ou haut, la jquery parcourt les éléments du sous-nav tout en maintenant le focus. J'ai presque cloué ceci, cependant, le jquery next() ne fonctionne pas comme prévu, à la place il saute deux ou parfois va juste dans un ordre aléatoire.Le cycle de claviers JS/JQuery à travers le sous-nav (fonction de mise au point) ne fonctionne pas comme prévu

HTML: -

<nav class="nav nav--primary" role="navigation"> 

      <a href="/" title="Home" class="primary-nav-link parent active" data-position="1" tabindex="1">wasd</a> 

      <div class="nav__dropdown"> 
        <a class="primary-nav-link parent " tabindex="1">wasd</a> 
       <span class="nav__expand"></span> 
       <div class="nav__dropdown__content" aria-hidden="true"> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a> 
       </div> 
      </div> 

      <div class="nav__dropdown"> 
        <a class="primary-nav-link parent " tabindex="1">wasd</a> 
       <span class="nav__expand"></span> 
       <div class="nav__dropdown__content" aria-hidden="true"> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a> 
       </div> 
      </div> 

      <div class="nav__dropdown"> 
        <a class="primary-nav-link parent " tabindex="1">wasd</a> 
       <span class="nav__expand"></span> 
       <div class="nav__dropdown__content" aria-hidden="true"> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a> 
       </div> 
      </div> 

</nav>

JS: -

$(".parent").focus(function(){ 

    $(this).closest(".nav__dropdown").addClass("hover"); 
    $('.hover .nav__dropdown__content a').first().addClass('navSelected'); 

     $(document).keydown(function(e) { 
      var selected = $('.navSelected'); 
      var sub = $('.hover .nav__dropdown__content a'); 


      if(e.which === 40){ 

       if(selected){ 
        selected.removeClass('navSelected'); 
        next = selected.next(); 
         if(next.length > 0){ 
          selected = next.addClass('navSelected'); 
         }else{ 
          selected = sub.eq(0).addClass('navSelected'); 
         } 
       }else{ 
        selected = sub.eq(0).addClass('navSelected'); 
       } 


      }else if(e.which === 38){ 
       if(selected){ 
        selected.removeClass('navSelected'); 
        next = selected.prev(); 
        if(next.length > 0){ 
       selected = next.addClass('navSelected'); 
        }else{ 
         selected = sub.last().addClass('navSelected'); 
        } 
       }else{ 
       selected = sub.last().addClass('navSelected'); 
       } 
      } 
     }); 

}).blur(function(){  
    $(".nav__dropdown").removeClass("hover"); 
    $(document).removeClass("navSelected"); 
})

violon js travail: -

https://jsfiddle.net/zpnfzevb/

Source

2016-06-30 M T

je ne peux pas sembler reproduire ce problème dans le jsFiddle. –

Cliquez en haut à droite du premier lien de navigation, puis appuyez deux fois sur l'onglet pour mettre l'accent sur l'élément de droite et vous verrez la sous-navigation avec l'élément vert sélectionné, appuyez sur les touches haut et bas et vous remarquerez Ne roulez pas dans le bon ordre. –

Ce n'est pas un ordre aléatoire. Chaque menu a un motif: A: 1,3,5,2,4; B: 5,4,3,2,1; C: 1,3,5,2,4. Je vérifierais tes maths. Je voudrais également vider chaque 'tabindex' car vous avez des valeurs en double et vous rompez complètement le tabulation (puisque le menu manque de' role = menu' un utilisateur ne peut pas s'attendre à ce que les flèches fonctionnent). En bref, revoir ce que signifie «pour l'accessibilité» car je pense que vous avez reçu des exigences techniques médiocres. – aardrian

l'événement KeyDown lié à $ (document) a été à l'origine supplémentaire boucles signifiant que la sélection finirait dans différents endroits. L'événement est maintenant lié à $ ('nav') et n'est pas lié dans la fonction de flou, cela a supprimé tous les déclencheurs indésirables et se comporte maintenant comme prévu.

JS finales ci-dessous: -

$(".parent").focus(function(){ 

    $(this).closest(".nav__dropdown").addClass("hover"); 
    $('.hover .nav__dropdown__content a').first().addClass('navSelected'); 

     $('nav').keydown(function(e) { 
      var selected = $('.navSelected'); 
      var sub = $('.hover .nav__dropdown__content a'); 


      if(e.which === 40){ 

       if(selected){ 
        selected.removeClass('navSelected'); 
        next = selected.next(); 
         if(next.length > 0){ 
          selected = next.addClass('navSelected'); 
         }else{ 
          selected = sub.eq(0).addClass('navSelected'); 
         } 
       } 


      } 
      if(e.which === 38){ 
       if(selected){ 
        selected.removeClass('navSelected'); 
        next = selected.prev(); 
         if(next.length > 0){ 
          selected = next.addClass('navSelected'); 
         }else{ 
          selected = sub.last().addClass('navSelected'); 
         } 
       } 
      } 

      if(e.which === 13){ 
       if(selected){ 
       selected.trigger('click'); 
       } 
      } 

     }) 

    }).blur(function(){ 
    $('nav').unbind('keydown'); 
    $(".nav__dropdown").removeClass("hover"); 
    $(document).removeClass("navSelected"); 
    })

Source

2016-06-30 17:04:00

Le cycle de claviers JS/JQuery à travers le sous-nav (fonction de mise au point) ne fonctionne pas comme prévu

Répondre

Questions connexes