React Accessible Modal

react-accessible-modals is a fully accessible modal component for React, compliant with AAA standards. It supports both TypeScript and JavaScript, allows custom styles, and includes a close-on-outside-click feature.

Features

• Accessibility: AAA standard compliance for screen readers and keyboard navigation.
• Close on outside click: Automatically closes when clicking outside the modal.
• Customizable: Supports custom styles and class names.
• TypeScript support: Fully typed for TypeScript users.
• Close button: Easily customizable close button with default behavior.

Installation

Install via npm:

npm install react-accessible-modals

Usage

import React, { useState } from "react";
import Modal from "react-accessible-modals";

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleClose = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>

      <Modal
        isOpen={isModalOpen}
        onClose={handleClose}
        modalTitle="Example Modal"
      >
        <h2 id="exampleModal">Hello, I am a modal!</h2>
        <p>This is an example of how to use the accessible modal.</p>
      </Modal>
    </div>
  );
};

export default App;

Props

| Prop | Type | Description | | ------------- | ----------------- | ------------------------------------------------------------- | | isOpen | boolean | Controls the visibility of the modal. | | onClose | () => void | Callback function triggered when the modal is closed. | | modalTitle | string | Accessible label for the modal's title. | | children | React.ReactNode | Content of the modal. | | className | string | Optional class name for custom styling. | | closeButton | React.ReactNode | Optional custom close button element (defaults to "×"). |

Example

<Modal
  isOpen={true}
  onClose={() => {}}
  modalTitle="Modal Title"
  closeButton={<span>Close</span>}
>
  <p>Modal content goes here!</p>
</Modal>

Accessibility

The modal ensures the following:

• Focus is trapped within the modal when open.
• Modal can be closed using the keyboard (ESC key).
• Semantic HTML with proper ARIA attributes for accessibility.

License

This project is licensed under the MIT License - see the LICENSE file for details.