Горячие клавиши и комбинации

React Aria предоставляет мощный набор хуков для управления доступностью и взаимодействием с клавиатурой. Для обработки горячих клавиш и комбинаций ключевых событий используется пакет @react-aria/keyboard. Основной принцип — разделение логики управления клавиатурой и визуального отображения компонентов. Это позволяет создавать полностью доступные интерфейсы без необходимости вручную отслеживать фокус и события клавиш.

Ключевые хуки для работы с клавиатурой:

  • useKeyboard — обрабатывает отдельные нажатия клавиш и комбинации.
  • useKeyboardAction — позволяет сопоставить действия с определёнными комбинациями клавиш.
  • useHotkeys — настраивает глобальные сочетания клавиш для всего приложения или конкретного компонента.

Эти хуки возвращают объект свойств, который нужно передавать соответствующему элементу через props, обеспечивая правильную обработку событий keydown, keyup и предотвращение конфликтов с другими элементами страницы.

Хук useKeyboard и обработка событий

Хук useKeyboard принимает объект с параметрами:

import {useKeyboard} from '@react-aria/keyboard';

function MyComponent() {
  const {keyboardProps} = useKeyboard({
    onKeyDown: (e) => {
      if (e.key === 'Enter') {
        console.log('Enter нажата');
      }
    },
    onKeyUp: (e) => {
      console.log('Клавиша отпущена:', e.key);
    }
  });

  return 
Контент с обработкой клавиш
;
}

Особенности использования:

  • keyboardProps включает все необходимые обработчики событий.
  • Не нужно вручную добавлять event.preventDefault() для стандартных комбинаций — React Aria корректно управляет ими, если требуется.
  • Возможна интеграция с другими хуками, такими как useFocus и useButton, для обеспечения комплексной доступности.

Обработка комбинаций клавиш через useKeyboardAction

Для сложных комбинаций клавиш, например Ctrl + S или Shift + Enter, используется useKeyboardAction. Он позволяет определять действия, которые будут вызваны при конкретной комбинации:

import {useKeyboardAction} from '@react-aria/keyboard';

function SaveComponent() {
  const {keyboardActionProps} = useKeyboardAction({
    keyboardActions: {
      save: {
        key: 's',
        modifierKeys: ['ctrlKey'],
        onAction: () => console.log('Сохранение выполнено')
      },
      submit: {
        key: 'Enter',
        modifierKeys: ['shiftKey'],
        onAction: () => console.log('Отправка формы')
      }
    }
  });

  return 
Рабочая область
;
}

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

  • modifierKeys принимает массив строк: 'ctrlKey', 'shiftKey', 'altKey', 'metaKey'.
  • Каждое действие можно привязать к отдельной функции onAction.
  • Поддерживается предотвращение конфликтов при перекрывающихся комбинациях клавиш.

Глобальные горячие клавиши с useHotkeys

Для реактивного управления глобальными сочетаниями клавиш используют useHotkeys. Этот хук позволяет реагировать на клавиши даже если фокус находится вне компонента:

import {useHotkeys} from '@react-aria/keyboard';

function App() {
  useHotkeys({
    keys: 'mod+k',
    onKeyDown: () => console.log('Открытие панели поиска'),
  });

  return 
Главное приложение
;
}

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

  • mod автоматически переводится в Ctrl для Windows/Linux и Cmd для macOS.
  • Поддерживаются строковые обозначения комбинаций: 'mod+shift+p', 'alt+f', 'ctrl+enter'.
  • Можно отключать обработку через enabled: false или ограничивать действия конкретными элементами.

Управление приоритетами и предотвращение конфликтов

React Aria учитывает следующие принципы при обработке клавиатуры:

  1. Фокусированность элементов — события клавиш сначала обрабатываются активным элементом.
  2. Пропуск системных комбинаций — стандартные комбинации браузера не блокируются, если это не критично для компонента.
  3. Наследование событий — дочерние элементы могут расширять обработку событий родителя.

Пример:

 {
    if (e.key === 'ArrowDown') console.log('Стрелка вниз на родителе');
  }
}).keyboardProps}>
   {
      if (e.key === 'ArrowDown') console.log('Стрелка вниз на input');
    }
  }).keyboardProps} />

Здесь нажатие ArrowDown сначала обрабатывается в input, затем в родителе, если событие не было остановлено.

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

При работе с горячими клавишами важно учитывать рекомендации ARIA:

  • aria-keyshortcuts — атрибут для документирования доступных сочетаний клавиш.
  • Комбинации клавиш должны быть логичными и предсказуемыми для пользователей.
  • Не использовать одни и те же сочетания для разных действий на одной странице.

Пример добавления подсказки:

Это позволяет вспомогательным технологиям, таким как экранные читалки, оповещать пользователя о горячих клавишах.

Интеграция с другими хуками React Aria

React Aria строится на модульной архитектуре. Для удобной работы с горячими клавишами часто комбинируют:

  • useFocus — управление фокусом.
  • useButton — обработка событий кнопок.
  • useListKeyboard — навигация по спискам с клавиатуры.

Пример:

import {useFocus, useButton, useKeyboardAction} from '@react-aria/keyboard';

function AccessibleButton() {
  const {buttonProps} = useButton({onPress: () => console.log('Нажато')});
  const {focusProps} = useFocus();
  const {keyboardActionProps} = useKeyboardAction({
    keyboardActions: {
      activate: {key: 'Enter', onAction: () => console.log('Активировано')}
    }
  });

  return ;
}

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

Оглавление