Repository navigation
A full Front-End Checklist audit of every component (#139,
DS-0161): 58 findings in 30 components, all fixed. Several fixes change default behaviour; those
are listed first.
Changed
- BREAKING —
MetricTile(DS-0191) is no longer a live region by default. Pass the new
liveprop to announce updates; the whole tile is then one polite, atomic region, so an update
reads as "label value delta" rather than a bare number. - BREAKING —
ServiceCard(DS-0192) is interactive only withhreforonclick; without
them it is a static group, not a focusable button.sparkdefaults to[](shows "No data"
rather than a made-up trend). The control is a stretched overlay named by name + status and
described by host, latency,metaand the sparkline. - BREAKING —
Card(DS-0183) withonclickrenders a stretched overlay<button>; the root
is no longerrole="button", so nested actions are no longer inside a button. A titled card is
role="region". Table(DS-0188) rendersdata-align="start" | "end"(wasleft/right);align
acceptsstart/endand still takesleft/right. Alignment follows text direction.Sidebar(DS-0181): the rail toggle is named "Sidebar" witharia-expanded(was
"Expand / Collapse sidebar" witharia-pressed). Degraded and down status is spoken, not
colour-only. Ids are unique per instance.FileDrop(DS-0173) is named by its visible text ("Drop files here"), not "Upload files".Toaster(DS-0179): side positions anchor to the inline edge, sotop-rightrenders top
left underdir="rtl".Modal(DS-0178): theheadersnippet receivestitleId(Snippet<[string]>), so a
custom header keeps the dialog named. Snippets that ignore the argument keep working.
Added
- Chart keyboard contract (
src/lib/chart-nav.ts):Chart,BoxPlot,BumpChart,
ScatterPlotandHeatmapare each one tab stop; arrows, Home and End move between marks. Chart(DS-0184):dashes(default on) tells line and area series apart by dash pattern
as well as colour, with matching legend keys;endLabelsprints each series name at the end of
its line.CHART_DASH_CYCLEis exported.Heatmap(DS-0164): a min→max legend whenshowValuesis off.FileDrop:onreject(files), and rejected files are announced.SearchPalette(DS-0180):closeLabelandresultsText; a visible close button below
768px and an announced result count.lockScroll/unlockScrollexported fromdssoca/vanilla.js: the reference-counted page
scroll lock thatModalandSearchPaletteshare.MetricTile:live.
Fixed
- Focus rings —
Switch,Input(clear button),NumberField(steppers),SegmentedControl,
Table(sort button),Menu(trigger) andPaginationreplaced the base ring with a
--ss-primary-softglow at about 1.5:1. They now show a solid--ss-primaryring. Accordion(DS-0162): collapsed panels areinertandvisibility: hidden; their content
no longer stays in the tab order and the accessibility tree.Tooltip(DS-0163):aria-describedbygoes on the focused trigger, not a wrapper that
never takes focus. Escape closes the tip from anywhere and the pointer can move onto it.Heatmap: value text stays legible on every cell strength (was about 1.1:1 on strong cells).- Charts: data marks are
role="img"(Heatmap:gridcell), not buttons that do nothing;
tooltips are hidden from assistive tech and close on Escape;BoxPlotlabels include min / max. NumberField(DS-0168): steppers arearia-disabledat the bounds, so focus no longer
drops to<body>; the value is announced.FileDrop: focus moves to a neighbour after Remove and Clear; 24px targets.Toaster: persistent polite and assertive live regions; focus is restored when a focused
toast is dismissed; the timer does not resume while a toast has focus; 24px dismiss target.Link(DS-0174): inline links show an underline at rest;noopener noreferrerand the
new-tab hint follow the realtarget; a customrelis merged.Badge(DS-0175): a count-only badge is named by its count; a nameless dot is notimg.Menu(DS-0177): withoutlabel, the menu is named by its trigger.Modal/SearchPalette: the page behind no longer scrolls.Topbar(DS-0182): the tab strip stays reachable whenactivematches no tab.LogStream(DS-0190): switched-off chips keep AA contrast; the log scroller is focusable;
the empty state is no longer a nested live region.Icon(DS-0176):pathsandregisterIconmarkup passes a defence-in-depth filter; the
trust requirement is documented.Button(DS-0165): warns wheniconOnlyhas no accessible name.TierList(DS-0189): the flip animation respects reduced motion; arrow keys and drag
insertion mirror under RTL.- RTL — logical properties replace physical
left/rightinInput,Textarea,
NumberField,DateField,Select,Switch,SegmentedControl,Table,Menu,Sidebar,
Pagination,SearchPalette,Toaster,TopbarandShortcutsHelp;SegmentedControlarrow
keys follow reading direction.
Docs
CLAUDE.mdgains Accessibility & quality rules for every component change (DS-0194), and
test/unit/checklist-guards.test.tsenforces the mechanical ones across all components.- Inspirations (
DS-0195): the twelve example pages and the gallery follow the new component
markup and had a polish pass (quiet chrome, accent only where it matters, fewer badges).