Skip to content

Remove unnecessary tabIndex from gantt chart SVG rect elements for improved accessibility #41029

Merged
Skn0tt merged 1 commit into
microsoft:mainfrom
Yugenjr:second-pr
May 28, 2026
Merged

Remove unnecessary tabIndex from gantt chart SVG rect elements for improved accessibility #41029
Skn0tt merged 1 commit into
microsoft:mainfrom
Yugenjr:second-pr

Conversation

@Yugenjr
Copy link
Copy Markdown
Contributor

@Yugenjr Yugenjr commented May 28, 2026

This PR removes the tabIndex={0} attribute from gantt chart bar elements that lack corresponding keyboard event handlers, fixing an accessibility anti-pattern that violates WCAG 2.1 guidelines.

Problem
The gantt chart in the HTML reporter renders SVG elements with tabIndex={0}, making them appear focusable and interactive to keyboard and screen reader users. However, these elements have no keyboard event handlers, creating a confusing and broken user experience:

Keyboard users tab onto gantt bars but can't interact with them
Screen readers announce bars as focusable when they're not interactive
Users waste keyboard navigation effort.

Solution
Remove tabIndex={0} from gantt bar elements since they are purely visual timeline indicators with no interactive purpose. The <title> element already provides tooltip accessibility.

Changes Made
File: packages/html-reporter/src/gantt.tsx

Change: Removed tabIndex={0} from SVG rect element (line 157).

fixes #41027

@pavelfeldman kindly consider this tiny minor change

@Yugenjr Yugenjr changed the title fixes the gantt bar interactive behaviour Remove unnecessary tabIndex from gantt chart SVG rect elements for improved accessibility May 28, 2026
Copy link
Copy Markdown
Member

@Skn0tt Skn0tt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This means that keyboard users cannot tab through the gantt lines anymore, but tabbing did not do anything useful either. So removing it makes us more conformant with WCAG recommendations.

@Yugenjr
Copy link
Copy Markdown
Contributor Author

Yugenjr commented May 28, 2026

Thanks for reviewing and for the clarification around the WCAG tradeoff. Glad the change aligns better with the expected keyboard accessibility behavior!

@github-actions
Copy link
Copy Markdown
Contributor

Test results for "MCP"

7207 passed, 1113 skipped


Merge workflow run.

@github-actions
Copy link
Copy Markdown
Contributor

Test results for "tests 1"

2 flaky ⚠️ [chromium-library] › library/inspector/recorder-api.spec.ts:120 › should type `@ubuntu-22.04-chromium-tip-of-tree`
⚠️ [firefox-library] › library/inspector/cli-codegen-3.spec.ts:224 › cli codegen › should generate frame locators (4) `@firefox-ubuntu-22.04-node20`

43944 passed, 864 skipped


Merge workflow run.

@Skn0tt Skn0tt merged commit 414fa0b into microsoft:main May 28, 2026
45 of 46 checks passed
@Yugenjr Yugenjr deleted the second-pr branch May 28, 2026 08:55
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.

[Bug]: Gantt Chart SVG Element Has tabIndex But No Keyboard Handler

2 participants