Как должен вести себя Popup в разрезе доступности?

Как должен вести себя Popup в разрезе доступности?

Основные требования доступности для Popup

1. ARIA атрибуты

const Popup = ({ isOpen, onClose, title, children }) => (
  <div
    role="dialog"
    aria-modal="true"
    aria-labelledby="popup-title"
    aria-describedby="popup-desc"
  >
    <h2 id="popup-title">{title}</h2>
    <div id="popup-desc">{children}</div>
    <button onClick={onClose}>Close</button>
  </div>
);

2. Keyboard Navigation

• ESC закрывает popup
• TAB циклит через элементы внутри
• Фокус не выходит за границы popup

const handleKeyDown = (e) => {
  if (e.key === "Escape") onClose();
  
  // Focus trap для TAB
  if (e.key === "Tab") {
    const focusable = ref.current?.querySelectorAll(
      "button, input, textarea, select"
    );
    // Логика циклического перемещения фокуса
  }
};

3. Focus Management

• При открытии popup фокус переходит внутрь
• При закрытии фокус возвращается на кнопку открытия
• Focus должен быть виден (outline или border)

const firstFocusable = ref.current?.querySelector("button");
firstFocusable?.focus();

4. Правильная разметка

<div role="dialog" aria-modal="true">
  <h2 id="title">Title</h2>
  <p id="description">Description</p>
  <button>OK</button>
  <button>Cancel</button>
</div>

5. Backdrop

Бэкдроп не должен быть фокусируемым и должен быть невидим для скринридеров:

<div
  className="backdrop"
  onClick={onClose}
  role="presentation"
  aria-hidden="true"
/>

Использование Radix UI

Для production рекомендуется готовый компонент:

import * as Dialog from "@radix-ui/react-dialog";

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Title</Dialog.Title>
    <Dialog.Description>Description</Dialog.Description>
  </Dialog.Content>
</Dialog.Root>

Чеклист доступности

1. role="dialog" и aria-modal="true"
2. aria-labelledby на заголовок
3. aria-describedby на описание
4. ESC закрывает
5. Focus trapped внутри
6. TAB работает правильно
7. Backdrop невидим для экрана (aria-hidden)
8. Контрастность текста WCAG AA
9. Кнопки 44x44px минимум
10. Правильная структура заголовков

Основное правило

Popup должен быть полностью управляем с клавиатуры и видим для скринридеров.