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

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

Подключение и настройка клавиатурного управления

Для начала необходимо подключить библиотеку:

import interact from 'interactjs';

Затем элементу назначается интерактивное поведение:

interact('.draggable')
  .draggable({
    listeners: {
      move(event) {
        const target = event.target;
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        target.style.transform = `translate(${x}px, ${y}px)`;
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    }
  });

Чтобы добавить клавиатурную навигацию, используется прослушка событий keydown. Основная идея: при нажатии клавиш стрелок менять координаты элемента на фиксированное смещение, аналогичное движению мышью.

const step = 10; // шаг перемещения в пикселях
const element = document.querySelector('.draggable');

element.tabIndex = 0; // делаем элемент фокусируемым

element.addEventListener('keydown', (event) => {
  let x = parseFloat(element.getAttribute('data-x')) || 0;
  let y = parseFloat(element.getAttribute('data-y')) || 0;

  switch (event.key) {
    case 'ArrowUp':
      y -= step;
      break;
    case 'ArrowDown':
      y += step;
      break;
    case 'ArrowLeft':
      x -= step;
      break;
    case 'ArrowRight':
      x += step;
      break;
  }

  element.style.transform = `translate(${x}px, ${y}px)`;
  element.setAttribute('data-x', x);
  element.setAttribute('data-y', y);
  event.preventDefault();
});

Использование модификаторов для клавиатурного управления

Interact.js поддерживает модификаторы, которые позволяют ограничивать перемещение элементов определёнными правилами: сетка, границы контейнера, инерция. Эти модификаторы можно применять и к клавиатурной навигации, синхронизируя шаг движения с сеткой или ограничивая область передвижения.

interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        targets: [interact.snappers.grid({ x: 50, y: 50 })],
        range: Infinity,
        relativePoints: [{ x: 0, y: 0 }]
      }),
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ]
  });

При такой конфигурации каждое нажатие стрелки будет перемещать элемент на 50 пикселей, соблюдая ограничения контейнера.

Комбинирование клавиатуры с мышью и сенсорными событиями

Interact.js позволяет объединять различные типы ввода. Клавиатура не конфликтует с перетаскиванием мышью или жестами на сенсорных устройствах. Основной принцип — синхронизация позиции элемента через data-x и data-y:

  • Перетаскивание мышью обновляет координаты.
  • Клавиши стрелок используют те же координаты для корректного смещения.
  • Модификаторы применяются одинаково для всех типов ввода.

Это позволяет создавать унифицированное управление элементами на странице.

Расширенные техники

  1. Настройка ускорения: можно реализовать нажатие и удержание клавиши для увеличения скорости перемещения. Для этого используется setInterval при событии keydown и очистка интервала на keyup.
  2. Комбинация с клавишами-модификаторами: Shift, Ctrl или Alt могут изменять шаг перемещения или переключать режимы перемещения.
  3. Поддержка доступности (ARIA): при использовании клавиатуры важно обновлять атрибуты aria-posinset, aria-setsize и роли элементов, чтобы технологии чтения с экрана корректно интерпретировали положение элементов.

Практические советы

  • Устанавливать tabIndex для интерактивных элементов, чтобы они могли получать фокус.
  • Синхронизировать координаты CSS и данных в атрибутах, чтобы избежать расхождения позиций при разных типах ввода.
  • Использовать модификаторы для создания предсказуемой сетки движения, особенно в интерфейсах типа дашбордов или канбан-досок.
  • Обрабатывать события preventDefault() для стрелок, чтобы избежать скролла страницы при перемещении элементов.

Клавиатурная навигация в Interact.js позволяет создавать доступные и гибкие интерфейсы, объединяя управление мышью, сенсорными устройствами и клавишами для полноценного интерактивного опыта.

Оглавление