React Suite Modal Accessibility WAI-ARIA Roles, States, and Properties

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React suite Modal Accessibility WAI-ARIA Roles, States, and Properties. A modal component is used to prompt acknowledgment messages, submissions, etc. Accessibility is a tool or a way that enables a website accessible easily by the user by providing features like buttons, breadcrumbs, checkboxes or dropdowns, etc.

As per WAI-ARIA, Modal has default role– dialog, aria-modal set to true, aria-labelledby, aria-describedby for title and description of modal respectively.

Syntax:

 <Modal
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
    ...
</Modal>

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: The below example demonstrates the usage of aria-labelledby and aria-describedby in the modal component.

Javascript

import "rsuite/dist/rsuite.min.css";
import { Modal, Button, ButtonToolbar } from "rsuite";
import { useState } from "react";

export default function App() {

    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    return (
     <div>
      <div style={{ textAlign: "center" }}>
       <h2>GeeksforGeeks</h2>
       <h4 style={{ color: "green" }}>
         React Suite Modal Accessibility WAI-ARIA
         Roles, States, and Properties
       </h4>
      </div>
      <div style={{ padding: 20, textAlign: "center" }}>
      <div>
       <ButtonToolbar>
        <Button onClick={handleOpen}> Open</Button>
       </ButtonToolbar>
       <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-title"
        aria-describedby="modal-description"
       >
        <Modal.Header>
         <Modal.Title id="modal-title">
           GeeksforGeeks
         </Modal.Title>
        </Modal.Header>
        <Modal.Body id="modal-description">
         Welcome to our Portal.
        </Modal.Body>
       </Modal>
      </div>
     </div>
    </div>
   );
}

Output:

Example 2: The below example demonstrates the usage of an alert dialog using a static backdrop in the modal component.

Javascript

import "rsuite/dist/rsuite.min.css";
import { Modal, Button, ButtonToolbar } from "rsuite";
import { useState } from "react";

export default function App() {

    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
    return (
     <div>
      <div style={{ textAlign: "center" }}>
       <h2>GeeksforGeeks</h2>
       <h4 style={{ color: "green" }}>
        React Suite Modal Accessibility WAI-ARIA Roles,
        States, and Properties
       </h4>
      </div>
      <div style={{ padding: 20, textAlign: "center" }}>
       <div>
        <ButtonToolbar>
         <Button onClick={handleOpen}> Open</Button>
        </ButtonToolbar>
        <Modal
         open={open}
         onClose={handleClose}
         aria-labelledby="modal-title"
         aria-describedby="modal-description"
         role="alertdialog"
         backdrop="static"
        >
         <Modal.Header>
          <Modal.Title id="modal-title">
            Alert Geek!
          </Modal.Title>
         </Modal.Header>
         <Modal.Body id="modal-description">
          Welcome to the GeeksforGeeks.
         </Modal.Body>
        </Modal>
       </div>
      </div>
     </div>
    );
}

Output:

Reference: https://rsuitejs.com/components/modal/#wai-aria-roles-states-and-properties