useFocusVisible
Хук для управления визуальным отображением фокуса при навигации с клавиатуры. Позволяет показывать стили фокуса только при клавиатурном вводе, улучшая пользовательский опыт и доступность.
API
Возвращаемое значение
Объект со свойствами:
| Свойство | Тип | Описание |
|---|---|---|
focusVisible | boolean | Флаг видимости фокуса (true только при клавиатурной навигации) |
onFocus | (event: FocusEvent) => void | Обработчик события фокуса |
onBlur | (event: FocusEvent) => void | Обработчик события потери фокуса |
Особенности работы
-
Умное определение источника фокуса
Стили фокуса активируются только при навигации с помощью
Tab/Shift+Tabи использовании клавиатурных стрелок. -
Игнорирование использование мыши
При клике мышью фокус-стили не отображаются.
Рекомендации
Используйте для:
- Кастомных элементов управления (кнопки, ссылки, поля ввода).
- Компонентов с собственной логикой фокуса.
- Доступных интерфейсов (
a11y). - Сочетайте с CSS-переходами для плавного появления фокуса.