New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sous-menu toujours affiché alors qu'il n'y a plus de focus lors de l'utilisation du clavier (tab / shift-tab) #3

Closed
jbcordina opened this Issue Mar 29, 2016 · 8 comments

Comments

Projects
None yet
3 participants
@jbcordina
Copy link

jbcordina commented Mar 29, 2016

Lorsqu'on utilise les touches tab ou shift + tab sur le menu, les sous-menus du premier et du dernier onglet restent affichés alors qu'on a plus le focus dessus. La faute au "data-visually-hidden" qui n'est pas mis à jour sur ces évènements.

Problème reproduit sur différents sites dont le site de démo du module (pas de bol sur ce site, le focus suivant est trop bas pour le constater, il suffit de scroller vers le menu sans déclencher d'autres évènements pour le voir).

Corrigé chez moi en ajoutant les lignes suivantes :
Dans le bloc .on( 'keydown', '.js-nav-system__link', function( event ) {
Ajouter :
// event shift + tab if(event.shiftKey && event.keyCode == 9) { if ( $parent_item.is(".js-nav-system__item:first-child")) { $subnav.attr({ 'data-visually-hidden': 'true' }); } }

Dans le bloc $( 'body' ).on( 'keydown', '.js-nav-system__subnav__link', function( event ) {
Ajouter
// event tab if ( event.keyCode == 9 ) { // if we are on last subnav of last item => hide subnav if ( $nav_item.is(".js-nav-system__item:last-child") && $subnav_item.is( ".js-nav-system__subnav__item:last-child" ) ) { $subnav.attr({ 'data-visually-hidden': 'true' }); } }

Je ne suis pas sur que ce soit la meilleure solution, mais ça fait le job (désolé, la mise en forme du code a pas l'air bien prise sur ces commentaires).

Bonne journée !

@jbcordina

This comment has been minimized.

Copy link

jbcordina commented Mar 29, 2016

Au passage, question accessibilité, ne serait il pas judicieux quand on est sur un onglet n (sauf le premier), de passer le focus sur le dernier lien de l'onglet n-1 (et donc d'afficher le sous menu correspondant) plutot que de le mettre sur le lien de l'onglet lui-même ?

Je n'ai aucun avis la dessus, c'est juste une question que je me pose...

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Mar 29, 2016

Hello,

1er post => en fait, ce n'était pas un bug, mais c'était intentionnel : je laissais la sous-navigation en l'état pour que ceux qui veulent revenir dessus (en tabulant) la retrouvent dans le même état.

A la réflexion, c'est vrai que ça se discute.

2e post => d'un point de vue pure accessibilité de base, je dirais qu'on s'en fout, tant qu'on peut accéder à tout (le principe est de pouvoir tout atteindre avant tout).

Après, j'étais parti de l'idée de permettre de tout tabuler en marche avant de manière exhaustive, et de revenir plus rapidement en marche arrière (car en théorie, la personne sait ce qu'elle a vu et doit pouvoir y retourner le plus vite possible).
Encore une fois, un parti pris "ergonomique" que j'ai pris, pas une règle.

Je vais demander à des experts a11y voir ce qu'ils en pensent, le débat est intéressant ! ;)

@nico3333fr nico3333fr added the question label Mar 29, 2016

@nico3333fr nico3333fr self-assigned this Mar 29, 2016

@jbcordina

This comment has been minimized.

Copy link

jbcordina commented Mar 29, 2016

ok, je comprends le parti pris pour l'affichage permanent du sous-menu. En fait ma question s'est posée suite à l'usage d'un sous-menu un peu long avec du contenu en dessous qui se trouvait du coup masqué.

La seule solution que j'ai alors pour voir de nouveau mon contenu est de passer par les liens d'évitement pour aller directement au contenu. La solution est viable mais la modification que j'ai proposé répondait simplement à mon besoin.

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Mar 29, 2016

Effectivement, ça peut être un problème.

J'attends l'avis des experts, mais j'aurais tendance à préférer ton choix, le rapport bénéfice/risques me semble largement supérieur.

@goetsu

This comment has been minimized.

Copy link

goetsu commented Mar 29, 2016

pour ma part concernant le 2eme post je préfère effectivement que le focus retourne au dernier item du sous menu de l'item de 1er niveau précédant quand on navigue via shift tab plutot que de retourner sur l'item de 1er niveau précédant

Pour le 1er post je préfère aussi que les sous menus se ferment quand on sort complement du menu

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Mar 30, 2016

Okay, dès que j'ai le temps, je vois pour fixer ça. Normalement, d'ici la fin de la semaine ! :)

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Apr 9, 2016

Yop, je ne vous avais pas oublié, juste eu deux semaines de taré. Pour le premier point, c'était presque ça, j'ai fixé un détail dans
$( 'body' ).on( 'keydown', '.js-nav-system__subnav__link', function( event ) {

avec ça

          if ( event.keyCode == 9 && !event.shiftKey ) { // if we are on last subnav of last item and we go forward => hide subnav 
              if ( $nav_item.is(".js-nav-system__item:last-child") && $subnav_item.is( ".js-nav-system__subnav__item:last-child" ) ) { 
                  $subnav.attr({ 'data-visually-hidden': 'true' }); 
                  }
              }

Il fallait ajouter un test pour que la touche maj ne soit pas utilisé, sinon le menu disparaissait quand on était sur le dernier sous-élément et qu'on faisait Maj Tab (ça testait juste tab).

Je regarde pour la suite...

@nico3333fr

This comment has been minimized.

Copy link
Owner

nico3333fr commented Apr 9, 2016

Voilà, c'était pas si dur, j'ai ajouté un bon gros else sur ce que tu m'avais suggéré @jbcordina :

         // event shift + tab 
         if (event.shiftKey && event.keyCode == 9) {
            if ($parent_item.is(".js-nav-system__item:first-child")) {
               $subnav.attr({
                  'data-visually-hidden': 'true'
               });
            } else {

               var $prev_nav_link = $parent_item.prev('.js-nav-system__item').children(".js-nav-system__link");
                   $subnav_prev = $prev_nav_link.next('.js-nav-system__subnav');
               if ($subnav_prev.length === 1) { // hide current subnav, show previous and select last element
                  $subnav.attr({
                     'data-visually-hidden': 'true'
                  });
                  $subnav_prev.attr({
                    'data-visually-hidden': 'false'
                  });
                  $subnav_prev.find(" .js-nav-system__subnav__item:last-child ").children(".js-nav-system__subnav__link").focus();
                  event.preventDefault();
               }
            }
         }

Je committe le tout asap ! 👍

Merci bien, z'êtes des chefs.

@nico3333fr nico3333fr added the bug label Apr 9, 2016

@nico3333fr nico3333fr closed this in f7cd449 Apr 9, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment