Skip to content

fix(a11y): keyboard trap, visually-hidden h1, tabbed_content arrow keys, dark mode contrast#448

Merged
perasperaactual merged 8 commits into
devfrom
fix/a11y-cluster
May 19, 2026
Merged

fix(a11y): keyboard trap, visually-hidden h1, tabbed_content arrow keys, dark mode contrast#448
perasperaactual merged 8 commits into
devfrom
fix/a11y-cluster

Conversation

@perasperaactual
Copy link
Copy Markdown
Contributor

Closes #438, #439, #440, #442, #443, #444

Changes

  • @stackwright/core CodeBlock: remove tabIndex={0} from <pre> — eliminates WCAG 2.1.2 keyboard trap
  • @stackwright/core TopAppBar: add visually-hidden <h1> when title is empty and logo is present
  • @stackwright/core TabbedContentGrid: add ArrowLeft/ArrowRight/Home/End keyboard navigation on tablist
  • @stackwright/core OverflowImageCard: use auto-computed contrast-safe text color (getBetterTextColor('#1a1a1a', '#FFFFFF', backgroundColor)) instead of hard-coded theme.colors.text
  • examples/stackwright-docs stackwright.yml: fix darkColors.primary/accent amber contrast on white backgrounds (1.6:1 → 7:1+)

A11y references

  • WCAG 2.1 SC 2.1.2 No Keyboard Trap (code_block)
  • WCAG 2.1 SC 1.3.1 Info and Relationships (TopAppBar h1)
  • ARIA APG Tabs Pattern (tabbed_content)
  • WCAG 2.1 SC 1.4.3 Contrast Minimum (dark mode, carousel)

Notes

@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 19, 2026

⚡ Performance Benchmark Results

✅ Build Time Benchmarks: PASSED

✅ Bundle Size Benchmarks: PASSED

❌ 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-19T00:49:25.696Z

@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 19, 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

@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! 🎉

@perasperaactual perasperaactual merged commit 474b8eb into dev May 19, 2026
14 of 15 checks passed
@perasperaactual perasperaactual deleted the fix/a11y-cluster branch May 19, 2026 00:56
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.

a11y: add visually-hidden h1 to TopAppBar when title is empty but logo is present

1 participant