Skip to content
Related Articles

Related Articles

React Suite Modal Accessibility

Improve Article
Save Article
  • Last Updated : 15 Sep, 2022
Improve Article
Save Article

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. 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. Modal accessibility describes how a modal is accessible like a keyboard, states, properties, etc. The modal component has default roledialog, aria-modal set to true, aria-labelledby, aria-describedby for title and description of modal respectively that is defined by WAI-ARIA.

Modal Props:

  • autoFocus: The Modal is opened and is automatically focused on its own when this is set to true.
  • backdrop: The Modal will display the background in its opened state when this is set to true.
  • backdropClassName: It is used to add an optional extra class name to .modal-backdrop.
  • classPrefix: It denotes the prefix of the component CSS class.
  • dialogClassName: It is used for the CSS class applied to Dialog DOM nodes.
  • enforceFocus: The Modal will prevent the focus from leaving when opened when this is set to true.
  • keyboard: It closes a modal when the ESC key is pressed.
  • onClose: It is a callback function fired when Modal hides.
  • onEnter: It is a callback function that is triggered before the Modal transitions in.
  • onEntered: It is a callback function that is triggered after the Modal finishes transitioning in.
  • onEntering: It is a callback function that is triggered as the Modal begins to transition in.
  • onExit: It is a callback function that is triggered right before the Modal transitions out.
  • onExited: It is a callback function that is triggered after the Modal finishes transitioning out.
  • onExiting: It is a callback function that is triggered as the Modal begins to transition out.
  • onOpen: It is a callback function that is triggered when Modal displays.
  • overflow: It automatically sets the height when the body content is too long.
  • size: It sets the Modal size.

Modal.Header Props:

  • as: It is used to add a custom element for this component.
  • classPrefix: It denotes the prefix of the component CSS class.
  • closeButton: It displays the close button.
  • onHide: It is a callback function that is triggered when Modal is hidden.

 

Modal.Title Props:

  • as: It is used to add a custom element for this component.
  • classPrefix: It denotes the prefix of the component CSS class.

Modal.Footer Props:

  • as: It is used to add a custom element for this component.
  • classPrefix: It denotes the prefix of the component CSS class.

Modal.Body Props:

  • as: It is used to add a custom element for this component.
  • classPrefix: It denotes the prefix of the component CSS class.

Syntax:

import { Modal } from "rsuite";
export default function App() {
  return (
      <Modal 
          keyboard={false}
          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:

 

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example 1: Below example demonstrates the modal when the keyboard interaction is ‘true’.

App.js




import { useState } from "react";
import { Button, Modal } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Modal Accessibility</h4>
  
                <div style={{ marginTop: 20, width: 400 }}>
                    <div className="modal-container">
                        <Button onClick={handleOpen}
                            appearance="primary" 
                            color="blue">
                            Open
                        </Button>
  
                        <Modal open={open}
                            onClose={handleClose} 
                            keyboard={true}>
                            <Modal.Header>
                                <Modal.Title>Error</Modal.Title>
                            </Modal.Header>
                            <Modal.Body>
                                <div>
                                    <h3>
                                     Close the Modal using ESC key.
                                     </h3>
                                </div>
                            </Modal.Body>
                            <Modal.Footer>
                                <Button
                                    onClick={handleClose}
                                    appearance="primary"
                                    color="blue"
                                >
                                    Done
                                </Button>
                                <Button onClick={handleClose}
                                    appearance="subtle">
                                    Cancel
                                </Button>
                            </Modal.Footer>
                        </Modal>
                    </div>
                </div>
            </div>
        </center>
    );
}


Output:

 

Note: In the above example, the modal is closed using the ‘Esc’ key.

Example 2: Below example demonstrates the usage of aria-labelledby and aria-described in the modal.

App.js




import { useState } from "react";
import { Button, ButtonToolbar, Modal } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
export default function App() {
    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
  
    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Modal Accessibility</h4>
  
                <div style={{ marginTop: 20,
                   width: 400 }}>
                    <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 world of Coding.
                            </Modal.Body>
                        </Modal>
                    </div>
                </div>
            </div>
        </center>
    );
}


Output:

 

Reference: https://rsuitejs.com/components/modal/#accessibility


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!