Focus management

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

Фокус и его роль

Фокус определяет элемент, который в данный момент готов к взаимодействию с клавиатурой. В контексте Isotope, фокус может быть применён к отдельным элементам сетки, что особенно важно при динамической фильтрации и сортировке, когда DOM элементы добавляются или удаляются.

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

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

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

При использовании метода filter изменяется видимость элементов. Для корректного фокусирования необходимо:

  1. Сохранение текущего элемента с фокусом.
  2. Проверка, остаётся ли этот элемент видимым после фильтрации.
  3. Если элемент скрыт, перенос фокуса на первый видимый элемент новой выборки.

Пример кода для безопасного переназначения фокуса:

const iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

function filterAndFocus(filterSelector) {
  const focusedElement = document.activeElement;
  iso.arrange({ filter: filterSelector });
  
  const visibleItems = iso.filteredItems.map(item => item.element);
  
  if (!visibleItems.includes(focusedElement)) {
    visibleItems[0].focus();
  }
}

В этом примере после фильтрации проверяется, находится ли элемент с текущим фокусом среди видимых элементов. Если нет, фокус автоматически устанавливается на первый элемент.

Навигация клавиатурой

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

  • Стрелка влево/вправо перемещает фокус по горизонтали.
  • Стрелка вверх/вниз перемещает фокус по вертикали.
  • Элементы с tabindex="-1" исключаются из стандартного цикла табуляции, но могут получать фокус программно.

Пример обработки клавиш для сетки Isotope:

document.querySelector('.grid').addEventListener('keydown', (e) => {
  const current = document.activeElement;
  const items = Array.from(document.querySelectorAll('.grid-item'));
  const index = items.indexOf(current);

  if (e.key === "ArrowRight") {
    const next = items[index + 1] || items[0];
    next.focus();
  }
  if (e.key === "ArrowLeft") {
    const prev = items[index - 1] || items[items.length - 1];
    prev.focus();
  }
});

Этот подход обеспечивает интуитивное перемещение фокуса, даже если элементы динамически скрываются или добавляются.

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

Сортировка элементов через метод sortBy также меняет порядок DOM. Важно:

  • Определить элемент с фокусом до сортировки.
  • После перестройки DOM вернуть фокус на тот же элемент, если он существует.
  • Если текущий элемент исчезает, выбрать ближайший соседний элемент для фокусирования.

Пример:

const focusedElement = document.activeElement;
iso.arrange({ sortBy: 'name' });
const sortedItems = iso.items.map(item => item.element);

if (sortedItems.includes(focusedElement)) {
  focusedElement.focus();
} else {
  sortedItems[0].focus();
}

Фокус и динамическое добавление элементов

При добавлении новых элементов через append или insert следует учитывать:

  • Новые элементы могут потребовать установки tabindex="0" для возможности фокусирования.
  • После добавления элементов можно сразу установить фокус на первый добавленный элемент для улучшения UX.
const newItems = iso.appended(newElements);
newItems[0].element.setAttribute('tabindex', '0');
newItems[0].element.focus();

Рекомендации по доступности

  • Все интерактивные элементы сетки должны быть доступными через клавиатуру.
  • Использовать aria-live или другие ARIA атрибуты для уведомления о динамических изменениях контента.
  • При фильтрации или сортировке всегда переносить фокус на существующие видимые элементы для предотвращения “потерянного” фокуса.

Оптимизация и производительность

  • Избегать частого программного переназначения фокуса при больших сетках.
  • Минимизировать количество событий keydown на уровне документа, использовать делегирование на контейнер сетки.
  • При множественных операциях фильтрации и сортировки использовать методы Isotope layout и updateSortData для минимизации изменений DOM и сокращения лишнего перерисовывания.

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

Оглавление