fix(a11y): fix traces page accessibility violations — rowgroup tabbable

[olayinkaadelakun]

Summary

• Sets tabindex on AG Grid rows in the traces table via onFirstDataRendered / onRowDataUpdated callbacks, resolving the IBM accessibility checker violation "None of the descendant elements with rowgroup role is tabbable"
• Adds aria-label to the traces TableComponent so screen readers announce the grid with a meaningful name
• Adds an onCellKeyDown handler so keyboard users can open trace detail with the Enter key
• Adds ensureDomOrder: true to the base TableComponent gridOptions so screen readers traverse rows in visual order
• Adds aria-label to the status filter SelectTrigger, fixing the Lighthouse button-name critical violation (WCAG 4.1.2)
• Change AlertTitle from h5 to div in alert.tsx, fixing the Lighthouse heading-order violation caused by an h2 → h5 jump in the empty state
• Adds trace.tableAriaLabel and trace.statusFilterLabel i18n keys to all 7 locale files

Test plan

• Run IBM Equal Access Accessibility Checker on the Traces page — confirm rowgroup violation is resolved
• Run Lighthouse accessibility audit — confirm button-name and heading-order no longer fail
• Tab into the traces table, navigate rows with arrow keys, press Enter to open a trace — confirm keyboard flow works
• Confirm the status filter dropdown is announced correctly by a screen reader
• Confirm no visual regression on the empty state alert across the app

Summary by CodeRabbit

• New Features

  • Added new accessibility and testing guidance documents for Level 1 compliance checks and audit tracking.
  • Expanded trace view labels and controls with localized text for filtering, table labeling, and span expand/collapse actions.

• Bug Fixes

  • Improved keyboard access in trace tables, including row navigation with Enter and better focus handling.
  • Added accessible labels for copy-code actions, status filters, dialogs, and expandable trace items.
  • Updated some UI headings/alerts to use more appropriate semantics for assistive technologies.

• Documentation

  • Added a clear accessibility requirements and testing reference for future checks.

[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

Run ID: bd8528bc-31dd-4daf-afd2-26034e90d452

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 PR adds IBM Level 1 accessibility documentation and test guidance, and updates frontend accessibility for code-copy controls, alerts, and trace table/span interactions with locale strings and tests.

Changes

Accessibility baseline and remediation

Layer / File(s)	Summary
Level 1 baseline docs a11y-level-1-requirements.md, a11y-gap-report.md	Adds the Level 1 requirements reference and the gap report with audit metadata, criterion status tables, detailed findings, and a prioritized fix list.
Remediation plan a11y-action-plan.md	Adds the phased accessibility action plan with checklist usage, task phases, verification steps, and exit criteria.
Test workflow and type imports a11y-test-usage.md, src/frontend/tests/fixtures.ts, src/frontend/tests/a11y/auth-pages.a11y.spec.ts	Documents Playwright and jest-axe accessibility test usage and converts shared fixture and auth-page imports to type-only usage.
Copy-code labels and alert semantics src/frontend/src/components/core/codeTabsComponent/index.tsx, src/frontend/src/components/ui/alert.tsx, src/frontend/src/locales/*.json	Adds chat copy-code translation keys, localizes the code-tabs copy button aria-label, and changes AlertTitle to render as a div.
Trace table keyboard and labels src/frontend/src/pages/FlowPage/components/TraceComponent/FlowInsightsContent.tsx, src/frontend/src/pages/FlowPage/components/TraceComponent/SpanNode.tsx, src/frontend/src/pages/FlowPage/components/TraceComponent/__tests__/FlowInsightsContent.a11y.test.ts, src/frontend/src/locales/*.json	Adds trace table and span labels, Enter-key row activation, row tabindex management, localized span toggle labels, and tests for tabindex assignment.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• viktoravelino
• deon-sanchez
• Adam-Aghili

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 2 warnings)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	The added a11y test reimplements the helper instead of testing FlowInsightsContent, and the shared AlertTitle/codeTabs/SpanNode changes lack targeted regressions.	Wire the test to production code (export/import the helper or render FlowInsightsContent) and add focused regressions for AlertTitle semantics, copy button labels, and SpanNode aria-labels.
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Test Quality And Coverage	⚠️ Warning	FAIL: the new a11y test copies applyRowTabIndices instead of exercising FlowInsightsContent, and no automated test covers the Enter-key, grouped-mode, or AlertTitle changes.	Import/expose the production helper or render FlowInsightsContent/TableComponent directly, and add tests for Enter activation, grouped mode, and AlertTitle semantics.

✅ Passed checks (6 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the traces page accessibility fix and the rowgroup tabbable issue, which matches the main change set.
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 File Naming And Structure	✅ Passed	Test files match repo conventions: Playwright .spec.ts tests in src/frontend/tests and component-level .test.ts in tests, with descriptive names and edge-case coverage.
Excessive Mock Usage Warning	✅ Passed	The new trace a11y test uses real DOM elements and no jest.mock/spyOn stubs; the PR’s other changes are imports/semantics only, so there’s no excessive mocking here.

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

---

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
	44.68% (60641/135711)	69.6% (8301/11926)	43% (1370/3186)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
5146	0 💤	0 ❌	0 🔥	17m 21s ⏱️