comment se concentrer sur la deuxième popup, quand ouvrir deuxième popup de la première popup dans la directive modale angular-ui-bootstrap

Question

J'ai sur le scénario, je voudrais montrer popup sur popup avec plainte d'accessibilité. La première popup fonctionne bien, si j'ai ouvert la deuxième popup de la première popup, le focus reste sur le premier popup, il ne passe pas au second popup, pouvez-vous m'aider?

J'ai trouvé quelques références mais celles utilisant jquery bootstrap, mais j'utilise angular-ui-bootstrap.

Merci d'avance.

Answer 1

La mise au point se déplace généralement à travers des éléments focalisables (par exemple, des boutons, des liens et des entrées) dans le même ordre que celui présenté dans le code HTML. L'exception à ceci est lorsque vous déplacez le focus en utilisant Javascript.

Votre configuration ne semble pas envoyer le focus spécifiquement aux modaux; il atteint le premier car c'est le suivant dans le HTML. Mais le second modal est généré différemment, et donc le focus ne peut pas le trouver car il n'est pas ajouté au HTML (je pense, il se peut que Plunker ne mette pas à jour index.html quand le modal est créé). Si vous désactivez le CSS dans l'exemple, cela devient plus facile à voir en action.

Donc, étape 1 pour vous de vous assurer que le contenu est dans le code HTML afin que l'accent puisse l'atteindre. Habituellement ce serait avec un append() en Javascript. L'étape suivante consistera à envoyer le focus sur la partie du code HTML que vous souhaitez, au lieu de laisser l'ordre HTML le contrôler.

La méthode la plus simple pour envoyer le focus là où vous en avez besoin est d'utiliser un lien, par ex. Ensuite, assurez-vous que votre div peut prendre en charge en utilisant un attribut tabindex.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="#modalHeading" id="myModal"> 
    <h4 id="modalHeading>Dialog Title</h4> 
    ... content... 
</div> 

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal2Heading" id="my2ndModal"> 
    <h4 id="modal2Heading>2nd Dialog Title</h4> 
    ...content... 
</div> 

L'étape suivante consiste à faire en sorte que l'accent reste à l'intérieur du modal courant alors qu'il est ouvert, il ne boucle pas à votre bouton « Ouvrir le menu d'amorçage » ou d'autres éléments vario qui ne peuvent être vu. Ceci est généralement fait avec un keyPress handler.

Le rôle ARIA de "document" à l'intérieur du premier div modal n'est pas nécessaire. Je ne pense pas que ça casse quoi que ce soit, c'est juste trompeur parce qu'il indique au logiciel screenreader que vous avez changé de la navigation d'une application à la navigation sur une page. Et si vous utilisez role = "dialog", vous devez aussi avoir un attribut aria-labelledby.