test(a11y): shared playground IBM scan and jest-axe coverage for untested modals and primitives

[viktoravelino]

Jira: LE-2042 · Findings tracked in LE-2043 · Parent epic: LE-1505

Summary

Test-only branch — no production code changes.

• Playwright IBM Equal Access spec for the never-scanned /playground/:id route (tests/a11y/shared-playground.a11y.spec.ts, 4 tests): publishes a Chat Input → Chat Output flow (no LLM API key needed, so make test_frontend_a11y_scan picks it up), scans empty and with-message states in light and dark, plus keyboard tests — composer tab order must reach button-send with every intervening stop exposing an accessible name; no focus trap.
• jest-axe for 5 uncovered modals: apiModal, shareModal, editNodeModal, templatesModal, flowSettingsModal (31 tests).
• jest-axe for 5 UI primitives: label, command, context-menu, calendar, sidebar (38 tests).
• Route manifest: playground dynamic entry references its covering spec.

Pre-existing bugs found while writing these are asserted as-is with FINDING (documented, not fixed) comments so a future fix trips the test loudly — full list in LE-2043. The /flow/:id/view crash (route always throws TypeError: setIsLoading is not a function, standing TS2741) is tracked in LE-1755 and the route will be deleted.

QA — how to test

1. Unit layer (blocking CI job): cd src/frontend && npx jest --testPathPatterns="\.a11y\.test\." → 41 suites / 186 tests green.
2. Scan layer (app running): RUN_A11Y=true npx playwright test tests/a11y/shared-playground.a11y.spec.ts --workers=5 → 4 tests green, scan summaries attached to the report.
3. Verified twice against a live app with zero retries.

Notes for reviewers

• flowSettingsModal field labelling is not auditable in jsdom (global Radix form stub in jest.setup.js; un-stubbing infinite-loops Radix Switch under React 19 + jsdom) — label rules disabled there with an in-file explanation; field labelling stays covered by page-level IBM scans.
• apiModal code tabs and templatesModal template panes are stubbed (ace-builds side-effect imports / missing image moduleNameMapper); the modal shells are audited for real.

Summary by CodeRabbit

• Accessibility
  • Improved accessibility coverage for the shared playground, calendar, command menu, context menu, sidebar, labels, and modal experiences.
  • Added checks for accessible names, keyboard navigation, focus behavior, ARIA roles, selection states, dialogs, and light/dark themes.
  • Added coverage for shared playground accessibility, including chat interaction and keyboard focus behavior.
• Documentation
  • Clarified shared playground test requirements for publicly accessible flows.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: c9a47ede-da86-4f7b-b116-dfd477cb5711

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

The pull request adds accessibility coverage for frontend UI components, modals, and the shared playground. It also documents the playground route’s public-flow requirement and links it to its Playwright accessibility specification.

Changes

Accessibility coverage

Layer / File(s)	Summary
UI component accessibility tests src/frontend/src/components/ui/__tests__/*a11y.test.tsx	Adds axe, ARIA, accessible-name, focus, state, and keyboard tests for Calendar, Command, ContextMenu, Label, and Sidebar.
Modal accessibility test coverage src/frontend/src/modals/*/__tests__/*a11y.test.tsx	Adds accessibility tests for API, edit-node, flow-settings, share, and templates modals, including dialog semantics, controls, state handling, and known violations.
Shared playground route coverage scripts/a11y/a11y_routes.json, src/frontend/tests/a11y/shared-playground.a11y.spec.ts	Requires a public shared-flow ID for the playground route and adds Playwright checks for themes, transcripts, keyboard navigation, accessible names, and focus movement.

Estimated code review effort: 4 (Complex) | ~45 minutes

🚥 Pre-merge checks | ✅ 8 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (8 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the accessibility test additions for the shared playground, modals, and UI primitives.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Test Coverage For New Implementations	✅ Passed	PR adds 11 substantive accessibility test files with proper .test.tsx/.spec.ts naming and a route manifest link covering /playground/:id/.
Test Quality And Coverage	✅ Passed	PASS: The PR adds substantive Playwright and jest-axe coverage of the new shared-playground route plus 10 components/modals, with keyboard, focus, role, and axe assertions.
Test File Naming And Structure	✅ Passed	Changed files use clear .a11y.test.tsx and .a11y.spec.ts naming, live in appropriate test dirs, and include descriptive, well-organized setup/helper-based suites.
Excessive Mock Usage Warning	✅ Passed	Mocks are limited to import-time side effects, store selectors, and one heavy child surface; most new a11y tests exercise real DOM interactions/components.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch LE-2042

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

✅ Test Coverage Advisor

No source changes detected without accompanying tests. Thanks for keeping coverage up! 🎉

Advisory check only — never blocks merge.

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	47.46% (67879/143008)	70.17% (9585/13658)	46.19% (1578/3416)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
5403	0 💤	0 ❌	0 🔥	19m 22s ⏱️

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 61.55%. Comparing base (e59f7e2) to head (60a6174).

Additional details and impacted files

@@                Coverage Diff                 @@
##           release-1.12.0   #14302      +/-   ##
==================================================
- Coverage           61.86%   61.55%   -0.31%     
==================================================
  Files                2347     2347              
  Lines              238604   237882     -722     
  Branches            36664    33360    -3304     
==================================================
- Hits               147614   146434    -1180     
- Misses              89170    89628     +458     
  Partials             1820     1820              

Flag	Coverage Δ
frontend	59.82% <ø> (-0.49%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.
see 174 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.