Skip to content

feat(core): ARIA live regions for dynamic state changes (stackwright-qb9)#477

Merged
perasperaactual merged 3 commits into
devfrom
feat/stackwright-qb9-aria-live-regions
May 31, 2026
Merged

feat(core): ARIA live regions for dynamic state changes (stackwright-qb9)#477
perasperaactual merged 3 commits into
devfrom
feat/stackwright-qb9-aria-live-regions

Conversation

@perasperaactual
Copy link
Copy Markdown
Contributor

What

Adds WCAG 4.1.3-compliant aria-live regions to 4 components that previously had zero screen reader announcements for dynamic state changes.

Changes

  • New: AriaLiveRegion utility component — visually-hidden, configurable politeness, reusable across the framework
  • Form: success message div is now role="status" aria-live="polite" aria-atomic="true" — the visible container IS the live region (no hidden duplicate text, which is the correct ARIA pattern for visible state messages)
  • SearchModal: useMemo-derived live message announces result count changes ("5 results found for...") via AriaLiveRegion
  • Carousel: visually-hidden live region announces current slide position ("Showing slide 2 of 5")
  • ContentItemErrorBoundary: error div now has role="alert" for immediate screen reader interrupt

Why

WCAG 4.1.3 (Status Messages) requires that status messages be programmatically determinable without receiving focus. None of these 4 components met this requirement. Grep confirms zero aria-live / role=alert / role=status usage in core before this PR.

Design note on Form

For Form's success message, the visible container itself carries aria-live rather than using a hidden AriaLiveRegion inside it. This avoids duplicate text in the DOM (which confuses both getByText queries and screen reader verbosity) and follows the WAI-ARIA authoring practice of making the visible status element the live region directly.

Testing

  • 5 new AriaLiveRegion unit tests (polite/assertive, visual hiding, rerenders)
  • ContentItemErrorBoundary role="alert" assertion
  • Form success state role="status" assertion
  • All 398 existing tests continue to pass (30 test files total)

Closes bead stackwright-qb9

@github-actions
Copy link
Copy Markdown
Contributor

✅ Visual Regression Test Results

Status: ✅ All visual tests passed!

All screenshots match the baseline. No visual regressions detected! 🎉

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 31, 2026

⚡ Performance Benchmark Results

✅ Build Time Benchmarks: PASSED

❌ Bundle Size Benchmarks: FAILED

❌ Runtime Vitals Benchmarks: FAILED

📝 Note: Detailed results are available in the job logs.

🎯 Performance Budgets:

  • Build time: <70s total
  • First-load JS: <100KB gzipped
  • FCP: <1.5s, LCP: <2.5s, TTI: <3s

Updated: 2026-05-31T14:39:12.671Z

@github-actions
Copy link
Copy Markdown
Contributor

✅ Visual Regression Test Results

Status: ✅ All visual tests passed!

All screenshots match the baseline. No visual regressions detected! 🎉

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 31, 2026

♿ Accessibility Test Results

Overall Status: ✅ 0/0 tests passed

🦮 WCAG 2.1 AA Compliance

No WCAG test results available

⌨️ Keyboard Navigation

No keyboard navigation test results available


⚠️ No accessibility tests were executed. Check the workflow logs for setup issues.

📊 Detailed Report

Download the full HTML accessibility report from the workflow artifacts for:

  • Detailed WCAG violation descriptions
  • Specific element selectors and fixes
  • Color contrast issues
  • Keyboard navigation flow analysis

🔍 Testing Checklist

Our accessibility tests verify:

  • ✅ WCAG 2.1 Level AA compliance
  • ✅ Color contrast in light and dark modes
  • ✅ Tab key navigation through all interactive elements
  • ✅ Focus indicators are visible
  • ✅ No keyboard traps
  • ✅ Skip links and ARIA landmarks
  • ✅ Screen reader compatibility

Powered by @axe-core/playwright and Playwright

@perasperaactual perasperaactual merged commit 5639890 into dev May 31, 2026
14 of 15 checks passed
@perasperaactual perasperaactual deleted the feat/stackwright-qb9-aria-live-regions branch May 31, 2026 14:47
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