[charts] Introduce keyboard navigation #19155

alexfauquette · 2025-08-12T15:03:44Z

Introduce keyboard navigation

The data format is fairly similar to the highlight plugin

Rendering aspect

The line series get a dedicated component to show the highlighted point since marks are not always rendered.
All the other series implemented use the outlined: 'auto' property to show the focus position. And they rely on data-focused=true for that.

Focus management

Zoom is not taken into account. Should we loop only on visible points, or move the zoom to have the focused element inside the drawing area?
The vocal assistant strategy I'm planning to use is to use aria-activedescendent to keep the focus on the SVG and target specific items like I'm already doing it with data-focused=true. I will probably add an id attribute only on the element of interest.
Will need an option to disable this keyboard navigation, such that user can do whatever they want. For eample the npm sparkline reproduction will be broken because of this feature (the focus can not be handled at the same time by the SVG and a parent div)

mui-bot · 2025-08-12T15:05:50Z

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

Updated pages:

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%)	▼-9B^(-0.01%)
@mui/x-data-grid-premium	0B^(0.00%)	▼-5B^(0.00%)
@mui/x-charts	🔺+6.01KB^(+1.90%)	🔺+1.48KB^(+1.50%)
@mui/x-charts-pro	🔺+6.02KB^(+1.47%)	🔺+1.42KB^(+1.11%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	▼-3B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	▼-2B^(-0.01%)

Details of bundle changes

Generated by 🚫 dangerJS against 8e7536a

codspeed-hq · 2025-08-13T14:43:53Z

CodSpeed Performance Report

Merging #19155 will not alter performance

_{Comparing alexfauquette:keyboard-navigation (8e7536a) with master (74f8873)¹}

Summary

✅ 12 untouched

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

packages/x-charts/src/BarChart/BarChart.tsx

packages/x-charts/src/ChartsSurface/ChartsSurface.tsx

packages/x-charts/src/hooks/useItemFocused.ts

JCQuintas · 2025-08-21T14:58:07Z

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

+export const selectorChartsFocusedSeriesType = createSelector(
+  [selectKeyboardNavigation],
+  (item) => item?.type,
+);
+
+export const selectorChartsFocusedSeriesId = createSelector(
+  [selectKeyboardNavigation],
+  (item) => item?.seriesId,
+);
+
+export const selectorChartsFocusedDataIndex = createSelector(
+  [selectKeyboardNavigation],
+  (item) => item?.dataIndex,
+);


Should we already account for non-regular identifiers here? 😉

This feels a bit static if we consider the identifier is configurable. Maybe we can have a more generic selector with a proper memo function? 🤔

Maybe we should have a compareIdentifier in the series config 💡

This feels a bit static if we consider the identifier is configurable

I assume you have scatter charts in mind ;)

The identifier will not be the biggest issue. it's the keyboard actions. For those who does not enter in the (seriesId, dataIndex) identifier framework, it might be easier to create a custom plugin for their keyboard navigation.

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

JCQuintas · 2025-08-21T15:37:07Z

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

+    }
+
+    element.addEventListener('keydown', keyBoardHandler);
+    element.addEventListener('focus', focusNextItem);


I don't think focus should do anything 🤔

With focus whenever a user clicks anywhere in the chart, the first item will be selected, which I think is quite odd.

It's inspired by ARIA guidelines from the data grid. When the element get focused, it set the focus to it's first sub element.

I could have a rule saying that if charts is focused, but has no internal element focus, I dislay the outlined on the entire SVG. But when user click on th charts I have to show it's getting the focus

Yeah that would be less disruptive I think. 🤔

Did you do anything regarding this comment? I still see the blue around it when clicking on the chart

...ernals/plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.types.ts

packages/x-charts/src/LineChart/FocusedMark.tsx

docs/data/charts/accessibility/accessibility.md

...plugins/featurePlugins/useChartKeyboardNavigation/useChartKeyboardNavigation.helpers.test.ts

JCQuintas · 2025-08-22T11:58:00Z

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

+    }
+
+    element.addEventListener('keydown', keyBoardHandler);
+    element.addEventListener('focus', focusNextItem);


Yeah that would be less disruptive I think. 🤔

JCQuintas · 2025-08-22T11:58:31Z

docs/data/charts/accessibility/accessibility.md

+
+## Keyboard support
+
+Set `enableKeyboardNavigation` to `true` to enable the keyboard navigation on your charts.


Should we have a global enable/disable toggle for this? 🤔

I added a sentence about how to use theme provider to do so

bernardobelchior

I'm having a hard time using this feature in the docs. I can't seem to focus the chart. Do you know how I can do that? Do I need to enable some specific feature?

docs/data/charts/accessibility/accessibility.md

bernardobelchior · 2025-09-08T16:47:53Z

docs/data/charts/accessibility/accessibility.md

+
+## Keyboard support
+
+Set `enableKeyboardNavigation` to `true` to enable the keyboard navigation on your charts.


Should we add a demo?

bernardobelchior · 2025-09-08T16:51:21Z

packages/x-charts/src/BarChart/BarElement.tsx

      fill: color,
      skipAnimation,
      layout,
+      'data-focused': isFocused || undefined,


Base UI uses data-highlighted, but that might conflict with our current highlighted logic.

data-highlighted could clearly conflict. But maybe data-active to use similar wording as aria-activedescendent

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

alexfauquette · 2025-09-08T18:54:01Z

Do I need to enable some specific feature?

Yes, you need to add enableKeyboardNavigation prop to the chart. It should be enable by default but this would be a breaking change

bernardobelchior · 2025-09-09T07:40:58Z

Do I need to enable some specific feature?

Yes, you need to add enableKeyboardNavigation prop to the chart. It should be enable by default but this would be a breaking change

I see. Should we add a demo, then? Otherwise people won't be able to easily test it from the docs

bernardobelchior · 2025-09-09T07:43:15Z

Seems to work very well 😄

Screen.Recording.2025-09-09.at.08.42.23.mov

Do we want to show the tooltip when a mark is focused and the user presses some key?

docs/data/charts/accessibility/accessibility.md

Co-authored-by: Bernardo Belchior <[email protected]> Co-authored-by: Jose C Quintas Jr <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>

github-actions · 2025-09-16T11:15:07Z

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

JCQuintas · 2025-09-16T11:53:56Z

docs/data/charts/accessibility/accessibility.md

+
+# Accessibility
+
+<p class="description">Learn how the Charts implement accessibility features and guidelines, including keyboard navigation that follows international standards.</p>


Suggested change

<p class="description">Learn how the Charts implement accessibility features and guidelines, including keyboard navigation that follows international standards.</p>

<p class="description">Learn how Charts implement accessibility features and guidelines, including keyboard navigation that follows international standards.</p>

JCQuintas · 2025-09-16T11:56:36Z

docs/data/charts/accessibility/accessibility.md

+This feature is currently supported by line, bar, pie, scatter, and sparkline charts.
+
+This makes the SVG component focusable thanks to [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex).
+When focused, the charts highlight a value item that can be modified with arrow navigation.


Suggested change

When focused, the charts highlight a value item that can be modified with arrow navigation.

When focused, the chart highlights a value item that can be modified with arrow navigation.

alexfauquette · 2025-09-18T08:58:32Z

packages/x-charts/src/ChartsSurface/ChartsSurface.tsx

