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

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

В библиотеке Ant Design элементы интерфейса по умолчанию поддерживают управление с клавиатуры через стандартные HTML-атрибуты tabIndex, onFocus, onBlur и обработчики событий клавиш. Это позволяет реализовать доступность (accessibility) и удобство работы без мыши. Любой компонент, который может получать фокус (кнопки, ссылки, поля ввода), автоматически участвует в цикле табуляции.

Ключевые моменты:

  • Tab — перемещает фокус между фокусируемыми элементами.
  • Shift + Tab — обратное перемещение по фокусируемым элементам.
  • Enter и Space — стандартные действия на кнопках и ссылках.
  • Arrow Keys — навигация внутри списков, меню, таблиц и каруселей.

Использование Menu и навигация стрелками

Компонент Menu Ant Design полностью поддерживает управление с клавиатуры. Основные правила:

  • Arrow Down / Arrow Up — перемещение по элементам меню.
  • Arrow Right / Arrow Left — открытие или закрытие вложенных подменю.
  • Enter / Space — активация выбранного пункта.
  • Esc — закрытие открытого подменю.

Пример кода:

import { Menu } from 'antd';
import { MailOutlined } from '@ant-design/icons';

const menuItems = [
  { label: 'Пункт 1', key: '1' },
  { label: 'Пункт 2', key: '2', children: [
      { label: 'Подпункт 2.1', key: '2-1' },
      { label: 'Подпункт 2.2', key: '2-2' },
    ] 
  },
  { label: 'Пункт 3', key: '3' },
];

const AppMenu = () => (
  <Menu mode="vertical" items={menuItems} />
);

В этом примере стрелки позволяют перемещаться между пунктами, а Enter активирует выбранный элемент. Для вертикального меню поддерживается фокусировка только одного элемента в один момент.

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

В компонентах форм (Form.Item, Input, Select, DatePicker) Ant Design реализует автоматическую фокусировку с клавиатуры.

  • Атрибут autoFocus позволяет сразу установить фокус на элемент при рендере.
  • Использование tabIndex позволяет управлять последовательностью фокусировки.
  • onKeyDown может быть использован для обработки специальных комбинаций клавиш, например, перехода на следующий элемент при нажатии Enter.

Пример:

import { Form, Input, Button } from 'antd';

const MyForm = () => (
  <Form layout="vertical">
    <Form.Item label="Имя">
      <Input placeholder="Введите имя" autoFocus />
    </Form.Item>
    <Form.Item label="Email">
      <Input placeholder="Введите email" />
    </Form.Item>
    <Form.Item>
      <Button type="primary">Отправить</Button>
    </Form.Item>
  </Form>
);

Здесь Tab перемещает фокус от первого поля к следующему и затем на кнопку.

Таблицы и управление стрелками

Компонент Table поддерживает навигацию по ячейкам с помощью стрелок, если используется расширенный режим с rowSelection или кастомными обработчиками событий. Основные рекомендации:

  • Использовать tabIndex={0} для ячеек, куда необходимо попасть с клавиатуры.
  • Обрабатывать события onKeyDown на таблице для кастомного поведения стрелок.
  • Поддерживать визуальный индикатор фокуса через стили :focus для выделения активной ячейки.

Пример обработки стрелок:

const handleKeyDown = (e, rowIndex, colIndex) => {
  switch (e.key) {
    case 'ArrowDown':
      // логика перемещения фокуса на следующую строку
      break;
    case 'ArrowUp':
      // логика перемещения фокуса на предыдущую строку
      break;
    case 'ArrowRight':
      // логика перемещения фокуса на следующую колонку
      break;
    case 'ArrowLeft':
      // логика перемещения фокуса на предыдущую колонку
      break;
    default:
      break;
  }
};

Модальные окна и клавиатура

Компонент Modal поддерживает закрытие с клавиатуры с помощью Esc. Также модальные окна блокируют фоновые элементы от фокусировки, обеспечивая trap focus — фокус остаётся внутри модального окна до его закрытия.

  • Атрибут keyboard={true} включает обработку клавиши Esc.
  • maskClosable={false} предотвращает закрытие по клику вне модального окна.
  • С помощью autoFocus можно устанавливать фокус на конкретный элемент внутри модалки.

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

Для полного соответствия WCAG важно использовать ARIA-атрибуты:

  • role="menu", role="menuitem" — для меню.
  • aria-expanded и aria-haspopup — для подменю.
  • aria-disabled — для неактивных элементов.
  • aria-selected — для выбора внутри списков и таблиц.

Ant Design уже включает большинство необходимых ARIA-атрибутов по умолчанию, но при кастомной реализации их необходимо добавлять вручную.

Комбинации клавиш и кастомные события

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

  • Переключение вкладок с помощью Ctrl + Arrow Left / Arrow Right.
  • Быстрый доступ к полям формы через комбинации Alt + цифра.
  • Реализация собственных шорткатов для сложных интерфейсов (таблицы, редакторы, панели инструментов).

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

Выводы по навигации с клавиатуры

Навигация с клавиатуры в Ant Design строится на основе стандартных HTML-событий и расширяется компонентами, которые имеют собственные обработчики стрелок, Enter, Space и Esc. Правильная организация фокусировки, использование tabIndex, autoFocus, ARIA-атрибутов и обработчиков onKeyDown позволяет создавать полностью доступные интерфейсы, где пользователь может работать без мыши, а сложные структуры меню, таблиц и форм остаются интуитивными и удобными.

Оглавление