react-accessible-modals

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.