Атрибуты drag-and-drop

Библиотека Aria-query предоставляет инструменты для работы с ARIA-ролями, их свойствами и состояниями в контексте веб-разработки. Она используется в основном для анализа и валидации ARIA-атрибутов, особенно при построении доступных интерфейсов. Основные экспорты библиотеки включают объекты roles и elementRoles, которые содержат детализированные сведения о ролях и допустимых атрибутах HTML-элементов.

  • roles — карта всех ARIA-ролей, где каждая роль описана набором поддерживаемых свойств и состояний.
  • elementRoles — отображение HTML-элементов на роли, которые они могут выполнять, включая наследование атрибутов.

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

Роли и атрибуты drag-and-drop

ARIA определяет специальную группу атрибутов для поддержки drag-and-drop взаимодействий. Они позволяют обозначать, какие элементы можно перетаскивать, куда их можно помещать, а также следить за состоянием перетаскивания.

Основные атрибуты

  1. aria-grabbed

    • Тип: true | false | undefined

    • Применяется к элементам, которые могут быть перетащены.

    • Указывает текущее состояние: захвачен элемент (true) или нет (false).

    • Пример:

      Элемент 1

  2. aria-dropeffect (устаревший в последних спецификациях, но поддерживается в некоторых библиотеках)

    • Тип: copy | move | link | execute | popup | none

    • Определяет ожидаемый эффект при отпускании элемента в целевой контейнер.

    • Применяется к элементу-контейнеру.

    • Пример:

  3. aria-owns

    • Тип: строка с id элементов

    • Используется для управления логической структурой документа при drag-and-drop, чтобы корректно отслеживать порядок элементов, даже если DOM меняется.

    • Пример:

    Связь ролей с drag-and-drop

    В Aria-query роли для drag-and-drop относятся к интерактивным компонентам: list, listitem, option, treeitem, gridcell. Эти роли имеют набор поддерживаемых атрибутов:

    • list: может содержать listitem, поддерживает aria-owns для управления порядком.
    • listitem: может быть перетаскиваемым (aria-grabbed), взаимодействует с list или tree.
    • tree / treeitem: поддерживает сложные иерархические drag-and-drop сценарии.
    • grid / gridcell: позволяет реализовать перетаскивание ячеек таблицы с сохранением семантики.

    Использование Aria-query позволяет программно проверять, какие атрибуты допустимы для выбранной роли, предотвращая ошибки при динамическом изменении DOM.

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

    Библиотека экспортирует объект roles, который можно использовать для получения списка всех поддерживаемых атрибутов:

    import { roles } from 'aria-query';

const listitemRole = roles.get('listitem');
console.log(listitemRole.attributes); 
// { 'aria-grabbed': [true, false], ... }

    Аналогично, elementRoles позволяет проверить, какие роли допустимы для конкретного HTML-тега:

    import { elementRoles } from 'aria-query';

const divRoles = elementRoles.get('div');
console.log(divRoles); 
// Set { 'listitem', 'option', ... }

    Эта проверка особенно важна при построении drag-and-drop интерфейсов, где один и тот же элемент может динамически менять роль или состояние.

    Практические рекомендации

    1. Поддержка состояния перетаскивания: всегда использовать aria-grabbed, чтобы скринридеры могли корректно отслеживать состояние.
    2. Логическая структура: aria-owns помогает сохранить порядок элементов, даже если DOM перестраивается после перемещения.
    3. Валидация ролей: перед назначением aria-grabbed или других drag-and-drop атрибутов проверять, поддерживает ли выбранная роль эти атрибуты через Aria-query.
    4. Комбинация с событиями: ARIA-атрибуты не управляют самим перетаскиванием, они описывают состояние; для реализации drag-and-drop используются события dragstart, dragover, drop и соответствующая логика JavaScript.

    Поддержка динамических интерфейсов

    Aria-query облегчает создание адаптивных drag-and-drop компонентов, когда элементы могут менять роли или атрибуты в реальном времени. Используя библиотеку, можно:

    • Получать допустимые атрибуты для каждой роли и автоматически их назначать.
    • Проверять корректность комбинаций ролей и атрибутов.
    • Создавать утилиты для генерации ARIA-меток при изменении состояния перетаскивания.

    Пример динамического обновления атрибутов:

    function toggleGrabbed(element) {
  const grabbed = element.getAttribute('aria-grabbed') === 'true';
  element.setAttribute('aria-grabbed', String(!grabbed));
}

    Использование Aria-query позволяет убедиться, что aria-grabbed применим к роли элемента, прежде чем обновлять атрибут.

    Оглавление