LiveRegion

Use LiveRegion to announce dynamic content changes to screen readers without moving focus. It renders a visually hidden, always-mounted element that uses aria-live and aria-atomic to announce updates.

Pair it with loading indicators like Skeleton or ProgressSpinner, or use it whenever content changes without a focus move, to satisfy WCAG 4.1.3 (Status Messages).

Caution

Keep LiveRegion mounted at all times and change only its message. Assistive technology announces an update only when the content of an already-mounted region changes, so conditionally rendering the component prevents announcements.

Import

import { LiveRegion } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
message	string	No	The message announced to screen readers. Pass an empty string to clear a previous announcement without unmounting the element. Defaults to an empty string.
politeness	'polite' | 'assertive'	No	Announcement urgency. “polite” waits for a pause in screen reader output; “assertive” interrupts. Defaults to polite.

LiveRegion also accepts standard HTML attributes (for example, className).

Example

import { LiveRegion, provider } from '/@dropins/tools/components.js';

// Render once and keep it mounted for the life of the page
const liveRegion = await provider.render(LiveRegion, {
  message: '',
  politeness: 'polite',
})(document.querySelector('.live-region'));

// Announce a change by updating only the message
liveRegion.setProps((prev) => ({ ...prev, message: 'Loading order summary' }));

// Clear the announcement without unmounting
liveRegion.setProps((prev) => ({ ...prev, message: '' }));

Related

• ProgressSpinner — pair with a live region to announce loading state.
• Skeleton — announce when skeleton content finishes loading.