[charts] Make axis highlight reflect the keyboard interaction #19631

alexfauquette · 2025-09-19T13:39:10Z

Follow up on keyboard navigation

The idea is to use the keyboard interaction state for highlight if the state is not controlled.
By priority, we show:

the controlled value
the keyboard navigation value
the pointer interaction value

https://deploy-preview-19631--material-ui-x.netlify.app/x/react-charts/accessibility/#keyboard-support

Capture.video.du.2025-09-19.15-36-50.mp4

To do in a follow up: update the same way the item highlight

mui-bot · 2025-09-19T13:40:43Z

Deploy preview: https://deploy-preview-19631--material-ui-x.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	🔺+690B^(+0.21%)	🔺+271B^(+0.27%)
@mui/x-charts-pro	🔺+690B^(+0.16%)	🔺+257B^(+0.19%)
@mui/x-charts-premium	🔺+690B^(+0.16%)	🔺+243B^(+0.18%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 0c340d5

codspeed-hq · 2025-09-19T13:51:52Z

CodSpeed Instrumentation Performance Report

Merging #19631 will not alter performance

_{Comparing alexfauquette:keyboard-highlight (0c340d5) with master (e1cf0f9)¹}

Summary

✅ 12 untouched

No successful run was found on master (217a73c) during the generation of this report, so e1cf0f9 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

JCQuintas

These changes broke regular axis highlighting. Also, should the "keyboard" highlight only trigger when the highlight options are enabled?

alexfauquette · 2025-09-19T20:48:36Z

These changes broke regular axis highlighting.

Thanks for the heads up. It's probably just because I returned an empty array instead of undefined

JCQuintas · 2025-09-20T15:31:41Z

Should it respect the last changed value? It feels odd that the keyboard always has preference.

Screen.Recording.2025-09-20.at.17.30.13.mov

alexfauquette · 2025-09-20T20:28:40Z

An other approach could be to update the axis highlight during keyboard interaction. Something like calling instance.setAxisHiglight while pressing keyboard.

JCQuintas · 2025-09-21T08:09:37Z

An other approach could be to update the axis highlight during keyboard interaction. Something like calling instance.setAxisHiglight while pressing keyboard.

I think it might work better than current 🤔

alexfauquette · 2025-09-23T15:05:55Z

It was trickier than expected. The axis highlight only store the pointer coordinate. We did that such that the axis-highlight sty in sync with any axis update.

The new approach store in the state a value pointer | keyboard. This value indicates which interaction is the last one to get an update.

We then have selectors for all options (controlled, pointer, keyboard) and a final selector will pick the correct one

...rc/internals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.ts

bernardobelchior · 2025-09-24T07:51:26Z

...ls/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.selectors.ts

+    return undefined;
+  }
+
+  let axisId: AxisId | false | undefined = 'xAxisId' in seriesConfig && seriesConfig.xAxisId;


Do we always want to use the x axis here, even if we're running the selectorChartsKeyboardYAxisIndex selector?

…tKeyboardNavigation/useChartKeyboardNavigation.ts Co-authored-by: Bernardo Belchior <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>

github-actions · 2025-09-29T09:12:29Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

…nto keyboard-highlight

JCQuintas

I'm curious if users will want to have the last hover highlight to be the start of the keyboard highlight.

Should be good for now though

JCQuintas · 2025-09-29T14:10:18Z

Btw the accessibility page is not on the sidebar, was that intentional? 🤔

alexfauquette · 2025-09-29T14:40:29Z

Btw the accessibility page is not on the sidebar, was that intentional? 🤔

Yes, I'm planning to add it when keyboard navigation is done. Not an issue if user find the page, but I prefer to wait a bit before advertising it

[charts] Make axis highlight reflect the keyboard interaction

892d7d6

alexfauquette requested review from bernardobelchior and JCQuintas as code owners September 19, 2025 13:39

alexfauquette added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Sep 19, 2025

prettier

b31f972

JCQuintas reviewed Sep 19, 2025

View reviewed changes

fix

4359d61

alexfauquette added 2 commits September 23, 2025 16:29

add a switch between keyboard and pointer highlight

1e4fb64

fix TS

058ae2b

bernardobelchior reviewed Sep 24, 2025

View reviewed changes

use y-axis id for selecting y-axis

50368a3

bernardobelchior approved these changes Sep 24, 2025

View reviewed changes

Update packages/x-charts/src/internals/plugins/featurePlugins/useChar…

7fa1cde

…tKeyboardNavigation/useChartKeyboardNavigation.ts Co-authored-by: Bernardo Belchior <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>

alexfauquette requested a review from JCQuintas September 29, 2025 07:14

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 29, 2025

alexfauquette added 4 commits September 29, 2025 11:18

Merge remote-tracking branch 'upstream/master' into keyboard-highlight

a89557f

prettier

3731471

Merge branch 'keyboard-highlight' of github.com:alexfauquette/mui-x i…

5fef9ff

…nto keyboard-highlight

prettier

080214e

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Sep 29, 2025

JCQuintas approved these changes Sep 29, 2025

View reviewed changes

fix

0c340d5

alexfauquette enabled auto-merge (squash) September 30, 2025 07:29

alexfauquette merged commit 943e431 into mui:master Sep 30, 2025
22 checks passed

Uh oh!

[charts] Make axis highlight reflect the keyboard interaction #19631

[charts] Make axis highlight reflect the keyboard interaction #19631

Uh oh!

Conversation

alexfauquette commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Instrumentation Performance Report

Merging #19631 will not alter performance

Summary

Footnotes

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

alexfauquette commented Sep 19, 2025

Uh oh!

JCQuintas commented Sep 20, 2025

Uh oh!

alexfauquette commented Sep 20, 2025

Uh oh!

JCQuintas commented Sep 21, 2025

Uh oh!

alexfauquette commented Sep 23, 2025

Uh oh!

Uh oh!

bernardobelchior Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 29, 2025

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

JCQuintas commented Sep 29, 2025

Uh oh!

alexfauquette commented Sep 29, 2025

Uh oh!

Uh oh!

Uh oh!

alexfauquette commented Sep 19, 2025 •

edited

Loading

mui-bot commented Sep 19, 2025 •

edited

Loading

codspeed-hq bot commented Sep 19, 2025 •

edited

Loading