UX фокус с :focus-visible!

Очень часто фокус делают так:
button:focus {
outline: none;
}

Или наоборот, фокус всегда виден, даже при клике мышью, что выглядит странно и раздражает.

Современный CSS даёт решение:
button:focus-visible {
outline: 2px solid #4da3ff;
}

:focus-visible показывает фокус только тогда, когда он реально нужен: при навигации с клавиатуры, при accessibility-сценариях и не показывает его при клике мышью.

Если элемент получил фокус мышью — стиля не будет.
Если клавиатурой — будет.

Для полного контроля можно добавить:
button:focus {
outline: none;
}

В итоге никакого лишнего фокуса, интерфейс выглядит профессионально и продуманно.

Code Ready | #совет