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

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

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

Большинство компонентов Element Plus имеют встроенную поддержку фокуса и предоставляют пропсы для его настройки.

1. Пропс autofocus

Многие интерактивные компоненты, такие как <el-input>, <el-button> или <el-select>, поддерживают пропс autofocus. Он позволяет автоматически ставить фокус на компонент при рендере.

<el-input v-model="username" placeholder="Введите имя" autofocus></el-input>

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

  • Фокус устанавливается после полной отрисовки компонента.
  • Для динамически создаваемых компонентов требуется убедиться, что фокус назначается после их монтирования (nextTick в Vue).
import { nextTick } from 'vue';

nextTick(() => {
  usernameInput.focus();
});

2. Программное управление фокусом

Все компоненты Element Plus поддерживают стандартные DOM-методы, такие как .focus() и .blur(). Например:

<el-input ref="emailInput" v-model="email" placeholder="Email"></el-input>

<script setup>
import { ref, onMounted } from 'vue';
const emailInput = ref(null);

onMounted(() => {
  emailInput.value.focus();
});
</script>

Фокус внутри модальных окон

Компоненты <el-dialog> и <el-drawer> автоматически перехватывают фокус, когда открыты. Это обеспечивает правильное поведение клавиатурной навигации и предотвращает уход фокуса за пределы модального окна.

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

  • Проп modal блокирует взаимодействие с остальной страницей.
  • При открытии модального окна фокус автоматически перемещается на первый интерактивный элемент.
  • После закрытия модального окна фокус возвращается на элемент, который его вызвал.
<el-dialog :visible.sync="dialogVisible" title="Форма">
  <el-input v-model="formData.name" placeholder="Имя"></el-input>
</el-dialog>

Установка порядка табуляции (tabindex)

Для сложных интерфейсов важно управлять последовательностью фокусировки. Все компоненты Element Plus поддерживают стандартный HTML-атрибут tabindex.

<el-button tabindex="1">Первый</el-button>
<el-input tabindex="2" placeholder="Второй"></el-input>
<el-select tabindex="3" placeholder="Третий"></el-select>

Рекомендации:

  • Не использовать отрицательные значения tabindex для стандартных интерактивных элементов без необходимости.
  • Для модальных окон использовать tabindex="0" на контейнере для поддержки клавиатурного фокуса.

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

Element Plus предоставляет события, связанные с фокусом:

  • focus – срабатывает при получении фокуса.
  • blur – срабатывает при потере фокуса.
  • keydown и keyup – позволяют реализовать кастомные сценарии навигации.

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

<el-input
  v-model="search"
  placeholder="Поиск"
  @focus="onFocus"
  @blur="onBlur"
  @keydown.enter="submitSearch">
</el-input>

<script setup>
const onFo cus = () => console.log('Фокус на поле поиска');
const onB lur = () => console.log('Фокус ушел');
const submitSearch = () => console.log('Отправка поиска');
</script>

Управление фокусом в <el-select> и <el-dropdown>

Компоненты, содержащие выпадающие списки, имеют свои особенности:

  1. el-select

    • Фокус на поле ввода открывает список.
    • Использование стрелок вверх/вниз навигация по опциям.
    • Проп filterable позволяет фокусироваться на поле ввода для фильтрации опций.
<el-select v-model="value" filterable placeholder="Выберите опцию">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

  1. el-dropdown

    • Фокус можно перемещать с клавиатуры с помощью @command и стрелок.
    • Проп trigger="hover" сохраняет возможность фокусировки через клавиатуру при наведении.

Интеграция с Vue Composition API

С помощью Composition API можно создавать более гибкое управление фокусом для сложных сценариев:

import { ref, onMounted } from 'vue';

const activeInput = ref(null);

const setFocus = () => {
  if (activeInput.value) activeInput.value.focus();
};

onMounted(() => {
  setFocus();
});

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

  • Централизованное управление фокусом.
  • Возможность динамически переключать фокус между различными компонентами.

Фокус-менеджмент и доступность (a11y)

Правильное управление фокусом напрямую связано с доступностью интерфейса:

  • Все интерактивные элементы должны быть фокусируемыми через клавиатуру.
  • Модальные окна и выпадающие списки не должны позволять фокус покидать контейнер, пока они активны.
  • Использование атрибутов aria-* вместе с управлением фокусом улучшает совместимость с экранными читалками.

Пример для диалога:

<el-dialog
  :visible.sync="dialogVisible"
  title="Доступный диалог"
  aria-modal="true"
  role="dialog">
  <el-input placeholder="Введите текст"></el-input>
</el-dialog>

Фокус-менеджмент в Element Plus обеспечивает безопасное, доступное и предсказуемое взаимодействие с интерфейсом. Комбинация встроенных пропсов, событий и возможностей Composition API позволяет детально контролировать поведение фокуса в любых сценариях: модальные окна, формы, выпадающие списки и кастомные компоненты.

Оглавление