CngxA11yPanel
cngx-a11y-panel
projects/ui/a11y/a11y-panel.component.ts
Import#
import { CngxA11yPanel } from '@cngx/ui/a11y'
Description#
Batteries-included accessibility preferences card. Renders one labelled
cngx-button-toggle-group per configured axis (spacing/density, text size,
motion, contrast), each split-bound to the app-wide preference signal from
injectA11yPreferences(), plus a Reset that restores every axis to its
library default and announces the change.
It ships no trigger, no overlay, and no placement of its own - it is a plain
in-flow CngxCard. The consumer decides where it appears: inline, inside a
CngxDrawer, inside a CngxDialog, or behind their own popover trigger.
This mirrors CngxListbox under CngxSelect - the panel owns the axis
controls, the consumer owns the overlay.
Composition over reinvention (Pillar 3): the shell is CngxCard, each
control is CngxButtonToggleGroup (roving tabindex + model value), and the
Reset announcement rides the shared root CngxLiveAnnouncer - no hand-rolled
card, control, or live region. The axis ARIA is the toggle group's own
reactive computed() output (Pillar 2).
<cngx-a11y-panel />Metadata#
Relationships
Index#
Instance Properties#
unknownThe axis groups to render. Resolved once from the config: the axis list is
static, so this is a plain field (no equality concern). Each view's value
is its own one-axis computed, so a change to one axis re-renders only its
group's bound value, not the whole list.
this.buildAxisViews()