wie auf zweite Popup zu konzentrieren, wenn zweite Popup öffnen aus dem ersten Popup in eckig-ui-Bootstrap modal Direktive

Question

Ich habe auf Szenario, ich möchte Popup auf Popup mit Accessibility Beschwerde zeigen.

erste Popup funktioniert gut, wenn ich zweite Popup aus dem ersten Popup geöffnet noch Fokus ist bleibt auf dem ersten Popup, es nicht zu zweiten Popup verschieben, können Sie bitte helfen m darauf.

Ich habe einige Referenzen gefunden, aber diejenigen, die jquery Bootstrap verwenden, aber ich benutze angular-ui-bootstrap.

Vielen Dank im Voraus.

Answer 1

Der Fokus bewegt sich normalerweise durch fokussierbare Elemente (z. B. Schaltflächen, Verknüpfungen und Eingaben) in der Reihenfolge, in der sie im HTML-Code dargestellt werden. Die Ausnahme ist, wenn Sie den Fokus mithilfe von Javascript verschieben.

Ihr Setup scheint den Fokus nicht spezifisch auf die Mods zu richten; es erreicht den ersten, weil es als nächstes im HTML-Code erscheint. Aber das zweite Modal wird anders erzeugt, und der Fokus kann es nicht finden, weil es nicht zum HTML hinzugefügt wird (ich denke, es könnte sein, dass Plunker index.html nicht aktualisiert, wenn das Modal erstellt wird). Wenn Sie das CSS im Beispiel ausschalten, wird dies einfacher in Aktion zu sehen.

Also Schritt 1 für Sie wird sicherstellen, dass der Inhalt im HTML ist, damit der Fokus es erreichen kann. Normalerweise wäre dies mit einem append() in Javascript. Der nächste Schritt besteht darin, den Fokus auf den Teil des gewünschten HTML zu richten, anstatt ihn von der HTML-Reihenfolge steuern zu lassen.

Die einfachste Möglichkeit, den Fokus dorthin zu senden, wo Sie ihn brauchen, ist die Verwendung eines Links, z.

<a href="#myModal">open popup window</a> 
<a href="#my2ndModal">open me</a> 

Dann stellen Sie sicher, dass Ihr div Fokus mit einem Tabindex-Attribut nehmen kann.

<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> 

Der nächste Schritt ist, um sicherzustellen, dass der Fokus innerhalb des aktuellen modal bleibt, während es offen ist, so tut es nicht Schleife zurück zu Ihrem „öffnen Bootstrap-Pop-up“ -Taste oder andere fokussierbarem Elemente, die nicht sein kann gesehen. Dies geschieht normalerweise mit einem keyPress handler.

Die ARIA-Rolle von "Dokument" innerhalb des ersten modalen Div ist nicht erforderlich. Ich denke nicht, dass es irgendwas kaputt macht, es ist nur irreführend, weil es der Bildschirmlesesoftware sagt, dass Sie vom Surfen in einer App zum Blättern auf einer Seite gewechselt haben. Und wenn Sie role = "dialog" verwenden, müssen Sie auch ein Attribut aria-labelledby haben.