GrModal

Модальный слой без доступного имени — нарушение, которое диктор озвучивает как безымянный «диалог», а axe ловит правилом aria-dialog-name. Порядок такой:

1. есть #title (или заголовок GrDialog глубже по дереву) — имя даёт он через aria-labelledby;
2. нет #title, но есть ariaLabel — имя берётся из пропа;
3. нет ничего — подставляется обобщённое имя из локали (gr.modal.title), а в dev-сборке при первом открытии печатается предупреждение.

Третий пункт — страховка, а не режим работы: обобщённое «Диалог» лучше пустоты, но осмысленное имя знает только автор окна.

<GrModal v-model="open" aria-label="Импорт из CSV">
  <ImportWizard />
</GrModal>

size — от sm до xl меняет только максимальную ширину панели; поля вокруг окна и скругления остаются.

full — отдельный режим: панель занимает вьюпорт целиком, без полей оболочки и без скруглений. Это «во весь экран», а не «очень широко»: мастер импорта на мобильном должен занимать экран, а не оставлять рамку в четыре пикселя.

Панель окна — рамка и ничего больше: граница, фон, тень, радиус и обрезка по нему (panelBase в grModalStyles.ts). Слоты #title, #header, #footer и содержимое рендерятся как есть, без единого паддинга, поэтому голый GrModal выглядит «в край».

Отступы внутри панели пришлось бы отменять всякий раз, когда содержимое обязано доходить до края: изображение или карта во всю ширину, таблица со своей сеткой, тулбар, лента шагов с полосой на всю панель. Отмена делается отрицательными марджинами, и они разъезжаются с радиусом и с overflow-hidden панели. Обратная сторона — добавить поля тому, у кого их нет, — стоит один контейнер и ничего не ломает.

Поэтому поля, шапка и подвал живут этажом выше — в GrDialog: px-5 по горизонтали и py-3 / py-5 / py-4 для шапки, тела и подвала (dialogShared.ts), каждый настраивается через headerConfig / bodyConfig / footerConfig. Разделение то же, что у GrCard и его секций: механика в одном компоненте, ритм — в другом.

scrollBehavior:

• outside (по умолчанию) — скроллится весь оверлей, окно уезжает вверх вместе со страницей;
• inside — панель ограничена высотой вьюпорта, а скроллится только её тело. Слоты #title, #description, #header и #footer при этом остаются на месте: панель становится колонкой, и заголовок не уезжает вместе с содержимым.

Скролл всегда ровно в одном месте: два скроллбара на одно окно — это баг, а не запас прочности.

Закрепить свою шапку и свой подвал можно слотами #header и #footer: они лежат вне скроллящегося тела и при inside остаются на месте. Своей разметки примитив в них не добавляет — это пустые области раскладки, которыми пользуется GrDialog. Тело при inside попадает в таб-порядок: длинный текст без единого фокусируемого элемента иначе не прокрутить с клавиатуры.

Окно регистрируется в общем стеке слоёв (useOverlayLayer, modal: true). Стек гасит Escape в capture-фазе на window, поэтому:

• закрывается верхний слой, а не тот, что оказался ниже по документу: дропдаун, открытый внутри окна, по Esc закрывает себя, а следующий Esc — уже окно;
• до локальных обработчиков нажатие не доходит вовсе, поэтому closeOnEsc и closeOnBackdrop не пересекаются: первый про Esc, второй про клик.

Нижние открытые окна помечаются inert, чтобы ловушка фокуса нижнего не отбирала фокус у верхнего. Диалоги useDialogService монтируются отдельным render() в body и всё равно попадают в тот же стек — в этом его смысл.

Оттуда же берётся и высота: каждое открытое окно получает свой уровень внутри --gr-z-modal — calc(var(--gr-z-modal) + глубина). Иначе «верхнее» для отрисовки и «верхнее» для inert расходятся: порядок узлов в портале задаёт создание компонента, и статически объявленный диалог, открытый позже, оказывался бы под окном, оставаясь при этом единственным, кто отвечает на клики (см. ../z-index.md).

Пока окно открыто, остальное содержимое body тоже уходит в inert и aria-hidden: перекрытия мало, иначе Tab уводит на страницу под окном, а диктор читает её как обычную. Корни других слоёв (тосты, панель селекта, открытого изнутри окна) при этом не гасятся.

Ловушка фокуса — useFocusTrap (публичный композабл пакета): Tab ходит по кругу внутри окна, а утёкший фокус возвращается. Панели, открытые изнутри окна, телепортированы в body и лежат вне его поддерева — ловушка знает о них от стека слоёв и фокус у них не отбирает.

initialFocus задаёт элемент, получающий фокус при открытии. По умолчанию это сама панель (tabindex="-1"): диктор объявляет окно целиком, а первый Tab приводит в начало содержимого. Фокус, который поставило содержимое окна в тот же такт (GrConfirmDialog наводит на «Отмену», GrPromptDialog — на поле), ловушка не перебивает.

Закрывает только клик, начавшийся на подложке. Выделение текста, начатое в панели и отпущенное за её границей, окно не закрывает — иначе аккуратная работа с текстом внутри окна оборачивалась бы его потерей.

open(), close() и toggle() доступны через ref на компоненте — тот же состав, что у GrDropdown, GrDialog, GrCommandPalette и GrPopover.

<GrModal ref="modal" v-model="open" aria-label="Настройки">
…
</GrModal>

<script setup>
const modal = ref()
modal.value.open()
</script>

Окно управляемое, поэтому методы просят родителя: они эмитят update:modelValue, а состояние остаётся в его v-model. Без привязки модели вызов ничего не откроет — своего состояния у окна нет намеренно, иначе оно разошлось бы с источником правды.

opened и closed эмитятся после анимации. closed — единственный безопасный момент, чтобы размонтировать содержимое: сделать это по update:modelValue значит оборвать анимацию закрытия на полпути.