Skip to content

bs-ux-10: contextual empty states in Mission Control dashboard#176

Merged
dgarson merged 2 commits intofeat/horizon-ui-completefrom
nate/bs-ux-10-empty-states
Feb 24, 2026
Merged

bs-ux-10: contextual empty states in Mission Control dashboard#176
dgarson merged 2 commits intofeat/horizon-ui-completefrom
nate/bs-ux-10-empty-states

Conversation

@dgarson
Copy link
Owner

@dgarson dgarson commented Feb 24, 2026

Summary

  • replace ad-hoc empty-state placeholders in Mission Control with the shared EmptyState component
  • add contextual copy for empty sessions, tool calls, approvals, and alert-filter states
  • keep panel sizing/layout consistent while improving zero-data UX consistency

Validation

  • pnpm -C apps/web-next exec tsc --noEmit

Work Item

  • dgarson/clawdbot#bs-ux-10

Audited and remediated WCAG 2.1 AA violations across MissionControlDashboard
and AgentTopologyMap (FindingDetailModal and DiscoveryRunHistory do not exist
on this branch — documented in audit report).

MissionControlDashboard.tsx (18 violations fixed):
- Skip link + <main id> landmark added
- All decorative icons: aria-hidden="true" throughout
- SeverityIcon variants: role="img" + aria-label per severity level
- ToolCallsPanel status icons: CheckCircle/XCircle labeled for AT
- SessionStatusBadge: role="status"; dot aria-hidden
- AlertFeed filters: aria-pressed + focus-visible:ring-2 + role="group"
- Approve/Deny buttons: aria-label with action context + focus ring
- Alert feed: role="log" + aria-live="polite"
- LiveStatusBar: aria-live="polite" region
- Panels converted to <section aria-label> landmarks

AgentTopologyMap.tsx (14 violations fixed):
- Skip link + <main id> landmark added
- SVG: role="application" + aria-label for keyboard context
- NodeShape: tabIndex=0, role="button", aria-label, aria-pressed, onKeyDown
- focusedId state + visible focus ring (glow) distinct from selected state
- DetailPanel: <aside role="complementary" aria-label>
- DetailPanel close button: aria-label="Close details panel"
- Escape key handler: closes detail panel (no keyboard trap)
- Token load bar: proper role="progressbar" with ARIA values
- Live/Paused toggle: aria-pressed + descriptive aria-label
- All toolbar/legend icons: aria-hidden="true"
- SVG edges/grid/dots: aria-hidden="true"

AgentOutputDiffViewer.tsx (pre-existing build fix, not WCAG):
- Removed 9 non-existent lucide-react imports blocking build
- Renamed Map import to MapIcon to stop shadowing JS built-in Map

docs/WCAG_AUDIT_REPORT.md: full audit report with violation inventory,
fixes applied, remaining items, and WCAG 2.1 AA coverage matrix
@dgarson dgarson merged commit 720c537 into feat/horizon-ui-complete Feb 24, 2026
1 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant