Чем focus-visible отличается от обычного focus?

Псевдокласс :focus применяется к элементу в момент, когда он получает фокус любым способом: кликом мыши, тапом на мобильном, программно через element.focus() или навигацией с клавиатуры (Tab). Это исторически основной способ стилизации фокуса, но он создаёт проблему: если убрать обводку через outline: none, страдают пользователи клавиатуры, а если оставить — обводка появляется и при клике мышью, что выглядит неаккуратно.

Как работает :focus-visible

:focus-visible — более умный псевдокласс. Браузер сам решает, уместно ли показать индикатор фокуса, опираясь на эвристики:

• фокус получен через клавиатуру (Tab, Shift+Tab, стрелки) — индикатор показывается;
• фокус получен кликом мыши по кнопке или ссылке — индикатор скрывается;
• фокус получен программно или на элементе ввода текста — обычно показывается.

Пример использования

/* Убираем стандартную обводку только там, где она не нужна */
button:focus {
  outline: none;
}

/* Показываем кастомный индикатор для клавиатурных пользователей */
button:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* Для старых браузеров можно оставить fallback */
button:focus:not(:focus-visible) {
  outline: none;
}

Где применять

Подход полезен в дизайн-системах и UI-библиотеках, где важно сохранить доступность (WCAG 2.4.7 требует видимый фокус) и при этом не портить внешний вид при кликах мышью. Современные браузеры поддерживают :focus-visible с 2021 года, поэтому его можно использовать без полифилов, оставив простой fallback для устаревших версий.

Итог: применяйте :focus-visible вместо :focus для стилизации индикатора фокуса — это улучшает доступность для клавиатурных пользователей и сохраняет чистый вид интерфейса при работе мышью.