Что такое псевдокласс `:focus-visible` и зачем он нужен?

Question

Accepted Answer

## Псевдокласс :focus-visible

`:focus-visible` совпадает, когда элемент в фокусе **и** браузер считает, что фокус стоит показать пользователю (обычно клавиатура / AT), а не после клика мышью.

```css
button:focus {
  /* старый подход: кольцо всегда */
}
button:focus-visible {
  outline: 2px solid #06c;
  outline-offset: 2px;
}
button:focus:not(:focus-visible) {
  outline: none;
}
```

Так убирают «навязчивый» outline у мышиных пользователей, **не ломая** видимый фокус для клавиатуры.

## Итог

`:focus-visible` — современная замена хакам вроде «убираем outline везде»; a11y и UX фокуса совместимы.