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 role–dialog, 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’.
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.
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