LiveRegion

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

Installation

Import the component from the passport-ui package.

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

Usage

Basic example showing how to use the component.

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

Additional resources

Documentation and examples are available in Storybook.