LiveRegion

An accessible component that announces dynamic content changes to screen readers.

Installation

Import the component from the passport-ui package.

components/example.tsx
1import { LiveRegion } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1const [message, setMessage] = useState("");
2
3return (
4 <div>
5 <Button onClick={() => setMessage("The content has been updated.")}>
6 Update Content
7 </Button>
8 <LiveRegion message={message} />
9 </div>
10);

Additional resources

Documentation and examples are available in Storybook.