Как правильно реализовать модальное окно?

Middle
313 просмотров
AFK Offer AI

HTML:

элемент — нативная модалка с backdrop, Escape закрытие, focus trap. dialog.showModal() — модальный режим. Или кастомная: Portal (createPortal в React) для рендера вне DOM-дерева. Focus trap — табуляция не выходит за пределы модалки. aria-modal="true", role="dialog", aria-labelledby. Scroll lock на body: overflow: hidden. Click на backdrop закрывает. Escape закрывает. Восстановление фокуса на элементе, который открыл модалку. Анимация через CSS transitions.

Следующий вопрос

Как работает type inference в TypeScript?