Modal component

Introduction

The Modal component provides a dialog window that appears on top of the main content, using the native HTML <dialog> element for built-in accessibility features. It includes smooth transitions, focus management, and keyboard interactions.

When to use

Confirmation dialogs
Important notifications
Form submissions
Image galleries
Terms and conditions
Cookie consent notices
Any content requiring immediate user attention

Usage

---
import { Modal } from 'accessible-astro-components'
---

<button id="modal-trigger">Open Modal</button>

<Modal
  triggerId="modal-trigger"
  title="Welcome!"
>
  <p>This is the modal content.</p>
  <button onclick="closeModal()">Confirm action</button>
</Modal>

Props

Prop	Type	Default	Description
`triggerId`	`string`	required	ID of the button that triggers the modal
`title`	`string`	required	Title text for the modal header
`closeText`	`string`	`'Close'`	Text for the close button

Accessibility features

Uses native <dialog> element for built-in accessibility
Proper focus management
- Focus is trapped inside the modal
- Returns focus to trigger element on close
Keyboard support
- Close with Escape key
- Tab/Shift+Tab for navigation
ARIA attributes
- aria-labelledby connects trigger to modal
- aria-hidden manages content visibility
Smooth transitions that respect reduced-motion preferences
Semantic HTML structure

.modal {
  --translate-offset-y: 7.5vh;
  /* Customize modal appearance */
}

.modal {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  margin: auto;
  inline-size: min(80%, 450px);
}

.modal__inner {
  position: relative;
  padding: 2rem;
}

.modal__close {
  position: absolute;
  inset-inline-end: 1.5rem;
  inset-block-start: 1.5rem;
}