Live regions are critical for keeping screen reader users informed about background updates, such as search results loading or items being added to a cart.

How it works

Politeness: Use ariaLive="polite" (wait for silence) or ariaLive="assertive" (interrupt immediately — use sparingly).
Auto-clear: Optionally clears the announcement after a set number of milliseconds via clearAfter.

Usage Example

import { LiveRegion } from '@holmdigital/components'; // Polite: waits for user to pause before announcing <LiveRegion message={`Found ${results.length} items`} ariaLive="polite" /> // Assertive: interrupts immediately (use only for critical alerts) <LiveRegion message="Session expiring in 60 seconds" ariaLive="assertive" /> // Auto-clear after 5 seconds <LiveRegion message="File saved successfully" ariaLive="polite" clearAfter={5000} />

Props

Props Reference

Prop	Type	Default	Description
message	string	-	The text to announce. Changing this prop triggers a new announcement.
ariaLive	'polite' \| 'assertive'	'polite'	Politeness level. 'polite' waits for silence; 'assertive' interrupts immediately.
clearAfter	number	-	Optional timeout in ms. Clears the announcement after this delay.