useFocusVisible
Хук для управления визуальным отображением фокуса при навигации с клавиатуры. Позволяет показывать стили фокуса только при клавиатурном вводе, улучшая пользовательский опыт и доступность.
Обязательные условия
Возвращаемое значение
Объект со свойствами:
| Свойство | Тип | Описание |
|---|---|---|
focusVisible | boolean | Флаг видимости фокуса (true только при клавиатурной навигации) |
onFocus | (event: FocusEvent) => void | Обработчик события фокуса |
onBlur | (event: FocusEvent) => void | Обработчик события потери фокуса |
Пример использования
const AccessibleButton = () => {
const { focusVisible, onFocus, onBlur } = useFocusVisible();
return (
<button
onFocus={onFocus}
onBlur={onBlur}
style={{
outline: focusVisible ? '2px solid #2D81E0' : 'none',
transition: 'outline 0.15s ease-in',
}}
>
Кнопка с умным фокусом
</button>
);
};
// Убедитесь, что всё приложение обёрнуто в AppRoot
const App = () => (
<AppRoot>
<AccessibleButton />
</AppRoot>
);Особенности работы
-
Умное определение источника фокуса
Стили фокуса активируются только при навигации с помощью
Tab/Shift+Tabи использовании клавиатурных стрелок. -
Игнорирование использование мыши
При клике мышью фокус-стили не отображаются.
Рекомендации
Используйте для:
- Кастомных элементов управления (кнопки, ссылки, поля ввода).
- Компонентов с собственной логикой фокуса.
- Доступных интерфейсов (
a11y). - Сочетайте с CSS-переходами для плавного появления фокуса.