DomAnnouncer

The DOM's Announcer: a shared live region, an element a screen reader watches and reads out as its text changes, and the helpers a binding uses to describe a Reorder group's items to one. layer is what DomLive provides; prepare and announceIn work on any document.

import * as DomAnnouncer from "@wardic/dom/DomAnnouncer"

DomAnnouncer.prepare(document) // its live region, before the first announcement
DomAnnouncer.announceIn(document, "Picked up Milk, position 2 of 5.")

Variables

ATTRIBUTE

const ATTRIBUTE: "data-wardic-announcer" = "data-wardic-announcer";

The attribute that marks the live region, for a test or a stylesheet to find it.

layer

const layer: Layer.Layer<Announcer.Announcer>;

Core's Announcer, speaking in the page's document's live region.

Functions

announceIn()

function announceIn(doc, message): void;

Speaks message in doc's live region, replacing the last. A repeat of the last gets a trailing no-break space, so it's read out again.

Parameters

doc

Document

message

string

Returns

void

documentOf()

function documentOf(node): Document;

The live document node is in: its own when that has a window, else the page's. A Solid ref runs while a new element still belongs to its template's inert document (no window, no body), before it's inserted.

Parameters

node

Node

Returns

Document

instructionsId()

function instructionsId(doc, text): string;

instructionsIdOf, with its element added now: added again if it was removed.

Parameters

doc

Document

text

string

Returns

string

instructionsIdOf()

function instructionsIdOf(doc, text): string;

The id of doc's hidden element holding text, one per distinct text, for the aria-describedby of every item that shows it. Given here, with no element added: a binding works it out as it renders, and adds the element with showInstructions in an effect.

Parameters

doc

Document

text

string

Returns

string

prepare()

function prepare(doc): void;

Adds doc's live region now, before its first announcement, so a screen reader is already watching it.

function showInstructions(doc, text): void;

Adds doc's hidden element holding text, under instructionsIdOf's id, unless it's there already.