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

Продвинутые темы

Доступный popup (модалка/диалог) должен: перехватывать фокус внутри, закрываться по Escape, возвращать фокус на открывший элемент, иметь правильные ARIA-роли и блокировать фон.

Требования доступности popup

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

Перевод фокуса внутрь popup при открытии (на первый элемент или заголовок).
Фокус-ловушка (focus trap) — Tab циклится внутри popup, не уходит на фон.
Возврат фокуса на элемент, открывший popup, при закрытии.

Клавиатура

Escape — закрывает popup.
Tab / Shift+Tab — навигация внутри.

ARIA-роли и атрибуты

<div role="dialog" aria-modal="true" aria-labelledby="title">
  <h2 id="title">Заголовок</h2>
  ...
</div>

role="dialog" (или alertdialog).
aria-modal="true" — сообщает, что фон недоступен.
aria-labelledby / aria-label — название диалога.

Блокировка фона

Фон неинтерактивен (aria-hidden или inert на остальном контенте).
Скролл фона заблокирован.
Клик по оверлею закрывает (опционально).

Скринридеры

Popup объявляется как диалог, зачитывается заголовок.

Инструменты

Готовые доступные компоненты: Radix UI, React Aria, <dialog> (нативный элемент с частью поведения из коробки).

Коротко для собеседования

Доступный popup: переводит фокус внутрь при открытии, ловит его (focus trap, Tab циклится), возвращает на открывший элемент при закрытии; закрывается по Escape; имеет role="dialog", aria-modal="true", aria-labelledby; блокирует фон (inert/aria-hidden, скролл). Лучше использовать готовые (Radix, React Aria) или нативный <dialog>.