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

Last Updated : 30 Aug, 2022

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> 
    ); 
}