Een zelfgebouwde tabcomponent. Mooie styling. Hover-effecten. Transities.
Tab ernaartoe. Geen focusindicator. De developer heeft border: none en outline: none in de component-CSS gezet om de standaardstyling te verwijderen. En is vergeten een :focus-visible toe te voegen.
/* Niet doen: styling verwijderen zonder alternatief */
.tab {
border: none;
outline: none;
background: transparent;
padding: 8px 16px;
}
/* Wel doen: eigen focusstijl toevoegen */
.tab {
border: none;
background: transparent;
padding: 8px 16px;
}
.tab:focus-visible {
outline: 2px solid #0066CC;
outline-offset: 2px;
border-radius: 4px;
}
Waar ik dit het vaakst tegenkom:
- Tabs en tabpanelen
- Accordions
- Dropdown-menu’s
- Custom checkboxen en radiobuttons
- Kaartcomponenten met klikbare elementen
- Datepickers
Elke keer dat een developer outline: none schrijft, moet in dezelfde stylesheet een :focus-visible staan. Geen uitzondering.
Tip: voeg een globale focus-stijl toe aan je project en overschrijf die alleen als het echt nodig is:
:focus-visible {
outline: 2px solid #0066CC;
outline-offset: 2px;
}
Dan heeft elk element standaard een zichtbare focus. En vergeet je het nooit meer.
