Focus Trap issue in Sidebar Navigation

[savitris]

Focus Trap issue in Sidebar Navigation

Pagina: Elke pagina van de NL Design System website

Probleem: De NL Design System website heeft een Main Navigation (zie Afbeelding 1) die bij inzoomen verandert in een Sidebar Navigation (zie Afbeelding 2). Het probleem is dat wanneer de gebruiker dit Sidebar Navigation opent (zie Afbeelding 3), de focus zich gedurende twee tabstops buiten het menu bevindt (zie Afbeeldingen 4, 5 en 6). Pas na de derde tabstop komt de focus binnen in het Sidebar Navigation en kan de gebruiker door elk item erin tabben. Wanneer de focus zich op het laatste item van het Sidebar Navigation bevindt en de gebruiker opnieuw op de Tab-toets drukt, verplaatst de focus zich buiten het Sidebar Navigation zonder dat het zichzelf sluit (zie Afbeelding 7). Hierdoor kan de Toetsenbord-gebruiker niet zien waar de Focus-ring zich bevindt.

Extra:
Op elke andere pagina dan de homepage, als voorbeeld de Componenten Pagina zien we hetzelfde Focus Trap Issue. Maar na uiteindelijk de focus binnen de Sidebar Navigation te hebben verplaatst, krijgt de eerste component die focus krijgt de Hoofdmenu-knop, daarna de X-knop en vervolgens gaat de focus weer buiten de Sidebar Navigation naar de links van de Main Navigation, dit zonder de focus te verplaatsen naar de sectie van de Sidebar Navigation die deze links bevat.

Ten slotte, na opnieuw te tabben, komen we weer in de Sidebar Navigation op de Overzicht-link en kunnen we door elk van de items in de Componenten-sectie van de Sidebar Navigation tabben.

Tabben na het laatste item in de Componenten-sectie van de Sidebar Navigation verplaatst de focus opnieuw buiten de Sidebar Navigation (op de "Home" link) zonder deze te sluiten.

Gerelateerde afbeeldingen:

Afbeelding 1

Afbeelding 2

Afbeelding 3

Afbeelding 4

Afbeelding 5

Afbeelding 6

Afbeelding 7

WCAG Succes Criteria:
2.4.3 Focus Order
2.1.2 No Keyboard Trap
3.2.1 On Focus

[rianrietveld]

@savitris Dank voor het melden!