CSS псевдокласс :focus-visible

Псевдокласс :focus-visible применяет стили к элементу, которому нужен видимый индикатор фокуса.

Псевдокласс :focus-visible соответствует псевдоклассу :focus, выбирая элементы в фокусе, но применяет стили только в тех случаях, когда визуальный индикатор необходим для помощи пользователю увидеть, где находится фокус:

/* Добавить красный контур для кнопки, если фокус был
   получен не кликом кнопкой мыши или касанием */
button:focus-visible { outline: 2px solid red; }

Псевдокласс :focus-visible применяет стили к элементам, которые по мнению браузера должны иметь визуальный индикатор фокуса. К таким элементам можно отнести элементы, получающие фокус с помощью клавиатуры или скрипта.

Пример

button:focus { outline: 4px solid #47d147; }
button:focus-visible { outline: 4px dotted #99ddff; }

<p>Сравните отображение кнопок при получении фокуса
с помощью мышки и с помощью клавиши Tab.</p>

<p><button tabindex="1">Кнопка 1</button></p>
<p><button tabindex="2">Кнопка 2</button></p>
<p><button tabindex="3">Кнопка 3</button></p>

<!-- Чтобы кнопка получила фокус на неё надо кликнуть -->