Ире Адеринокун простыми словами объясняет спецификацию псевдокласса
:focus-visible. Браузер применяет стили для него, если:1. Пользователь установил настройку «Всегда показывать фокус».
2. Сфокусированный элемент поддерживает работу с вводом с клавиатуры. То есть для инпутов с текстом применит стили, а для кнопок — не факт.
3. Пользователь переключается между фокусируемыми элементами при помощи устройства без указателя. Например, клавиатурой.
4. JS-скрипт переместил фокус с элемента, на котором стили применялись.
Просто и понятно. В статье есть демки, которые помогут понять на примерах.
Для меня самое ценное в статье — сниппет, который как будто можно брать и копировать почти в любой проект, где нет кастомных стилей выделения для отдельных элементов.
/* Apply focus styles */
:focus-visible, :focus {
outline: 1px solid red;
}
/* Remove the focus outline */
:focus:not(:focus-visible) {
outline: none;
}
https://bitsofco.de/when-is-focus-visible-visible/