You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
The text was updated successfully, but these errors were encountered:
savitris
changed the title
Focus Trap in Sidebar Navigation
Component: Sidebar Navigation
Jun 19, 2024
Yolijn
transferred this issue from nl-design-system/backlog
Jun 22, 2024
Yolijn
changed the title
Component: Sidebar Navigation
Focus Trap issue in Sidebar Navigation
Jun 22, 2024
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
![Screenshot 2024-06-18 at 17 20 43](https://private-user-images.githubusercontent.com/11764984/340735130-0fe3ce09-b899-4834-a9f3-9555d42b999b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0NDcyNjcsIm5iZiI6MTcyNTQ0Njk2NywicGF0aCI6Ii8xMTc2NDk4NC8zNDA3MzUxMzAtMGZlM2NlMDktYjg5OS00ODM0LWE5ZjMtOTU1NWQ0MmI5OTliLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDEwNDkyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJlZTAzYWNlYmEwNTg0ZTEzNDA4NjQyZjNiOTAwZmQyNmUwMWNhMjM2OWJhMjI0MTEyNGZkNGE1YTFmMDVhNGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.8LFfnIfQ4jVZAFbncV4f03o1vzDjsd4c_00lJ4ayjyI)
Afbeelding 2
![Screenshot 2024-06-18 at 17 26 14](https://private-user-images.githubusercontent.com/11764984/340737022-8dc00273-7808-470e-8066-fa054d1415ed.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0NDcyNjcsIm5iZiI6MTcyNTQ0Njk2NywicGF0aCI6Ii8xMTc2NDk4NC8zNDA3MzcwMjItOGRjMDAyNzMtNzgwOC00NzBlLTgwNjYtZmEwNTRkMTQxNWVkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDEwNDkyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM1MDAyODhjMTE1ZTQ3ZDI4ZDNhNGVmMmM5YmRhMzQ5OGZiNTZlMjMyMzY0NjUzOTRkNWNhODk4ODM5ZGRhNGEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.AnKFph0yitzQpj5jcvnaTnIfX6MAXELpCvNlUWNoJMc)
Afbeelding 3
![Screenshot 2024-06-18 at 17 12 28](https://private-user-images.githubusercontent.com/11764984/340735673-e85e7444-8a41-424a-b05b-331dbecf2b27.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0NDcyNjcsIm5iZiI6MTcyNTQ0Njk2NywicGF0aCI6Ii8xMTc2NDk4NC8zNDA3MzU2NzMtZTg1ZTc0NDQtOGE0MS00MjRhLWIwNWItMzMxZGJlY2YyYjI3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDEwNDkyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM3MjM1NDNiZTNlZDUwNTY0YzhmYTVmOGU0MzYxMDRiYzkwMThjODhlYTE2Mjk1ZTY1MDBjYTk3NGVkYWRhYmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.kWS04fKTBQWhGvbt2IsO_WHmBKGPHBgQ4bLoPVQlbdM)
Afbeelding 4
![Screenshot 2024-06-18 at 17 10 30](https://private-user-images.githubusercontent.com/11764984/340738140-503590a2-7f2a-4d7f-9170-2f96ef88caac.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0NDcyNjcsIm5iZiI6MTcyNTQ0Njk2NywicGF0aCI6Ii8xMTc2NDk4NC8zNDA3MzgxNDAtNTAzNTkwYTItN2YyYS00ZDdmLTkxNzAtMmY5NmVmODhjYWFjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDEwNDkyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU0NDgwMGYzMzMyYmUwOGU0ODc4NjRjYzNiN2Q4ZTI5NjA0MTcyZTQ4MmFjNGYxZjM3NTEzYTQ3MmZkY2ZiNzcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.dvu9O5HIPou_UY7UxXvRj4fM_O-7fbJK4TgmXvvZ-tg)
Afbeelding 5
![Screenshot 2024-06-18 at 17 10 41](https://private-user-images.githubusercontent.com/11764984/340738331-1c9cb051-34da-4854-a0b1-086ab3ee0a59.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0NDcyNjcsIm5iZiI6MTcyNTQ0Njk2NywicGF0aCI6Ii8xMTc2NDk4NC8zNDA3MzgzMzEtMWM5Y2IwNTEtMzRkYS00ODU0LWEwYjEtMDg2YWIzZWUwYTU5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDEwNDkyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVmMGRmZmQ1MWExYTg0M2VhNTNkNWYzMDYzMDQzMGIxYWEzNGYxMzU1ZWI5ZWE1ZTJhMjc3OGY3ZmIxNWExODkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.rg2O6O67KtDIs5FCZA86MpxGN5Q5qk4cWIsfC_E-Erg)
Afbeelding 6
![Screenshot 2024-06-18 at 17 09 50](https://private-user-images.githubusercontent.com/11764984/340742430-9236d518-075f-46bf-8cb6-b04dd937c23e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0NDcyNjcsIm5iZiI6MTcyNTQ0Njk2NywicGF0aCI6Ii8xMTc2NDk4NC8zNDA3NDI0MzAtOTIzNmQ1MTgtMDc1Zi00NmJmLThjYjYtYjA0ZGQ5MzdjMjNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDEwNDkyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFlZWI1NTkxNGMzYTMwMGI0ZDM2ODk5NzE3YzUzYzlkYTBkZjNlMjNjYTAxODIzYzRkODc2ZWNjY2RlYmUxMDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.fjXNEe0lqVypxlExn4nr5gnylTlpwE4Qe1xN8hhx-KM)
Afbeelding 7
![Screenshot 2024-06-18 at 17 12 28](https://private-user-images.githubusercontent.com/11764984/340744233-13e68b2f-2b74-4947-a0e6-bc6525d7c6da.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU0NDcyNjcsIm5iZiI6MTcyNTQ0Njk2NywicGF0aCI6Ii8xMTc2NDk4NC8zNDA3NDQyMzMtMTNlNjhiMmYtMmI3NC00OTQ3LWEwZTYtYmM2NTI1ZDdjNmRhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA0VDEwNDkyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY0ZTM1M2ViMTNlNWIyZjc4MDgyYTVjZmUwMGE0NmI2MGI5M2Y1MDhhYTZiZTIwMmNlOGZkOGViODI3OWUyZWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.S0CaIakqxh2rXDKKVdkcJf0nNaDFgluokqOrjccQbsY)
WCAG Succes Criteria:
2.4.3 Focus Order
2.1.2 No Keyboard Trap
3.2.1 On Focus
The text was updated successfully, but these errors were encountered: