Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus outline #421

Open
ppvg opened this issue Nov 29, 2023 · 1 comment
Open

Focus outline #421

ppvg opened this issue Nov 29, 2023 · 1 comment
Labels
a11y Accessibility fixes and improvements Collapsible Component 'Collapsible menu' Core set From the base set of components Focus Focus state related issues Footer Component 'Footer' Form Component 'Form' Header Component 'Header' Notifications Component 'Notifications' Pagination Component 'Pagination' Table Component 'Table' Tabs Component 'Tabs'
Milestone

Comments

@ppvg
Copy link
Member

ppvg commented Nov 29, 2023

From independent accessibility report, SC 1.4.1:

Als de niet-actieve links in het hoofdmenu focus krijgen, is dit alleen zichtbaar doordat de kleur verandert. Hierdoor is het niet voor iedereen goed te zien dat deze elementen focus krijgen. Het advies is om de focus aan te geven door middel van een omlijning in plaats van enkel een kleurverandering.

From independent accessibility report, SC 2.4.7:

Op pagina components/footer.html is de focusindicator niet zichtbaar op de 3 links in de footer-component.

Op pagina components/collapsible.html is de focusindicator niet zichtbaar op de inklapbare ghost button. Ook is de focusindicator niet zichtbaar op de menu-items die verschijnen als een element wordt uitgeklapt.

Op pagina components/header-example-language-select-list.html is de focusindicator niet zichtbaar op het logo (het logo verdwijnt ook als deze focus ontvangt), op het actieve item in het hoofdmenu en op het element waarmee een taal geselecteerd kan worden.

Op pagina components/pagination.html is de focusindicator niet zichtbaar op de links waarmee naar andere pagina's genavigeerd kan worden.

Op pagina components/tabs.html is de focusindicator niet zichtbaar op de elementen waarmee een ander tabblad geselecteerd kan worden.

Op pagina components/form-help.html is de focusindicator niet zichtbaar op het element waarmee een hulptekst getoond kan worden.

Op pagina components/table-expando-row.html is de focusindicator niet zichtbaar op de pijlen waarmee meer details getoond kunnen worden.

Op pagina components/notification-error.html staat in de eerste foutmelding een link. Hierop is de toetsenbordfocus niet zichtbaar.

De toetsenbordfocus is overigens ook niet zichtbaar op alle interactieve elementen in de instructies. components.html

The documentation theme (soft) is missing a focus outline on various elements.

@ppvg ppvg added the a11y Accessibility fixes and improvements label Nov 29, 2023
@ppvg ppvg self-assigned this May 14, 2024
@StephanoMarshall
Copy link

Blocked by tech debt (tickets to be created)

@HeleenSG HeleenSG added the Focus Focus state related issues label Sep 19, 2024
@reinschaap reinschaap added Form Component 'Form' Collapsible Component 'Collapsible menu' Footer Component 'Footer' Tabs Component 'Tabs' Header Component 'Header' Table Component 'Table' Pagination Component 'Pagination' Notifications Component 'Notifications' labels Sep 26, 2024
@Davidemeer Davidemeer added the Core set From the base set of components label Sep 30, 2024
@Davidemeer Davidemeer added this to the Fase 2 Manon milestone Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility fixes and improvements Collapsible Component 'Collapsible menu' Core set From the base set of components Focus Focus state related issues Footer Component 'Footer' Form Component 'Form' Header Component 'Header' Notifications Component 'Notifications' Pagination Component 'Pagination' Table Component 'Table' Tabs Component 'Tabs'
Projects
None yet
Development

No branches or pull requests

5 participants