+  '&:focus': {
+    outline: 'none', // By default don't show focus on the SVG container
+  },
+  '&:focus-visible': {
+    // Show focus outline on the SVG container only when using keyboard navigation
+    outline: 'auto',
+    '&[data-has-focused-item=true]': {
+      // But not if the chart has a focused children item
+      outline: 'none',
+    },


@JCQuintas I went further with the focus display.

By relying on the :focus-visible the outlined is not display when the element get focused by click, but is visible when focused by Tab

Nice, interactions feels good now, thanks :D

JCQuintas

small docs suggestions, everything else looks good

docs/data/charts/accessibility/accessibility.md

alexfauquette added the scope: charts Changes related to the charts. label Aug 12, 2025

first implementation

d6dd42e

alexfauquette force-pushed the keyboard-navigation branch from a3f49fd to d6dd42e Compare August 13, 2025 14:12

fix TS and make sparkline-line focus visible

3cb42a7

alexfauquette added 4 commits August 14, 2025 10:43

self review

83acf89

docs:api

b54144d

some cleanup

db812d7

start documentation

a0848e1

alexfauquette added accessibility a11y type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Aug 21, 2025

alexfauquette changed the title ~~[charts][WIP] Introduce keyboard navigation~~ [charts] Introduce keyboard navigation Aug 21, 2025

alexfauquette marked this pull request as ready for review August 21, 2025 14:25

alexfauquette requested review from JCQuintas and bernardobelchior as code owners August 21, 2025 14:25

JCQuintas reviewed Aug 21, 2025

View reviewed changes

alexfauquette added 4 commits August 22, 2025 09:41

prettier

e30dee1

add comments and tests

780c2a0

renamings

41d8af8

scripts

34c5e57

alexfauquette requested a review from JCQuintas August 22, 2025 10:10

JCQuintas reviewed Aug 22, 2025

View reviewed changes

alexfauquette added 2 commits August 25, 2025 11:02

fix

50fb051

modify initial focus

8173991

bernardobelchior reviewed Sep 8, 2025

View reviewed changes

alexfauquette commented Sep 11, 2025

View reviewed changes

docs/data/charts/accessibility/accessibility.md Outdated Show resolved Hide resolved

alexfauquette and others added 4 commits September 11, 2025 16:39

Apply suggestions from code review

0683667

Co-authored-by: Bernardo Belchior <[email protected]> Co-authored-by: Jose C Quintas Jr <[email protected]> Signed-off-by: Alexandre Fauquette <[email protected]>

fix typo

24590ec

add basic demo

ae974da

scripts

8639c34

bernardobelchior approved these changes Sep 12, 2025

View reviewed changes

alexfauquette requested a review from JCQuintas September 15, 2025 15:17

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

JCQuintas reviewed Sep 16, 2025

View reviewed changes

alexfauquette added 2 commits September 18, 2025 09:20

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

df1096e

refin focus

302d411

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

alexfauquette commented Sep 18, 2025

View reviewed changes

JCQuintas approved these changes Sep 18, 2025

View reviewed changes

alexfauquette added 4 commits September 19, 2025 10:09

FIx TS error due to sankey

cf1dcce

inform about upcoming modification

ec366fe

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

a62690a

fix

4117d87

alexfauquette commented Sep 19, 2025

View reviewed changes

docs/data/charts/accessibility/accessibility.md Show resolved Hide resolved

more explicit warning

8e7536a

bernardobelchior approved these changes Sep 19, 2025

View reviewed changes

alexfauquette merged commit edfd946 into mui:master Sep 19, 2025
22 checks passed


		## Keyboard support

		Set `enableKeyboardNavigation` to `true` to enable the keyboard navigation on your charts.


		# Accessibility

		<p class="description">Learn how the Charts implement accessibility features and guidelines, including keyboard navigation that follows international standards.</p>

	<p class="description">Learn how the Charts implement accessibility features and guidelines, including keyboard navigation that follows international standards.</p>
	<p class="description">Learn how Charts implement accessibility features and guidelines, including keyboard navigation that follows international standards.</p>

	When focused, the charts highlight a value item that can be modified with arrow navigation.
	When focused, the chart highlights a value item that can be modified with arrow navigation.

Uh oh!

[charts] Introduce keyboard navigation #19155

[charts] Introduce keyboard navigation #19155

Uh oh!

Conversation

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

Uh oh!

Uh oh!

mui-bot commented Aug 12, 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 Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #19155 will not alter performance

Summary

Footnotes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexfauquette commented Sep 8, 2025

Uh oh!

bernardobelchior commented Sep 9, 2025

Uh oh!

bernardobelchior commented Sep 9, 2025

Uh oh!

Uh oh!

github-actions bot commented Sep 16, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JCQuintas left a comment

alexfauquette commented Aug 12, 2025 •

edited

Loading

mui-bot commented Aug 12, 2025 •

edited

Loading

codspeed-hq bot commented Aug 13, 2025 •

edited

Loading