@absoluteui/angular/a11y

Accessibility building blocks for application code: live announcements, focus trapping and restoring, roving tabindex, and keyboard shortcuts.

import { AuiLiveAnnouncer, AuiFocusTrap, AuiFocusRestore, AuiRovingTabindex, AuiHotkey } from '@absoluteui/angular/a11y';

AuiLiveAnnouncer

Injectable service.

Screen-reader announcements through the shared live regions (inside an open modal dialog when there is one).

Methods

Method	Description
announce(message: string, politeness?: Politeness | undefined): void	Announce a message (text only, never parsed as HTML). No-op on the server.

[auiFocusTrap]

Class AuiFocusTrap; template reference #ref="auiFocusTrap".

Keep keyboard focus inside the host while enabled: <div auiFocusTrap>...</div> or [auiFocusTrap]="editing()". Focus moves in on activation and returns on deactivation.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiFocusTrap	boolean		Whether the trap is active (default true; an empty attribute counts as true).
restoreFocus	boolean		Return focus to the previously focused element on deactivation (default true).

[auiFocusRestore]

Class AuiFocusRestore; template reference #ref="auiFocusRestore".

Return focus to the element that was focused when the host appeared, when the host is destroyed: @if (editing) { <section auiFocusRestore>...</section> }.

Server rendering: Renders in the browser only; on the server the element stays empty.

[auiRovingTabindex]

Class AuiRovingTabindex; template reference #ref="auiRovingTabindex".

Roving tabindex (WAI-ARIA APG) over the host’s items: one item in the tab sequence, arrow keys move between items, Home/End jump, disabled items are skipped. <div role="toolbar" auiRovingTabindex="[data-item]" orientation="horizontal">.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiRovingTabindex	string		CSS selector of the items inside the host (default: direct children).
orientation	Orientation		Which arrow keys move between items: ‘vertical’, ‘horizontal’, or ‘both’ (default ‘vertical’).
loop	boolean		Wrap from the last item to the first and back (default true).
typeahead	boolean		Typing characters moves to the next item whose text starts with them (default false).
direction	Direction		Overrides the configured direction (RTL mirrors horizontal arrows).

Outputs

Output	Payload	Description
(activated)	{ item: HTMLElement; index: number; }	An item became active through the keyboard.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setActive(index: number, focus?: boolean | undefined): void	Make an item the active one (and optionally focus it).

[auiHotkey]

Class AuiHotkey; template reference #ref="auiHotkey".

Keyboard shortcut on the host (or the document with hotkeyScope="document"): <div auiHotkey="Mod+K" (hotkey)="openSearch()">. “Mod” is Meta on Apple platforms and Control elsewhere. The matching keydown is prevented.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiHotkey	string		Required. Key combination such as “Mod+K”, “Shift+?”, or “Escape” (“Mod” is Meta on Apple platforms, Control elsewhere).
hotkeyScope	"element" | "document"		Listen on the host only (‘element’, default) or anywhere in the document (‘document’); read once when the host renders.

Outputs

Output	Payload	Description
(hotkey)	KeyboardEvent	The combination was pressed (its default action is prevented).

Functions, constants, and types

Types

Politeness

type Politeness = 'polite' | 'assertive';