Фокус менеджмент

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

Управление фокусом через ref и методы компонентов

Каждый компонент Vuetify, поддерживающий интерактивность (v-btn, v-text-field, v-select и другие), имеет методы для установки и снятия фокуса.

Пример установки фокуса на текстовое поле:

<template>
  <v-text-field
    label="Имя"
    ref="nameInput"
  ></v-text-field>
  <v-btn @click="focusInput">Фокус на поле</v-btn>
</template>

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

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

  • Используется ref для получения ссылки на компонент.
  • Метод focus() доступен для большинства интерактивных компонентов Vuetify.
  • Позволяет программно управлять вниманием пользователя, например, при ошибках валидации.

Навигация по фокусу с помощью tabindex

tabindex управляет порядком перемещения фокуса по элементам при нажатии клавиши Tab. Vuetify позволяет задавать tabindex через пропсы для некоторых компонентов.

<v-btn :tabindex="1">Первый</v-btn>
<v-btn :tabindex="3">Третий</v-btn>
<v-btn :tabindex="2">Второй</v-btn>

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

  • Элементы с меньшим tabindex получают фокус раньше.
  • Значение 0 позволяет элементу участвовать в естественном порядке табуляции.
  • Значение -1 исключает элемент из последовательности табуляции, но позволяет программно устанавливать фокус.

Фокус при открытии диалогов и всплывающих меню

Компоненты v-dialog, v-menu и v-tooltip автоматически управляют фокусом при открытии. По умолчанию первый интерактивный элемент внутри диалога получает фокус, что улучшает навигацию с клавиатуры.

<v-dialog v-model="dialog" persistent>
  <template #activator="{ props }">
    <v-btn v-bind="props">Открыть диалог</v-btn>
  </template>
  <v-card>
    <v-card-title>Форма входа</v-card-title>
    <v-card-text>
      <v-text-field label="Email"></v-text-field>
      <v-text-field label="Пароль" type="password"></v-text-field>
    </v-card-text>
    <v-card-actions>
      <v-btn @click="dialog = false">Закрыть</v-btn>
      <v-btn color="primary">Войти</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

Примечания:

  • Проп persistent предотвращает закрытие диалога при нажатии вне него, сохраняя фокус внутри.
  • При открытии диалога фокус автоматически перемещается на первый v-text-field.
  • Для кастомного управления можно использовать v-focus директиву или методы focus().

Директива v-focus

Vuetify позволяет создавать кастомные директивы для управления фокусом. Например, можно сделать автоматический фокус при рендере элемента:

Vue.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

Использование:

<v-text-field v-focus label="Автофокус"></v-text-field>

Преимущества:

  • Автоматическая установка фокуса при монтировании компонента.
  • Удобно для форм и модальных окон.
  • Совместимо с любыми компонентами, поддерживающими стандартный DOM-фокус.

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

Компоненты v-data-table и v-list поддерживают программное управление фокусом для элементов внутри. Это важно при навигации с клавиатуры и для доступности.

<v-list>
  <v-list-item
    v-for="item in items"
    :key="item.id"
    :tabindex="0"
    @keydown.enter="selectItem(item)"
  >
    {{ item.name }}
  </v-list-item>
</v-list>

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

  • tabindex="0" делает элемент доступным для табуляции.
  • Можно использовать события клавиатуры (@keydown) для имитации выбора.
  • Обеспечивает логическую последовательность навигации внутри списков и таблиц.

Тонкая настройка фокус-цепочек

Для сложных форм и интерфейсов с множеством интерактивных компонентов рекомендуется использовать стратегию управления фокусом:

  1. Определить ключевые интерактивные элементы.
  2. Установить tabindex для управления последовательностью.
  3. Программно переводить фокус при ошибках или переходе между шагами.
  4. Использовать события @focus и @blur для отслеживания состояния фокуса.

Пример: пошаговая форма

<v-stepper v-model="step">
  <v-stepper-step :complete="step > 1" step="1">
    <v-text-field ref="field1" label="Имя"></v-text-field>
  </v-stepper-step>
  <v-stepper-step :complete="step > 2" step="2">
    <v-text-field ref="field2" label="Email"></v-text-field>
  </v-stepper-step>
  <v-btn @click="nextStep">Следующий шаг</v-btn>
</v-stepper>
methods: {
  nextStep() {
    this.step++;
    this.$nextTick(() => {
      if (this.step === 2) this.$refs.field2.focus();
    });
  }
}

Итоги ключевых подходов

  • ref и методы focus() для программного управления фокусом.
  • tabindex для контроля порядка навигации.
  • Автоматический фокус при открытии диалогов и всплывающих меню.
  • Директива v-focus для автофокуса при монтировании.
  • Обработка клавиатурных событий для списков, таблиц и сложных форм.
  • Стратегия пошагового управления фокусом для многоэтапных интерфейсов.

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

Оглавление