Блог

Контекст

Я использую BlueprintJS для создания пользовательской таблицы данных с опережающими результатами, которые возвращаются в компоненте меню (например, Google Sheets с заголовками типов). Я хотел бы иметь возможность использовать клавиши со стрелками клавиатуры для навигации по этому меню. Я могу сфокусировать меню при нажатии клавиши со стрелкой. Затем, используя обработчик клавиатуры в меню, я отслеживаю индекс текущего выбранного элемента и выделяю его с помощью CSS, квази-фокусируя каждый пункт меню.

Вот пример того, с чем я работаю. Простой ввод с помощью меню

Проблема

Прежде всего, этот метод фактически не фокусирует элемент списка, что разрушает любую доступность. Во-вторых, используя этот метод, я не могу перемещаться между подменю, поскольку обработчик клавиш отслеживает только элементы верхнего уровня меню.

Потенциальная идея

Когда данные списка изменяются (поскольку это заголовок динамического типа), создайте объект ссылок и передайте его функции MyMenu, а также создайте умный обработчик нажатий клавиш, вызывая ref.current.focus() при каждом нажатии клавиши навигации. Это правильно сфокусировало бы элемент списка для доступности, но не уверен, что это правильный способ сделать это.

Вопрос

Каков был бы правильный способ справиться с этим? Есть ли другая структура компонентов, о которой я должен подумать?