Клавиатурная навигация

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

Основные принципы клавиатурной навигации

  1. Фокус и управление им В Radix UI фокус управляется автоматически через компоненты, поддерживающие интерактивность, такие как Button, Checkbox, DropdownMenu, Dialog и другие. Каждый компонент корректно взаимодействует с системной моделью фокуса, обеспечивая правильную навигацию с клавиатуры.

  2. Tab и Shift+Tab Компоненты Radix UI используют стандартное поведение клавиши Tab для перемещения фокуса по интерактивным элементам. При необходимости компоненты поддерживают циклическую навигацию внутри своих границ (например, в модальных диалогах или меню).

    • Tab — переход к следующему интерактивному элементу.
    • Shift + Tab — возврат к предыдущему элементу.

  3. Стрелки навигации Многие компоненты, такие как Tabs, RadioGroup, Select или Menu, используют стрелочные клавиши для выбора или перемещения между элементами:

    • ArrowUp / ArrowDown — вертикальная навигация.
    • ArrowLeft / ArrowRight — горизонтальная навигация.

    Поведение стрелок определяется атрибутами orientation и loop:

    <Tabs.Root orientation="horizontal" loop>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Вкладка 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Вкладка 2</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Контент 1</Tabs.Content>
  <Tabs.Content value="tab2">Контент 2</Tabs.Content>
</Tabs.Root>

    В данном примере стрелочные клавиши будут циклически переключать фокус между вкладками.

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

Radix UI использует focus management, что позволяет перемещать фокус внутрь модальных компонентов или меню при их открытии.

  • Dialog: при открытии модального окна фокус автоматически переводится на первый фокусируемый элемент внутри. При закрытии фокус возвращается на элемент, вызвавший диалог.
  • DropdownMenu / ContextMenu: фокус перемещается на первый элемент меню при открытии. Поддерживаются клавиши Enter и Space для активации элементов меню, Escape — для закрытия.
<Dialog.Root>
  <Dialog.Trigger>Открыть диалог</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Заголовок</Dialog.Title>
    <Dialog.Description>Описание диалога</Dialog.Description>
    <input type="text" placeholder="Введите текст" />
    <Dialog.Close>Закрыть</Dialog.Close>
  </Dialog.Content>
</Dialog.Root>

В этом примере фокус при открытии диалога автоматически переходит на первый интерактивный элемент — поле ввода.

Атрибуты и пропсы для клавиатурной доступности

Radix UI предоставляет специальные пропсы для управления фокусом и клавиатурной навигацией:

  • autoFocus — автоматическое выставление фокуса на компонент при монтировании.
  • loop — зацикливание навигации внутри компонента (особенно полезно для меню и табов).
  • orientation — определяет направление навигации стрелками (horizontal или vertical).
  • disabled — исключение элемента из навигации.

Пример с циклическим меню:

<Menu.Root>
  <Menu.Trigger>Открыть меню</Menu.Trigger>
  <Menu.Content loop>
    <Menu.Item>Элемент 1</Menu.Item>
    <Menu.Item>Элемент 2</Menu.Item>
    <Menu.Item>Элемент 3</Menu.Item>
  </Menu.Content>
</Menu.Root>

Клавиши ArrowDown и ArrowUp будут циклически переключать фокус между элементами меню.

Обработка специальных клавиш

Radix UI учитывает стандартные сценарии взаимодействия:

  • Escape закрывает диалог, меню или всплывающий элемент.
  • Enter и Space активируют элементы управления.
  • Home и End перемещают фокус на первый или последний элемент списка.

Для компонентов RadioGroup и Tabs эти клавиши также поддерживают навигацию:

<RadioGroup.Root defaultValue="1">
  <RadioGroup.Item value="1">Опция 1</RadioGroup.Item>
  <RadioGroup.Item value="2">Опция 2</RadioGroup.Item>
  <RadioGroup.Item value="3">Опция 3</RadioGroup.Item>
</RadioGroup.Root>

Здесь ArrowRight и ArrowDown переключают выбор между опциями, ArrowLeft и ArrowUp — возвращают к предыдущей.

Рекомендации по использованию

  • Использовать стандартные Radix компоненты вместо самописных, чтобы не ломать встроенную клавиатурную навигацию.
  • Всегда проверять работу клавиш Tab, Arrow, Enter, Space и Escape для каждого компонента.
  • Для кастомных элементов использовать useFocusRing и useRovingFocus для корректной работы фокуса и визуального отображения состояния.
import { useRovingFocus } from '@radix-ui/react-roving-focus';

const items = ['Элемент 1', 'Элемент 2', 'Элемент 3'];
const roving = useRovingFocus({ loop: true });

return (
  <div role="list" {...roving.rootProps}>
    {items.map((item, i) => (
      <button key={i} {...roving.itemProps(i)}>
        {item}
      </button>
    ))}
  </div>
);

Этот подход обеспечивает доступную и предсказуемую навигацию, аналогичную нативным компонентам.

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

Оглавление