CngxLiveAnnouncer
projects/common/a11y/aria/live-announcer.ts
Import#
import { CngxLiveAnnouncer } from '@cngx/common/a11y'
Description#
Imperative, reusable polite/assertive live-region announcer.
The imperative counterpart to CngxLiveRegion: where the directive
decorates an element you render (the content IS the announcement), this
service owns two visually-hidden aria-live regions appended to
document.body - one persistent polite node and one persistent assertive
node - and exposes an announce(message, politeness) call for template-less
directives and event handlers (e.g. CngxCopyValue copy success,
CngxOtpInput completion).
Each region is created lazily on the first announcement of its politeness and reused thereafter. Because polite and assertive live in separate fixed- politeness nodes, an assertive announcement never clobbers a concurrent polite one. Per region, the text is cleared and re-set one frame later so an identical consecutive message is still re-read by the screen reader.
SSR-safe: all DOM access is guarded by isPlatformBrowser; on the server
announce() is a no-op and no region is created.
const announcer = inject(CngxLiveAnnouncer);
announcer.announce('Copied');
announcer.announce('Save failed', 'assertive');Index#
Methods
Methods#
announce(message: string, politeness: AriaLivePoliteness)Announces message through the fixed-politeness live region.
utterance; 'assertive' interrupts immediately. Each politeness owns its
own region, so the two never overwrite each other.
Text read by the screen reader.
'polite' (default) queues after the current
utterance; 'assertive' interrupts immediately. Each politeness owns its
own region, so the two never overwrite each other.