Управление фокусом

Chakra UI предоставляет удобные инструменты для управления фокусом элементов в приложении на React, упрощая реализацию доступности (accessibility) и улучшая UX за счет предсказуемого поведения клавиатурной навигации. Фокусировка в Chakra UI реализуется с помощью комбинации пропсов, хуков и готовых компонентов.

Пропсы для управления фокусом

  1. isFocusable Позволяет сделать элемент фокусируемым даже если он обычно не интерактивен. Например, контейнер <Box> может быть кликабельным и получать фокус:
<Box tabIndex={0} isFocusable bg="gray.100" p={4}>
  Фокусируемый контейнер
</Box>
  1. tabIndex Обычный HTML-пропс для управления порядком фокусировки через клавишу Tab. Chakra UI сохраняет привычную работу, но рекомендуется использовать совместно с isFocusable для нестандартных элементов.

Управление фокусом через хук useFocusEffect

useFocusEffect позволяет выполнять действия при получении или потере фокуса:

import { useFocusEffect } from "@chakra-ui/react";

function InputWithFocusLogger() {
  useFocusEffect({
    onFocus: () => console.log("Элемент получил фокус"),
    onBlur: () => console.log("Элемент потерял фокус"),
  });

  return <Input placeholder="Введите текст" />;
}

Ключевой момент: это полезно для реализации кастомной логики, например, открытия модальных окон или подсказок при фокусе.

Управление фокусом в модальных компонентах

Chakra UI автоматически управляет фокусом внутри компонентов Modal, Drawer и Popover, что делает их доступными для клавиатурной навигации.

  • Фокусировка первого интерактивного элемента при открытии: В Modal первый <Input> или кнопка с autoFocus получает фокус автоматически.
<Modal isOpen={isOpen} onCl ose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Форма</ModalHeader>
    <ModalBody>
      <Input placeholder="Ваше имя" autoFocus />
    </ModalBody>
    <ModalFooter>
      <Button onCl ick={onClose}>Закрыть</Button>
    </ModalFooter>
  </ModalContent>
</Modal>
  • Возврат фокуса на предыдущий элемент после закрытия: После закрытия модального окна фокус возвращается на элемент, с которого оно было открыто. Это реализовано автоматически и улучшает доступность.

Хуки useFocusOnShow и useFocusTrap

  1. useFocusOnShow Автоматически перемещает фокус на элемент при его появлении в DOM, что полезно для динамических панелей или всплывающих элементов.
import { useFocusOnShow } from "@chakra-ui/react";

const panelRef = React.useRef();
useFocusOnShow(panelRef, { visible: isOpen });

<Box ref={panelRef} hidden={!isOpen}>
  Панель с фокусом при появлении
</Box>
  1. useFocusTrap Ограничивает фокус внутри определенного контейнера, что критично для модальных окон и меню:
import { useFocusTrap } from "@chakra-ui/react";

const trapRef = React.useRef();
useFocusTrap(trapRef, true);

<Box ref={trapRef}>
  <Input placeholder="Фокус внутри трапа" />
  <Button>Кнопка</Button>
</Box>

Фокус не выходит за пределы контейнера, пока активен трап, предотвращая потерю клавиатурной навигации.

Кастомизация визуального фокуса

Chakra UI использует систему focusVisible, чтобы отличать фокус, вызванный клавиатурой, от клика мыши.

  • Пропс _focus позволяет задавать стили для активного фокуса:
<Button
  _focus={{ boxShadow: "0 0 0 3px rgba(66, 153, 225, 0.6)" }}
>
  Кнопка с кастомным фокусом
</Button>
  • Пропс _focusVisible используется для стилей, применяемых только при навигации клавиатурой:
<Button
  _focusVisible={{ borderColor: "blue.500" }}
>
  Только клавиатурный фокус
</Button>

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

Программное управление фокусом через ref

Любой компонент Chakra UI, поддерживающий ref, можно сфокусировать программно:

const inputRef = React.useRef();

<Button onCl ick={() => inputRef.current.focus()}>
  Фокус на поле ввода
</Button>

<Input ref={inputRef} placeholder="Поле для фокуса" />

Такое управление полезно для реализации пошаговых форм, подсказок и автоматической фокусировки при определенных событиях.

Сводка по ключевым инструментам

Инструмент Назначение
isFocusable Делает нестандартный элемент фокусируемым
tabIndex Порядок навигации клавиатурой
useFocusEffect Реакция на получение/потерю фокуса
autoFocus Автоматический фокус на элемент при рендере
useFocusOnShow Фокус при появлении элемента
useFocusTrap Ограничение фокуса внутри контейнера
_focus Стилизация фокуса
_focusVisible Стилизация видимого клавиатурного фокуса
ref.focus() Программная установка фокуса

Эти инструменты обеспечивают полное управление фокусом и позволяют создавать доступные, удобные и предсказуемые интерфейсы в Chakra UI.

Оглавление