Skip to main content
cngx-src documentation

CngxLiveAnnouncer

Injectablev0.1.0WCAG AA

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#

announce#void
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.

@parammessagestring

Text read by the screen reader.

@parampolitenessAriaLivePoliteness= 'polite'

'polite' (default) queues after the current utterance; 'assertive' interrupts immediately. Each politeness owns its own region, so the two never overwrite each other.

ngOnDestroy#void