Barrierefreiheit: lux-dialog hat keine Heading

IHK-GfI / lux-components

Other

17 stars 5 forks source link

Barrierefreiheit: lux-dialog hat keine Heading #370

Closed patrowe closed 9 months ago

patrowe commented 9 months ago

Die lux-dialog-Komponente besitzt keine Heading. Da der bisherige Seiteninhalt durch das Öffnen eines Dialogs ausgeblendet wird, muss die Dialog-Komponente eine eigene Heading enthalten. Analog zu den Empfehlungen der Angular-Material-components soll Titel in einer h2 dargestellt werden. vgl. https://accessibleweb.com/question-answer/how-should-i-handle-headings-in-a-modal/ und https://material.angular.io/components/dialog/examples

Akzeptanzkriterium Der Titel des Dialogs wird in einer h2 dargestellt.

patrowe commented 9 months ago

Die Anforderungen wurden umgesetzt. Bitte Testen.

Für den Test die Erweiterung in Chrome hinzufügen https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?utm_source=ext_sidebar&hl=de

patrowe commented 9 months ago

Test

Vorbedingungen: Den angehängten Pullrequest auschecken und die Demo starten. Die Erweiterung headingsMap in den Entwicklertools starten.

Test: Auf die Test-Seite für Dialoge wechseln, nach unten scrollen und den Button "Öffnen(Preset)" klicken.

Zu erwartendes Ergebnis: Bei geöffnetem Dialog zeigt headingsMap folgende Struktur an.

DSeifer commented 9 months ago

Unter Windows 10 Enterprise 21H2 (19044.3448) und MacOS 14.0 mit den jeweils aktuellen Browserversionen getestet: MacOS: Safari -> OK Windows: Edge -> OK