Accessible Modal

Basic Modal

Simple modal with title, content, and footer buttons

Sizes

Modal supports different sizes: small (400px), medium (600px), large (800px), fullscreen

Confirmation Dialogs

Modals for different types of actions (delete, save, warning)

With Form

Modal with focus trap works perfectly with forms

Scrollable Content

Modal with long content automatically adds a scrollbar

Usage

Basic HTML Structure:

<!-- Trigger button -->
<button data-modal-trigger="my-modal">Open Modal</button>

<!-- Modal -->
<div data-modal id="my-modal">
    <div data-modal-dialog>
        <div data-modal-header>
            <h2 data-modal-title>Title</h2>
            <button data-modal-close aria-label="Close">×</button>
        </div>

        <div data-modal-body>
            Modal content...
        </div>

        <div data-modal-footer>
            <button data-modal-close>Cancel</button>
            <button>Confirm</button>
        </div>
    </div>

    <div data-modal-backdrop></div>
</div>

JavaScript Initialization:

1. ES6 Module Import - init functions (Recommended)

import { initModals } from './a11y-kit/a11y-modal.js';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initModals();
});

2. ES6 Module Import - Bootstrap Style

import { Modal } from './a11y-kit/a11y-modal.js';

const modal = new Modal(element, {
    closeOnBackdrop: true,
    closeOnEscape: true,
    trapFocus: true,
    scrollLock: true,
    onOpen: (instance) => console.log('Opened'),
    onClose: (instance) => console.log('Closed')
});

3. NPM package (Module bundlers: Astro, Vite, Webpack)

npm install accessible-kit

// Import only what you need (best for tree-shaking)
import { initModals, Modal } from 'accessible-kit/modal';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initModals(); // Auto-init all modals

  // OR create instances manually
  const modal = new Modal(element, options);
});

Sizes:

<!-- Small (400px) -->
<div data-modal-dialog data-size="sm">...</div>

<!-- Medium (600px) - default -->
<div data-modal-dialog>...</div>

<!-- Large (800px) -->
<div data-modal-dialog data-size="lg">...</div>

<!-- Fullscreen -->
<div data-modal-dialog data-size="fullscreen">...</div>

Features

• ✅ Full ARIA attributes support (role="dialog", aria-modal="true")
• ✅ Focus trap - Tab cycles only through elements in modal
• ✅ Return focus - Returns focus to trigger after closing
• ✅ Scroll lock - Locks body scrolling
• ✅ Escape to close
• ✅ Backdrop click to close
• ✅ Multiple sizes (sm, md, lg, fullscreen)
• ✅ Configurable behavior
• ✅ Responsive design
• ✅ Dark mode support
• ✅ Reduced motion support