Fokus beim Schließen eines Modales oder Flyout beibehalten

Question

Ich habe eine Frage zur Barrierefreiheit. Es gibt mehrere Ebenen/Modale oder Flyout-Fenster, die beim Klicken auf eine Schaltfläche oder einen Link geöffnet werden.

Ich muss den Fokus auf das ursprüngliche Element beibehalten, das geklickt wurde, um ein Modal oder Popup oder Flyout zu öffnen, sobald sie geschlossen sind, sollte der Fokus wieder auf das angeklickte Element sein.

Zur Zeit, als ich Registerkarte auf der Seite nach den modalen Fenstern oder Flyouts zu schließen, den Fokus von starten

begining ich bin mit Winkel Bootstrap-modal und benutzerdefinierte Flyout Fenstern über Winkelzustand Provider-Konfiguration geöffnet.

Answer 1

das obige Problem wurde gelöst, indem der aktuelle Fokus zu bewahren, bevor die modale öffnen und den Fokus wieder wiederherzustellen, wenn modal

Answer 2

Die offizielle Empfehlung WAI-ARIA Authoring Practices - Modal Dialog Staaten geschlossen ist:

Wenn ein Dialogfeld wird geschlossen, gibt den Fokus an das Element, das den Dialog aufgerufen hat, sofern nicht:

• Das aufrufende Element existiert nicht mehr. Dann wird der Fokus auf ein anderes Element gesetzt, das einen logischen Arbeitsablauf bereitstellt.
• Der Arbeitsablauf Entwurf umfasst die folgenden Bedingungen, die gelegentlich ein anderes Element Fokussierung eine logische Wahl treffen können:
  1. Es ist sehr unwahrscheinlich, Benutzer müssen sofort wieder aufrufen, um den Dialog.
  2. Die im Dialogfeld abgeschlossene Aufgabe steht in direktem Zusammenhang mit einem nachfolgenden Schritt im Arbeitsablauf.

Um den Fokus auf das Element zurück, die konzentriert wurde, bevor Sie Ihre modal geöffnet:

1. Bevor die modale Öffnung einen Verweis auf document.activeElement speichern.
2. Nach dem Schließen der modalen, focus der Verweis auf die vorherige activeElement.

Beispiel:

let previousActiveElement = document.activeElement; 
// Open and close the modal 
if (document.body.contains(previousActiveElement)) { 
    previousActiveElement.focus(); 
} 

Answer 3

Um den Fokus auf das Element zurück, die konzentriert wurde, bevor Sie Ihre modal geöffnet:

Vor dem modalen Öffnen einen Verweis auf document.activeElement speichern. Nachdem Sie das Modal geschlossen haben, fokussieren Sie den Verweis auf das vorherige activeElement.