Warnung: „Aria-hidden für ein Element blockiert, weil sein Nachkomme den Fokus behalten hat“ im Angular-Modal
Posted: 05 Jan 2025, 05:15
In meiner Angular-Anwendung erhalte ich eine Warnung, die besagt:
Aria-hidden wurde für ein Element blockiert, weil sein Nachkomme den Fokus behalten hat. Der Fokus darf den Nutzern unterstützender Technologien nicht verborgen bleiben. Vermeiden Sie die Verwendung von aria-hidden für ein fokussiertes Element oder seinen Vorfahren. Erwägen Sie stattdessen die Verwendung des inerten Attributs.
Ich verwende einen modalen Dialog, der mit der Angular Bootstrap-Bibliothek (ng-bootstrap) erstellt wurde. Hier ist eine vereinfachte Version des relevanten Codes:
Problem:
Die Warnung weist darauf hin, dass ein Element mit aria-hidden den Fokus seiner untergeordneten Elemente blockiert. Ich möchte sicherstellen, dass mein Modal zugänglich ist und keine Probleme für Benutzer unterstützender Technologien verursacht.
Ich habe überlegt, das inert-Attribut wie vorgeschlagen zu verwenden, bin mir aber nicht sicher, wie ich es hier implementieren soll Kontext.
Ich habe die ng-bootstrap-Dokumentation durchgesehen und keine spezifische Anleitung zu dieser Warnung gefunden.
Aria-hidden wurde für ein Element blockiert, weil sein Nachkomme den Fokus behalten hat. Der Fokus darf den Nutzern unterstützender Technologien nicht verborgen bleiben. Vermeiden Sie die Verwendung von aria-hidden für ein fokussiertes Element oder seinen Vorfahren. Erwägen Sie stattdessen die Verwendung des inerten Attributs.
Ich verwende einen modalen Dialog, der mit der Angular Bootstrap-Bibliothek (ng-bootstrap) erstellt wurde. Hier ist eine vereinfachte Version des relevanten Codes:
Code: Select all
[h4]Serial Number[/h4]
×
Die Warnung weist darauf hin, dass ein Element mit aria-hidden den Fokus seiner untergeordneten Elemente blockiert. Ich möchte sicherstellen, dass mein Modal zugänglich ist und keine Probleme für Benutzer unterstützender Technologien verursacht.
Ich habe überlegt, das inert-Attribut wie vorgeschlagen zu verwenden, bin mir aber nicht sicher, wie ich es hier implementieren soll Kontext.
Ich habe die ng-bootstrap-Dokumentation durchgesehen und keine spezifische Anleitung zu dieser Warnung gefunden.