Расскажи про псевдокласс focus-visible — один ли это фокус или их несколько видов?

В CSS существует несколько псевдоклассов, связанных с фокусом, и они решают разные задачи. Важно не путать их, потому что от этого зависит и доступность, и внешний вид интерфейса.

Основные виды

• :focus — срабатывает при любом способе получения фокуса: клик мышью, Tab с клавиатуры, вызов element.focus() из JS.
• :focus-visible — срабатывает, когда браузер решает, что индикатор фокуса уместен. Обычно это клавиатурная навигация, но не клик мышью по кнопке.
• :focus-within — применяется к элементу-контейнеру, если фокус находится на нём самом или на любом его потомке.

Пример

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

/* Подсветка всей формы, когда фокус внутри неё */
.form:focus-within {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26,115,232,.2);
}

/* Убираем стандартный outline только там, где он не нужен */
button:focus:not(:focus-visible) {
  outline: none;
}

Зачем это нужно

Раньше разработчики часто писали outline: none для :focus, чтобы убрать «некрасивую» рамку после клика мышью. Это ломало доступность: пользователи клавиатуры теряли ориентацию. :focus-visible решает проблему — рамка остаётся для клавиатуры и исчезает для мыши.

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

Итог: применяйте :focus-visible для стилизации индикатора фокуса, :focus-within — для подсветки контейнеров, а :focus — когда нужен любой фокус без исключений.