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

gestion des tabindex -1 quand modale ouverte #10

Closed
goetsu opened this Issue Jan 25, 2016 · 10 comments

Comments

Projects
None yet
2 participants
@goetsu

goetsu commented Jan 25, 2016

hello, sur ton script modale je viens de me rendre compte que tu n'appliquais pas de tabindex -1 aux liens, element de formulaire etc en arrière plan du coup si je remet le focus sur la barre d'adresse puis retabule je repasse en dessous de la modale.

Un correctif de base pourrait être de mettre la modale en 1er dans le code source mais cela poserait toujours souci si l'utilisateur fait shift tab au lieu de tab

Enfin si tu implémente gestion des tabindex -1 :

  • je recommande de le rendre désactivable car c'est généralement assez gourmand sur les grosses pages.
  • il faut appliquer le tabindex -1 à tout ce qui est tabulable donc les liens, les buttons, les input, les select, les textarea, les éléments avec un tabindex >=0 (attention pour ceux là il faudra à la fermeture remettre leur valeur tel qu'elle était)

@nico3333fr nico3333fr self-assigned this Jan 25, 2016

@nico3333fr

This comment has been minimized.

Owner

nico3333fr commented Jan 27, 2016

Yop,

je suis en train d'y réfléchir, et je viens d'avoir une idée : pourquoi ne pas ajouter un listener qui détecte si le focus est ailleurs que dans la modale, et qui le remet dedans ? (c'est p-e plus simple)

Qu'en penses-tu mon cher @goetsu ? :)

@goetsu

This comment has been minimized.

goetsu commented Jan 28, 2016

à tester oui

@nico3333fr

This comment has been minimized.

Owner

nico3333fr commented Feb 12, 2016

Yop @goetsu je crois que c'est bon, tu peux tester sur http://a11y.nicolas-hoffmann.net/modal/ ?

@goetsu

This comment has been minimized.

goetsu commented Feb 12, 2016

dans ta démo y a un bug avec la modale 'it's accessible' dans celle là le focus reste bloqué quand on tab après le 1er lien dans la modale et quand on shift tab il sort de la modale

@nico3333fr

This comment has been minimized.

Owner

nico3333fr commented Feb 12, 2016

Diantre, bien vu, j'essaie de fixer...

@nico3333fr

This comment has been minimized.

Owner

nico3333fr commented Feb 12, 2016

Ok, j'avais merdé ma fonction, j'ai fait autrement, ça devrait être bon cette fois. Un ch'ti test ? :)

@goetsu

This comment has been minimized.

goetsu commented Feb 12, 2016

ok y a plus le bug et le bug d'origine est quasi corrigé, quasi car j'ai toujours le 1er lien dans la page sous la modale qui reçoit le focus si je remet le focus sur la barre d'adresse puis retabule quand modale ouverte

@nico3333fr

This comment has been minimized.

Owner

nico3333fr commented Feb 12, 2016

J'ai updaté le script, avec .on ( "keyup,
ça a l'air d'être bon !

@goetsu

This comment has been minimized.

goetsu commented Feb 12, 2016

oui c'est bon maintenant

@nico3333fr

This comment has been minimized.

Owner

nico3333fr commented Feb 12, 2016

cool, je shippe dès que possible, encore merci :)
Ce qui va résoudre aussi le cas de la page qui utilise une modale automatiquement.

nico3333fr added a commit that referenced this issue Feb 12, 2016

Add animation + fix bug modal opened
- Bug if modal is already opened and focus in the browser bar => focus is trapped and goes into the modal, if opened.

- add animation possibilities

Closed #7 and #10

@nico3333fr nico3333fr closed this Feb 12, 2016

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