Ich baue eine barrierefreie Website und versuche, den Fokus zu verwalten. Ich muss ein Modal öffnen und dann den Fokus auf das erste Element im Modal setzen und dann den Fokus einfangen, bis das Modal geschlossen ist ("annulliert" oder "akzeptiert").
HTML
%Vor%Javascript
%Vor%Sie können diesen Code hinzufügen, um alle Fokusereignisse an das h3-Tag anzupassen, wenn Modal sichtbar ist.
Es gibt mehrere Möglichkeiten, den Fokus einzufangen.
Eine Lösung besteht darin, tabindex="-1" temporär für alle Elemente im Hintergrund Ihres Modales zu setzen, wenn es angezeigt wird (und diesen Tabindex entfernen oder zum ursprünglichen Tabindex zurückkehren, wenn Sie modal verlassen).
Eine andere Lösung ist es, zu sehen, wie angular-Bootstrap-Plan, um dieses Problem zu beheben: Ссылка
Sie können auch auf die WAI ARIA Seite schauen, sie haben einen verwandten Inhalt darüber: Ссылка
Okay nach viel zu viel Suche, das ist, was ich mir ausgedacht habe. Im Grunde habe ich ng-focus-Funktionen für das letzte Element im modalen und das nächste Element im modalen Modus erstellt. Auf diese Weise konnte ich prüfen, ob der Fokus innerhalb des Modals existierte und wenn nicht, würde ich den Fokus wieder nach oben führen.
%Vor%Javascript
%Vor% Verwenden Sie keine Lösung, bei der Sie nach Tabable-Elementen suchen müssen. Verwenden Sie stattdessen keydown und entweder click events oder einen Hintergrund in einem effektiven Manor.
Sie müssen ein allgemeines window.keydown -Ereignis mit preventDefault() haben, um alle Tabs zu stoppen, wenn das Modal angezeigt wird, und ein keydown.tab -Ereignis mit stopPropagation() , um Tabs für das Modal zu verarbeiten.
Sie können click -Ereignisse in einem ähnlichen Stil verwenden oder Sie können einfach einen Hintergrund verwenden, um das Klicken von Elementen dahinter zu verhindern.
Für Angular1 würde ich mir vorstellen, dass dies ähnlich wie Asheesh Kumars Antwort aussehen würde. Sie können meine Angular2-x-Lösung hier sehen: Ссылка
Tags und Links javascript angularjs angularjs-directive angularjs-scope focus