Charts: shared keyboard-nav fixes — ARIA grid boundaries + index-space alignment

[adamwoodnz]

Two related fixes in the shared useKeyboardNavigation hook / bar-chart keyboard path, surfaced while reviewing #49959 (CHARTS-220 follow-up). Both are general charts-library behaviour (not comparison-specific) and affect all chart types, so they were kept out of CHARTS-220 and given their own tests.

Proposed changes

• Follow the ARIA grid boundary convention (stop, don't escape). The charts advertise role="grid", but arrow keys behaved asymmetrically at the ends: ArrowRight on the last point escaped focus back to the container (the highlight/tooltip vanished), while ArrowLeft on the first point wrapped to the last. Per the WAI-ARIA APG grid pattern, focus does not move at a boundary. Now ArrowRight on the last point stays on the last point and ArrowLeft on the first point stays on the first point — the highlight/tooltip remains visible and both directions are symmetric. Exiting still happens via Tab (returns focus to the container) and Escape (clears). (accessible-tooltip.tsx)
• Align the keyboard-nav index space with visible primary series. Keyboard nav, the accessible tooltip, and the highlight CSS each map the single selectedIndex back to a bar and must stride over the same series list. totalPoints was derived from a comparison-only filtered list, while the tooltip/highlight used a list filtered by both comparison type and visibility. When an interactive legend hid a primary series, totalPoints kept counting the hidden one, so selectedIndex could reach slots that resolved to no datum and no highlight (blank stops). totalPoints is now derived from primaryEntries (visibility- and comparison-filtered), so all three index spaces agree. This also closes the latent seam for standard (non-comparison) interactive-legend charts. (bar-chart.tsx)

Because both changes live in the shared keyboard-nav path, they affect all chart types (line, bar, area…). Hidden series' slots are no longer visited on any interactive-legend chart.

Related product discussion/links

• CHARTS-221 (Linear).
• Follow-up to Charts: fix Bar Chart comparison mode keyboard a11y and zero baseline [CHARTS-220] #49959 (CHARTS-220).

Does this pull request change what data or activity we track or use?

No.

Testing instructions

Automated:

• jp test js js-packages/charts — all suites pass (969 tests). New tests were added to src/charts/bar-chart/test/bar-chart.test.tsx:
  • ARIA grid boundaries: ArrowRight at the last point stays put and keeps the highlight (no escape, no wrap); ArrowLeft at the first point stays put (no wrap).
  • Index-space alignment: hiding a primary series via an interactive legend keeps keyboard nav aligned with the tooltip (no blank stops) for both standard and comparison charts.
  • I confirmed each new test fails against the pre-fix code and passes with the fixes.

Manual (Storybook → Bar Chart → Comparison story, 5 nav stops Mon–Fri):

1. Tab to focus the chart (role="grid").
2. Press Right Arrow to move the highlight/tooltip to the last bar (Fri), then press Right again a few times → the highlight/tooltip stays on Fri (previously it disappeared).
3. Press Left Arrow back to the first bar (Mon), then press Left again a few times → the highlight/tooltip stays on Mon (previously it wrapped to the last bar).

Boundary clamping demonstrated end-to-end in the browser (verified with an expert visual review):

Right boundary — highlight/tooltip stays clamped on the last bar (Fri) after extra Right presses:

Left boundary — highlight/tooltip stays clamped on the first bar (Mon) after extra Left presses:

Linear Issue: CHARTS-221

  

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the cursor/charts-221-keyboard-nav-fixes-9413 branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack cursor/charts-221-keyboard-nav-fixes-9413

bin/jetpack-downloader test jetpack-mu-wpcom-plugin cursor/charts-221-keyboard-nav-fixes-9413

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

Cannot generate coverage summary while tests are failing. 🤐

Please fix the tests, or re-run the Code coverage job if it was something being flaky.

Full summary · PHP report · JS report