lux-master-detail-ac: keyboard-access für die Master-Liste überarbeiten

[patrowe]

Aktuell wird bei Navigation mit dem Keyboard (Tab) zunächst die gesamte Liste im Master-Detail fokussiert. Danach kann man mit den Pfeiltasten durch die Liste navigieren, mit einem weiteren Tab kommt man aus der Liste heraus.

Dieses soll geändert werden. Wird Liste per Tab erreicht, soll das "aktive/ausgewählte" Element fokussiert werden. Danach soll die Navigation durch die Liste wie bisher mit den Pfeiltasten erfolgen. Mit einem weiteren Tab wird die Liste verlassen. Ist kein Element ausgewählt, soll das oberste Element fokussiert werden.

Akzeptanzkriterium: Mit dem Tab-Key wird das ausgwählte bzw. das oberste Element fokussiert. Mit einem weiteren Tab wird die Liste verlassen. Die bisherige Navigation mit Pfeiltasten durch die Liste bleibt erhalten. Die Screenreader-Funktionalität muss erhalten bleiben bzw. angepasst werden.

[patrowe]

Die Anforderungen wurden umgesetzt. @DSeifer: Bitte testen!

[patrowe]

Test

Vorbedingungen:

• die angehängten Branches für das Theme und die Components jeweils auschecken
• das Theme lokal bauen und lokal mit den Components verlinken
• das Demoprogramm für die Components starten

Test A: Fokus-Reihenfolge, bei Selektiertem List-Item (default in der Demo)

1. Den Focus im Filter "platzieren" dafür den Button "Mehr Optionen" 2mal klicken
2. Mit der Tabulator-Taste durch die Seite navigieren (mindestens 3 Schritte)
3. Dabei sollen die Elemente in folgender Reihenfolge (s. Bild) fokusiert werden (wichtig in der Masterliste wird Eintrag 2 fokusiert)

Test B: Fokus-Reihenfolge ohne selektiertes List-Item

1. Das Menü im Master-Footer öffnen und zuerst "Liste leeren" wählen, danach wieder "Liste füllen", dadurch wird die selektierte Position zurückgesetzt.

2. Die Schritte 1 und 2 von Test A wiederholen.

3. Die Elemente werden wie oben fokusiert, nur in der Masterliste wird Eintrag 1 fokusiert.

Test C: Tastatur-Navigation innerhalb der Masterlist:

1. Wie unter Test A 1+2 den "Eintrag 2" über die Tastatur fokussieren.
2. Mit den Pfeiltasten hoch und runter durch die Liste navigieren.
3. Mit "Pos 1"-Taste soll das erste Listenelement direkt fokussiert werden.
4. Mit "Ende"-Taste soll das letzte Listenelement (Eintrag 20) direkt fokussiert werden.

[DSeifer]

Unter Windows 10 Enterprise 22H2 (19045.3324) und MacOS 13.4.1 (c) mit den jeweils aktuellen Browserversionen getestet: MacOS: Firefox, Chrome -> OK MacOS: Safari -> ERR

Im Safari wird die Schaltfläche "FILTERN" beim Tab übersprungen und nach 'Eintrag #1' bzw. 'Eintrag #2' springt der Tab ins Nirvana.

Windows: Edge, Firefox, Chrome -> OK

[DSeifer]

Unter Windows 10 Enterprise 22H2 (19045.3324) und MacOS 13.4.1 (c) mit den jeweils aktuellen Browserversionen getestet: MacOS: Firefox, Chrome, Safari -> OK

Im Safari muss in den Einstellungen unter Erweitert die Option "Über Tabulatur jedes Objekt auf einer Webseite hervorheben" aktiviert sein, damit die programmierte Tabulatorreihenfolge genutzt wird!

Windows: Edge, Firefox, Chrome -> OK