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

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

В Vuetify ключевые элементы управления поддерживают фокусировку и обработку событий клавиш по умолчанию. Для большинства интерактивных компонентов используются стандартные клавиши: Tab для перемещения фокуса между элементами, Enter и Space для активации, а также стрелки (ArrowUp, ArrowDown, ArrowLeft, ArrowRight) для перемещения внутри вложенных элементов.

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

Фокусировка — это способность элемента получать активное состояние, которое можно использовать для взаимодействия с клавиатурой. В Vuetify компоненты, такие как v-btn, v-text-field, v-select, автоматически получают фокус при навигации через Tab. Для управления фокусом можно использовать следующие свойства и методы:

  • tabindex — определяет порядок перехода по элементам при нажатии Tab. Элемент с tabindex="0" включен в естественный порядок, отрицательное значение (-1) исключает его из последовательности.
  • Метод focus() — программно переводит фокус на компонент.

Пример:

<v-btn ref="button" @click="handleClick">Нажми меня</v-btn>

<script>
export default {
  methods: {
    handleClick() {
      this.$refs.button.focus();
    }
  }
}
</script>

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

Vuetify поддерживает события клавиш через стандартный синтаксис Vue, используя директиву @keydown или специализированные модификаторы:

<v-text-field
  label="Введите текст"
  @keydown.enter="submit"
  @keydown.arrow-up="moveUp"
  @keydown.arrow-down="moveDown"
/>
  • @keydown.enter — срабатывает при нажатии клавиши Enter.
  • @keydown.arrow-up / @keydown.arrow-down — обработка стрелок для навигации в списках или таблицах.

Для комплексных компонентов, таких как v-data-table, v-select или v-autocomplete, стрелки и Enter используются для выбора элементов без использования мыши.

Навигация внутри сложных компонентов

v-data-table

Компонент v-data-table поддерживает навигацию по строкам с клавиатуры:

  • ArrowUp и ArrowDown перемещают активный фокус между строками.
  • Enter или Space может использоваться для выбора строки.
  • Для многострочной таблицы с пагинацией и сортировкой важно учитывать, что фокус перемещается только по видимой странице.

Пример:

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  @keydown.up.prevent="focusPrevious"
  @keydown.down.prevent="focusNext"
/>

Методы focusPrevious и focusNext могут реализовывать логику фокусировки на соседних строках.

v-select и v-autocomplete

Эти компоненты позволяют пользователю:

  • Открывать список опций клавишей Enter или Space.
  • Перемещаться между опциями с помощью ArrowUp и ArrowDown.
  • Выбирать опцию клавишей Enter.

Важно использовать свойство open-on-keydown, чтобы обеспечить открытие выпадающего списка при вводе с клавиатуры.

Компоненты с кастомной навигацией

Для компонентов, где стандартная навигация Vuetify недостаточна, реализуется кастомная обработка клавиш с помощью директив @keydown и методов управления фокусом. Пример для кастомного меню:

<v-menu ref="menu" offset-y>
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props" @keydown.arrow-down="openMenu">Меню</v-btn>
  </template>
  <v-list>
    <v-list-item v-for="item in items" :key="item" @keydown.enter="selectItem(item)">
      <v-list-item-title>{{ item }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

Метод openMenu может переводить фокус на первый элемент списка, обеспечивая интуитивную навигацию.

Доступность и ARIA

Vuetify интегрирует ARIA-атрибуты в интерактивные компоненты для улучшения работы с клавиатурой и вспомогательными технологиями:

  • role="menu", role="listbox" — обозначают контейнеры с элементами для выбора.
  • aria-selected — отмечает выбранные элементы.
  • aria-expanded — используется для раскрывающихся компонентов, таких как v-menu или v-select.

Правильное использование ARIA гарантирует, что клавиатурная навигация будет работать корректно для всех пользователей.

Модификаторы событий клавиатуры

Vuetify поддерживает Vue-модификаторы для клавиатурных событий:

  • .enter, .esc, .tab — прямое соответствие клавишам.
  • .up, .down, .left, .right — стрелки.
  • .prevent и .stop — предотвращают стандартное поведение и всплытие события.

Пример использования:

<v-text-field
  @keydown.enter.prevent="submitForm"
  @keydown.esc.stop="closeDialog"
/>

Это обеспечивает точный контроль над поведением интерфейса при навигации с клавиатуры.

Заключение по ключевым моментам

  • Фокусировка и tabindex — основа навигации.
  • Стандартные события клавиш — Enter, Space, стрелки.
  • Компоненты с вложенной навигацией — v-data-table, v-select, v-menu.
  • ARIA и доступность — обязательны для корректной работы с клавиатурой.
  • Кастомная обработка клавиш — для сложных интерактивных элементов.

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

Оглавление