A web component that makes it easier to work with live regions.
npm add @acab/live-announcer
-
Set it up on page load. This should be done as early as possible.
import * as announcer from '@acab/live-announcer'; announcer.setup();
-
Announce notifications from anywhere on the page, in an assertive or polite way.
announcer.notify('Something happened!', { priority: 'important' });
announcer.notify('Something happened, but it can wait.');
- Keep the notification text short and concise. Don't use special characters or non-text content.
- Set up the announcer as early as possible, before even sending any notifications.
- Don't send too many notifications at the same time. Prefer static text.
Calling setup() will automatically create an instance of the announcer and inject it into the page. Specifically, it will be appended into the <body> element's shadow tree.
In some cases, you might want to inject it somewhere else, for example, into a modal <dialog> or a popout window. For such scenarios, use the constructor to create a separate instance and inject it wherever you'd like:
import { LiveAnnouncer } from '@acab/live-announcer';
const announcer = new LiveAnnouncer();
announcer.setup({ target: document.querySelector('dialog') });
announcer.notify('Something happened inside the dialog!');