Role атрибуты

В Popper.js управление поведением всплывающих элементов, таких как тултипы, поповеры и модальные окна, тесно связано с ARIA-атрибутами, среди которых ключевое место занимает атрибут role. Этот атрибут используется для обеспечения доступности (accessibility) и правильной семантики элементов в DOM.

Основные значения role для Popper.js

Popper.js не накладывает ограничения на конкретные значения role, однако чаще всего применяются следующие:

  1. tooltip Атрибут role="tooltip" используется для всплывающих подсказок. Важно, чтобы элемент с этим атрибутом был связан с целевым элементом через aria-describedby. Пример:
<button id="btn">Нажми меня</button>
<div id="tooltip" role="tooltip">
  Это всплывающая подсказка
</div>
import { createPopper } from '@popperjs/core';

const button = document.querySelector('#btn');
const tooltip = document.querySelector('#tooltip');

createPopper(button, tooltip, {
  placement: 'top',
});
button.setAttribute('aria-describedby', 'tooltip');

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

  • Элемент с role="tooltip" должен быть полностью скрыт до момента активации (display: none или visibility: hidden).
  • Popper.js обеспечивает динамическое позиционирование, но атрибут role отвечает именно за доступность.
  1. menu и menuitem Для контекстных меню или выпадающих списков часто используются role="menu" для контейнера и role="menuitem" для отдельных элементов:
<button id="menuBtn">Меню</button>
<ul id="menu" role="menu">
  <li role="menuitem">Элемент 1</li>
  <li role="menuitem">Элемент 2</li>
</ul>
createPopper(document.querySelector('#menuBtn'), document.querySelector('#menu'), {
  placement: 'bottom-start',
});

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

  • Контейнер с role="menu" должен управлять фокусом при открытии.
  • Попапы с меню требуют поддержки клавиатурной навигации (ArrowUp/ArrowDown, Enter, Escape), что реализуется отдельно от Popper.js.
  1. dialog Для модальных окон используется role="dialog". Это особенно важно при создании кастомных диалогов:
<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <h2 id="modalTitle">Заголовок окна</h2>
  <p>Содержимое модального окна</p>
</div>
createPopper(document.body, document.querySelector('#modal'), {
  placement: 'center',
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        boundary: 'viewport',
      },
    },
  ],
});

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

  • Атрибут aria-modal="true" указывает на модальное поведение.
  • Popper.js управляет позиционированием, но не управляет фокусом; это необходимо делать через JavaScript вручную.

Связь role с модификаторами Popper.js

Popper.js предоставляет систему модификаторов (modifiers), которые позволяют динамически адаптировать поведение всплывающих элементов. Некоторые модификаторы напрямую взаимодействуют с семантикой role:

  • offset – обеспечивает смещение всплывающего элемента, полезно для корректного отображения тултипов.
  • flip – автоматически меняет расположение элемента при недостатке места, не нарушая при этом доступности.
  • preventOverflow – гарантирует, что элемент с любым role не выйдет за пределы контейнера или viewport.

Пример модификаторов для тултипа:

createPopper(button, tooltip, {
  placement: 'top',
  modifiers: [
    { name: 'offset', options: { offset: [0, 8] } },
    { name: 'flip', options: { fallbackPlacements: ['bottom', 'right', 'left'] } },
    { name: 'preventOverflow', options: { padding: 8 } },
  ],
});

Динамическое управление role

В сложных интерфейсах один и тот же Popper элемент может менять назначение: иногда это тултип, иногда — меню или кастомный виджет. В таких случаях role необходимо изменять динамически:

function setRole(element, newRole) {
  element.setAttribute('role', newRole);
}

setRole(tooltip, 'menu'); // Меняем роль с tooltip на menu

Важно: при изменении role также нужно обновлять соответствующие ARIA-атрибуты (aria-describedby, aria-labelledby, aria-haspopup, aria-expanded), иначе доступность нарушается.

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

  • Всегда использовать role, соответствующий типу всплывающего элемента.
  • Не полагаться только на Popper.js для управления фокусом и клавиатурной навигацией.
  • Использовать role вместе с ARIA-атрибутами для полной доступности.
  • Проверять правильность работы role с помощью инструментов accessibility audit, таких как Lighthouse или axe.

Эффективное применение role атрибутов в сочетании с Popper.js позволяет создавать интерактивные, адаптивные и доступные интерфейсы, сохраняя семантическую чистоту HTML и обеспечивая корректное взаимодействие с вспомогательными технологиями.

Оглавление