Почему управление фокусом — это не мелочь
Большинство разработчиков, работая с React, сосредотачиваются на визуальной части интерфейса. Однако управление фокусом — ключевой аспект, особенно в контексте доступности (a11y), пользовательского опыта и даже производительности. Неправильное или отсутствующее управление фокусом может привести к тому, что пользователи с клавиатурой или скринридерами не смогут полноценно взаимодействовать с приложением.
По статистике WebAIM за 2023 год, более 60% пользователей с ограниченными возможностями используют клавиатуру как основной способ навигации. А это значит, что фокус должен быть не просто “где-то там”, а строго в нужной точке.
Базовые инструменты управления фокусом в React
React не предоставляет встроенного API для управления фокусом, но позволяет использовать стандартные DOM-методы через рефы. Это даёт гибкость, но требует аккуратности.
Пример: установка фокуса при монтировании компонента
```jsx
import { useEffect, useRef } from 'react';
function SearchInput() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current?.focus();
}, []);
return ;
}
```
В этом примере фокус устанавливается на поле ввода сразу после монтирования компонента. Это удобно, например, при открытии модального окна с поиском.
Кейс 1: Фокус после маршрутизации
В одном из проектов мы столкнулись с проблемой: при переходе между страницами фокус оставался на предыдущем элементе. Пользователи, использующие клавиатуру, терялись в навигации.
Решение — сбрасывать фокус на начало содержимого страницы после смены маршрута.
Технический подход
```jsx
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
function FocusReset() {
const mainRef = useRef(null);
const location = useLocation();
useEffect(() => {
mainRef.current?.focus();
}, [location]);
return (
{/* Контент страницы */}
);
}
```
Этот компонент устанавливает фокус на `
Кейс 2: Управление фокусом в модальных окнах
Модальные окна — частый источник проблем с фокусом. Если не ограничить фокус внутри модального окна, пользователь может случайно "выйти" за его пределы с помощью клавиши Tab.
Решение: ловушка фокуса (focus trap)
В одном из e-commerce проектов мы реализовали модальное окно корзины. Чтобы обеспечить корректную навигацию, мы использовали библиотеку `focus-trap-react`.
```jsx
import FocusTrap from 'focus-trap-react';
function CartModal({ onClose }) {
return (
Ваши товары
{/* Содержимое корзины */}
);
}
```
Результат: пользователи с клавиатурой могли перемещаться только внутри модального окна, пока оно открыто. Это улучшило UX и повысило соответствие WCAG 2.1 (уровень AA).
Кейс 3: Фокус при ошибках в формах
Ещё один распространённый сценарий — фокусировка на первом поле с ошибкой после отправки формы.
Реализация с валидацией и ref
```jsx
function ContactForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
const errors = {};
if (!e.target.name.value) {
errors.name = 'Введите имя';
}
if (!e.target.email.value.includes('@')) {
errors.email = 'Некорректный email';
}
if (errors.name) {
nameRef.current.focus();
} else if (errors.email) {
emailRef.current.focus();
}
// обработка ошибок
};
return (
);
}
```
Такой подход минимизирует фрустрацию пользователя: он сразу видит, где ошибка, и может её исправить, не тратя время на навигацию.
5 практических рекомендаций
1. Используйте `ref` и `focus()` аккуратно. Не вызывайте `focus()` без проверки, что элемент существует.
2. Добавляйте `tabIndex="-1"` на элементы, которые не фокусируются по умолчанию, но должны получать фокус программно.
3. Ограничивайте фокус в модальных окнах. Используйте `focus-trap` или реализуйте собственную ловушку.
4. Сохраняйте фокус при обновлениях. Например, при обновлении списка задач не сбрасывайте фокус на начало списка.
5. Проверяйте доступность с клавиатуры. Пройдитесь по приложению без мыши — это быстро выявит проблемы.
Заключение
Управление фокусом — это не просто техническая деталь, а важный элемент доступности и UX. В React вы получаете полный контроль над DOM, и с этим приходит ответственность. Применяя подходы из этой статьи, вы не только улучшите взаимодействие с приложением, но и сделаете его доступным для всех пользователей — независимо от способа ввода.
Пишите интерфейсы, которые "видят" и "чувствуют" каждый пользователь.
