ARIA live-region service for screen-reader announcements. The component
itself paints nothing — its job is to write text into hidden live regions
so assistive tech reads it aloud. Two usage shapes: imperative
(api.announce(msg, priority) from any descendant) and
declarative (<Announce.Region message>
bound to reactive state). Compose with Clipboard,
DragDrop, form validation, chat logs.
parts{compiled.parts.order.length}
events{events.length}
history {history.length}
region role {regionRole}
timeout {defaultTimeout}ms
history
{#if history.length === 0}
type a message and Enter, or pick a scenario — the live region inspector above shows what the AT receives
{:else}
{#each history.slice(0, 3) as h (h.at)}
{h.priority} · "{h.msg}"{fmtTime(h.at)}
{/each}
{/if}
{/snippet}
{#if tab === 'live'}
Controls
The 4 ARIA region roles imply different semantics. status = polite info,
alert = assertive (interrupts), log = running history,
timer = time-sensitive (don't announce every tick).
soma behaviour
eidosvisual · Announce + Region (imperative + declarative)svelte
{eidosSnippet}
{/if}
{#if tab === 'api'}
API reference
2 parts: Provider · Region. Provider mounts 2 internal regions
(polite + assertive) and exposes an imperative api via snippet
props + via context. Region is for declarative purpose-specific live regions.
Provider (Announce)
Prop
Type
Default
Description
defaultTimeout
number
1000
ms before a posted message clears so the same text can be re-announced.
{#each events as action (action.name)}
{@const sem = action.semantic}
{@const intentDecl = 'intent' in sem ? sem.intent : undefined}
{@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'}
{action.name}
{sem.family}
{sem.verb ?? '—'}
{sem.sequence ?? 'pre'}
{intentStr}
{action.target}
{/each}
{/if}
{#if tab === 'sema'}
sema
· events
Announce raises commit-announce-polite / commit-announce-assertive on every message post, and commit-reset when regions are wiped. Use Play to replay an event against the Provider.
Selectors at src/uix/eidos/components/announce/announce.css. The Provider is display: contents — no visual surface. Regions get the standard sr-only technique unless visuallyHidden={false}.
Announce IS the perception channel for the screen reader audience —
the component's whole purpose is to write text into aria-live
regions. Without an active screen reader, the regions are functionally
invisible (sr-only). The live region inspector above mirrors the region
contents so you can verify behaviour without launching a real AT.
Role implications
role
Implicit aria-live
Use for
Example message
status
polite
Non-critical updates.
"Profile saved"
alert
assertive
Errors, urgent notices.
"Connection lost"
log
polite
Running history (chat, activity).
New chat lines appended.
timer
polite
Time-sensitive info (don't announce every tick).
"5 minutes remaining"
Best practices
Mount <Announce> ONCE near the app root — multiple providers create duplicate regions and AT may read messages twice.
Posts are cleared after defaultTimeout ms so identical consecutive strings still trigger an announcement (AT dedupes within a region).
Use polite by default. Reserve assertive for errors and urgent interruptions only — abusing it makes the AT exhausting.
For visually-shown status banners, set visuallyHidden={false} — the eidos recipe paints outlined card chrome.
Verify with a real screen reader (VoiceOver / NVDA / JAWS) — the inspector above is a debugging aid, not a substitute.