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

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

Ключевым элементом для реализации клавиатурной навигации является свойство keyboard у компонентов, таких как n-menu, n-select или n-table. Оно отвечает за включение или отключение обработки клавиш стрелок, Enter и Escape для управления элементами интерфейса.

import { NMenu } from 'naive-ui'

<NMenu
  :options="menuOptions"
  keyboard
/>

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

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

Naive UI применяет концепцию tabindex и виртуальной фокусировки. Компоненты автоматически управляют фокусом при открытии всплывающих элементов, таких как NDropdown или NDialog. Для кастомных элементов можно использовать директиву v-focus или tabindex вручную:

<template>
  <button tabindex="0">Кнопка с фокусом</button>
</template>

При использовании компонентов, поддерживающих клавиатурное взаимодействие, не требуется вручную отслеживать фокус, достаточно включить соответствующее свойство keyboard.

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

Naive UI поддерживает следующие ключевые действия:

ArrowUp / ArrowDown – перемещение между элементами списка или меню.
ArrowLeft / ArrowRight – навигация по вложенным элементам, например в NMenu с подменю.
Enter – выбор текущего элемента.
Escape – закрытие всплывающего элемента или отмена действия.
Tab / Shift+Tab – переход между фокусируемыми элементами формы и интерфейса.

Для компонентов, таких как NInput или NTextarea, клавиши обрабатываются стандартным образом, а для сложных элементов типа NTable поддерживается навигация по строкам и ячейкам с помощью стрелок.

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

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

<NTable
  :columns="columns"
  :data="tableData"
  row-key="id"
  keyboard
/>

ArrowUp / ArrowDown перемещают фокус по строкам.
ArrowLeft / ArrowRight перемещают фокус по ячейкам.
Enter инициирует событие клика по активной ячейке.
Escape снимает выделение с текущей строки.

Дополнительно, можно использовать слоты body-cell и body-row для кастомной обработки событий клавиатуры.

Навигация в формах и селектах

Компоненты форм, такие как NSelect, NRadioGroup и NCheckboxGroup, имеют встроенную поддержку клавиатурной навигации. В NSelect:

ArrowUp / ArrowDown перемещают фокус по списку опций.
Enter выбирает текущую опцию.
Escape закрывает список.
Tab перемещает фокус на следующий элемент формы.

<NSelect
  v-model:value="selectedOption"
  :options="options"
  keyboard
/>

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

Всплывающие элементы и диалоги

В NDialog и NPopover фокус автоматически переносится на первый интерактивный элемент при открытии. Клавиши:

Escape закрывает окно.
Tab / Shift+Tab перемещает фокус внутри модального окна без выхода наружу (trapped focus).

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

Настройка кастомных обработчиков

Для сложных сценариев можно использовать событие on-keydown и метод focus:

<NMenu
  :options="menuOptions"
  keyboard
  @keydown="handleKeydown"
/>

<script>
function handleKeydown(e) {
  if (e.key === 'Enter') {
    console.log('Элемент выбран')
  }
}
</script>

Это позволяет расширить стандартное поведение компонентов без нарушения встроенной логики навигации.