Skip to content

fix: place tabIndex -1 on z-index svg portal g tags to prevent extraneous focusable surfaces#6687

Merged
ckifer merged 1 commit intomainfrom
fix/zindex-tabbable-groups
Nov 25, 2025
Merged

fix: place tabIndex -1 on z-index svg portal g tags to prevent extraneous focusable surfaces#6687
ckifer merged 1 commit intomainfrom
fix/zindex-tabbable-groups

Conversation

@ckifer
Copy link
Member

@ckifer ckifer commented Nov 24, 2025 •
edited by coderabbitai bot
Loading

Description

add tabIndex={-1} to prevent focus on the z-index layers of the chart. Otherwise we add ~6 additional focusable element surfaces

Related Issue

#5988 (comment)

Motivation and Context

caused a regression in what is focusable, remove this

How Has This Been Tested?

  • storybook before and after, only 1 focusable surface now
image

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • I have added a storybook story or VR test, or extended an existing story or VR test to show my changes

Summary by CodeRabbit

  • Bug Fixes
    • Fixed keyboard navigation behavior for portal elements to prevent unintended tab interactions.

✏️ Tip: You can customize this high-level summary in your review settings.

@ckifer ckifer requested a review from PavelVanecek November 24, 2025 20:35
@ckifer ckifer mentioned this pull request Nov 24, 2025
Open
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 24, 2025 •
edited
Loading

Walkthrough

Adds tabIndex={-1} attribute to an SVG group element in ZIndexPortal to exclude portal elements from keyboard tab navigation, with an accompanying comment clarifying the intent.

Changes

Cohort / File(s) Summary
Keyboard Navigation Control
src/zIndex/ZIndexPortal.tsx		 Adds tabIndex={-1} to SVG group element to remove portal from tab order; includes comment indicating these elements should not be tabbable

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: adding tabIndex -1 to SVG portal g tags to prevent extraneous focusable surfaces.
Description check ✅ Passed The description covers the key sections including change details, related issue link, motivation, testing approach with screenshots, and correct bug fix type selection.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/zindex-tabbable-groups

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

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot]
coderabbitai bot reviewed Nov 24, 2025
View reviewed changes
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
src/zIndex/ZIndexPortal.tsx (1)

18-19: Good fix for the focusability regression!

The addition of tabIndex={-1} correctly removes these structural portal elements from the keyboard tab order. Browser compatibility is confirmed—this pattern is already used elsewhere in the codebase (Pie.tsx, TooltipBoundingBox.tsx) with existing tests validating the behavior on SVG elements, and the project supports React 16.8+.

Optional: Consider making the comment more specific:

-  // these g elements should not be tabbable
+  // These portal g elements are structural containers for z-index ordering and should not be tabbable

Recommended follow-up: Add an automated test to verify these portal elements are not focusable via keyboard navigation, preventing future regressions.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 10d58e9 and 0db343f.

📒 Files selected for processing (1)
  • src/zIndex/ZIndexPortal.tsx (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Build, Test, Pack

@codecov
Copy link

codecov bot commented Nov 24, 2025 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.02%. Comparing base (10d58e9) to head (0db343f).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main    #6687   +/-   ##
=======================================
  Coverage   94.02%   94.02%           
=======================================
  Files         499      499           
  Lines       42547    42547           
  Branches     4873     4873           
=======================================
  Hits        40004    40004           
  Misses       2538     2538           
  Partials        5        5

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@ckifer ckifer merged commit 599a9b7 into main Nov 25, 2025
26 of 28 checks passed
@ckifer ckifer deleted the fix/zindex-tabbable-groups branch November 25, 2025 01:22
@codecov
Copy link

codecov bot commented Nov 25, 2025

Bundle Report

Changes will increase total bundle size by 138 bytes (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.14MB 63 bytes (0.01%) ⬆️
recharts/bundle-es6 987.69kB 63 bytes (0.01%) ⬆️
recharts/bundle-umd 518.5kB 12 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name Size Change Total Size Change (%)
zIndex/ZIndexPortal.js 63 bytes 1.93kB 3.37%
view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
zIndex/ZIndexPortal.js 63 bytes 2.73kB 2.36%
view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name Size Change Total Size Change (%)
Recharts.js 12 bytes 518.5kB 0.0%

@coderabbitai coderabbitai bot mentioned this pull request Dec 9, 2025
Merged
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

@PavelVanecek PavelVanecek PavelVanecek approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ckifer @PavelVanecek