React plugin : react-custom-accessible-modal

A React responsive modal component that handles accessibility requirements :

• use of Escape key to close the modal
• traps focus inside the modal
• hides background content
• focus on whatever field you want when the modal is closed (optional)

You can also choose to apply your own custom style for the button, the icon and message

Features

React > v.18.2.0
Node.js > v.16.17.1

Install

Once you have set up your React app :

npm install react-custom-accessible-modal

Use

• Import the plugin in your React app :

  import { Modal } from "react-custom-accessible-modal";

• Set the state and variables in the component where the plugin is imported (e.g.):

  import { useState } from "react";

  const [showModal, setShowModal] = useState(false);

  const myIcon = <svgPath>;
  const myMessage = "Profile created successfully !";
  const myButtonText = "OK";
  const myAriaLabel = "OK, close modal";
  const closeModal = {() => setShowModal(false)};
  const myButtonStyle = { backgroundColor: "#0891b2" };
  const myIconStyle = { borderRadius: "30px" };
  const myMessageStyle = { fontSize: "45px" };

• Pass an event to open the modal in your component :

const openModal = (e) => {
    e.preventDefault();
    setShowModal(true);
  };

• Return the modal plugin in your JSX with conditional rendering :

{showModal && (
<Modal icon={myIcon} message={myMessage} buttonText={myButtonText} ariaLabel={myAriaLabel} closeModal={closeModal} buttonStyle={myButtonStyle} iconStyle={myIconStyle} messageStyle={myMessageStyle}
/>)}

Optional feature

Set focus on a specific element when the modal is closed :

• Set the useRef hook to target the element that will receive the focus in your component (e.g.) :

  import { useRef } from "react";

  const inputRef = useRef(null);

  <input ref={inputRef} />

• Replace the closeModal variable we have set up above by this one :

  const closeModal = () => {
    setShowModal(false);
    inputRef.current.focus();
  };

Props

| Parameter | Type | Description | | :------------- | :--------- | :--------------------------------------------------------------------------------------------------------- | | icon | object | icon must be in SVG format | | message | string | message confirming that the action was successfully performed | | buttonText | string | text displayed inside the button | | ariaLabel | string | label aiming to help users of assistive technologies, especially if buttonText value is not quite explicit | | closeModal | function | fired when the user clicks on the button | | buttonStyle | string | change the button styling by passing the properties directly to the prop | | iconStyle | string | change the icon styling by passing the properties directly to the prop | | messageStyle | string | change the message styling by passing the properties directly to the prop |

Demo

Here are 2 examples of how to use the plugin to give feedback to the user after a form submission.

• With focus : when the user gets back to the page, the focus is placed on a specific element

import React, { useState, useRef } from "react";
import { Modal } from "react-custom-accessible-modal";

export default function MyComponent() {
  //  Define state and variables
  const [showModal, setShowModal] = useState(false);

  const myIcon = <svgPath>;
  const myMessage = "Profile created successfully !";
  const myButtonText = "OK";
  const myAriaLabel = "OK, close modal";
  const myButtonStyle = { backgroundColor: "#0891b2" };
  const myIconStyle = { borderRadius: "30px" };
  const myMessageStyle = { fontSize: "45px" };
  const openModal = (e) => {
    e.preventDefault();
    setShowModal(true);
  };

  // Put focus on a specific element when modal is closed
  const inputRef = useRef(null);
  const closeModal = () => {
    setShowModal(false);
    inputRef.current.focus();
  };

  return (
    //Pass the onClick or onSubmit event that opens the modal
    <form onSubmit={openModal}>
      <input />
      <input ref={inputRef} />
      <button type="submit">Save</button>
      {/* The modal is conditionally rendered */}
      {showModal && (
        <Modal
          icon={myIcon}
          message={myMessage}
          buttonText={myButtonText}
          ariaLabel={myAriaLabel}
          closeModal={closeModal}
          buttonStyle={myButtonStyle}
          iconStyle={myIconStyle}
          messageStyle={myMessageStyle}
        />
      )}
    </form>
  );
};

• Without focus

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

export default function MyComponent() {
  // Define state and variables
  const [showModal, setShowModal] = useState(false);

  const myIcon = <svgPath>;;
  const myMessage = "Profile created successfully !";
  const myButtonText = "OK";
  const myAriaLabel = "OK, close modal";
  const closeModal = {() => setShowModal(false)};
  const myButtonStyle = { backgroundColor: "#0891b2" };
  const myIconStyle = { borderRadius: "30px" };
  const myMessageStyle = { fontSize: "45px" };

  const openModal = (e) => {
    e.preventDefault();
    setShowModal(true);
  };

  return (
    //Pass the onClick or onSubmit event that opens the modal
    <form onSubmit={openModal}>
      <button type="submit">Save</button>

      {/* The modal is conditionally rendered */}
      {showModal && (
        <Modal
          icon={myIcon}
          message={myMessage}
          buttonText={myButtonText}
          ariaLabel={myAriaLabel}
          closeModal={closeModal}
          buttonStyle={myButtonStyle}
          iconStyle={myIconStyle}
          messageStyle={myMessageStyle}
        />
      )}
    </form>
  );
};