CSS: focus-visible

Mit focus-visible werden focus states nur für mit der Tastatur ausgewählte Elemente vergeben.

Achtung, funktioniert meistens nur, wenn du 100% Kontrolle über den gesamten Code Output hast. Sobald du Libraries/Frameworks mit vordefinierten Komponenten verwendest, funktioniert :focus-visible meistens nicht mehr richtig bzw. es werden auch outlines an Elemente weitergegeben die mittels Maus fokussiert werden.

CSS
*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid #ff8906;
    outline-offset: 3px;
}