Навигация с клавиатуры

Chakra UI предоставляет встроенные механизмы для организации удобной и доступной навигации с клавиатуры, что особенно важно для пользователей с ограниченными возможностями и для улучшения UX в веб-приложениях. Поддержка клавиатуры реализована на уровне компонентов и позволяет использовать Tab, Shift+Tab, Enter, Space, стрелки и другие клавиши для взаимодействия с элементами интерфейса.

Фокусировка элементов

В Chakra UI большинство интерактивных компонентов автоматически поддерживают фокусировку. Компоненты, такие как Button, Input, Checkbox, Switch, Select, Link и Menu, получают outline при фокусе. Используется стандартный CSS-селектор :focus, а Chakra добавляет собственные стили через проп focusBorderColor для компонентов форм:

<Input placeholder="Введите текст" focusBorderColor="teal.500" />

Особенности:

  • Использование tabIndex для управления порядком фокуса. Элемент с tabIndex={0} включается в естественный порядок табуляции, tabIndex={-1} исключает элемент из порядка.

    <Box tabIndex={0}>Фокусируемый блок</Box>

  • Управление фокусом программно с помощью useRef и метода focus().

    const inputRef = useRef(null);

<Button onCl ick={() => inputRef.current.focus()}>Фокус на инпут</Button>
<Input ref={inputRef} />

Обработка клавиш

Chakra UI предоставляет хуки и пропсы для обработки событий клавиатуры. Наиболее универсальный способ — использовать onKeyDown:

<Input
  placeholder="Нажмите Enter"
  onKeyD own={(e) => {
    if (e.key === 'Enter') {
      console.log('Enter нажата');
    }
  }}
/>

Для сложных компонентов, таких как меню, вкладки или аккордеоны, Chakra реализует управление стрелками Arrow Up/Down, Arrow Left/Right для навигации между элементами:

  • Menu – стрелки для перемещения между пунктами, Enter/Space для выбора.
  • Tabs – стрелки переключают вкладки, фокус автоматически переносится на активную.
  • Accordion – стрелки перемещают фокус по заголовкам, Enter/Space раскрывают секцию.

Пример меню с навигацией:

<Menu>
  <MenuButton as={Button}>Меню</MenuButton>
  <MenuList>
    <MenuItem>Пункт 1</MenuItem>
    <MenuItem>Пункт 2</MenuItem>
    <MenuItem>Пункт 3</MenuItem>
  </MenuList>
</Menu>

При использовании клавиатуры можно перемещаться по пунктам через стрелки и активировать выбранный через Enter.

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

Chakra UI автоматически применяет focus trap для компонентов Modal и Drawer. Это означает, что при открытии модального окна фокус будет удерживаться внутри него, а клавиша Tab циклически перемещает фокус по интерактивным элементам внутри модалки. Закрытие модалки возвращает фокус на элемент, с которого она была открыта.

Пример модального окна:

<Modal isOpen={isOpen} onCl ose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Заголовок</ModalHeader>
    <ModalBody>
      <Input placeholder="Имя" />
      <Button mt={4} onCl ick={onClose}>Закрыть</Button>
    </ModalBody>
  </ModalContent>
</Modal>

Особенности:

  • initialFocusRef позволяет задать элемент, который будет сфокусирован при открытии.
  • finalFocusRef задает элемент, на который вернется фокус после закрытия.
<Modal isOpen={isOpen} onCl ose={onClose} initialFocusRef={inputRef}>

Горячие клавиши и кастомные события

Для расширенного управления клавиатурой можно использовать useShortcut или onKeyDown в сочетании с useEffect. Пример горячей клавиши для открытия меню:

useEffect(() => {
  const handleKeyDown = (e) => {
    if (e.ctrlKey && e.key === 'm') {
      openMenu();
    }
  };
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

Доступность и стандарты WAI-ARIA

Chakra UI активно следует спецификациям WAI-ARIA, что позволяет создавать полностью доступные интерфейсы:

  • Автоматическая генерация атрибутов aria-expanded, aria-selected, role для меню, вкладок и аккордеонов.
  • Поддержка aria-label, aria-labelledby, aria-describedby для всех интерактивных компонентов.
  • Сочетание с навигацией клавиатурой обеспечивает соответствие стандартам WCAG.

Пример аккордеона с правильными ARIA-атрибутами:

<Accordion allowMultiple>
  <AccordionItem>
    <h2>
      <AccordionButton>
        <Box flex="1" textAlign="left">Секция 1</Box>
      </AccordionButton>
    </h2>
    <AccordionPanel pb={4}>Контент секции 1</AccordionPanel>
  </AccordionItem>
</Accordion>

Ключевые рекомендации

  • Всегда использовать интерактивные компоненты Chakra для автоматической поддержки клавиатуры.
  • Для нестандартных элементов задавать tabIndex и обработчики клавиш вручную.
  • Использовать хуки useRef и focus() для программной фокусировки.
  • В модальных окнах и Drawer обязательно задавать initialFocusRef и finalFocusRef для предсказуемого поведения.
  • Проверять доступность с помощью клавиатуры и инструментов типа Chrome DevTools Accessibility или Lighthouse.

Навигация с клавиатуры в Chakra UI строится на сочетании встроенных механизмов фокуса, обработки клавиш и поддержки ARIA, что делает интерфейсы одновременно удобными для пользователя и полностью соответствующими стандартам доступности.

Оглавление