[charts] Let keyboard navigation avoid overflow and handle nullish values by alexfauquette · Pull Request #20757 · mui/mui-x

alexfauquette · 2025-12-23T12:39:43Z

Fix #20746

There are some edge-cases into handling undefined values due to arrays with different sizes.

To test this, I played with the https://deploy-preview-20757--material-ui-x.netlify.app/x/react-charts/lines/#skip-missing-points demo by adding enableKeyboardNavigation props

mui-bot · 2025-12-23T12:41:16Z

Deploy preview: https://deploy-preview-20757--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	▼-238B^(-0.07%)	▼-53B^(-0.05%)
@mui/x-charts-pro	▼-238B^(-0.05%)	▼-39B^(-0.03%)
@mui/x-charts-premium	▼-238B^(-0.05%)	▼-74B^(-0.05%)
@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 71921d9

codspeed-hq · 2025-12-23T13:01:13Z

CodSpeed Performance Report

Merging #20757 will not alter performance

_{Comparing alexfauquette:handle-null-values (71921d9) with master (ac33a80)¹}

Summary

✅ 14 untouched

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

Didn't mean to approve

bernardobelchior · 2025-12-24T10:08:23Z

Screen.Recording.2025-12-24.at.10.07.13.mov

alexfauquette · 2025-12-29T08:50:32Z

@bernardobelchior If I resume your question, it's:

When the next series does not have a value for the given index, should we move to the the next series with a value.

Examples

For example with the data in the following table, If I focus on series A at x=1, Arrow Down should the focus goes to :

series C with x=1 : We skip the series that don'ts have values at a given index
series B with x = 3 : We go to the next series but skip missing values
series B with x = 5 : We go to the next series but skip missing values. Since it's arrow down we search for values with a negative step

x	1	2	3	4	5
series A	3	4	null	null	null
series B	null	null	10	11	12
series C	8	null	null	null	8

The current implementation is the last one. I find it easier to navigate, because (IMO) it's the best way to split navigation between series and indexes.

Impact of the different solutions

With the current solution arrow up/down moves the focus from one series to the other. It can impact the item index, but it never skip series.

The proposed solution skip series when no data is available. So as long as you do not manage to find an index in common, you can not move to the next series. In the table bellow it's would not be possible to move from series A to B. Because focus on series A is trapped in x<=2 and series B can only be reached with x>=3 😈

…s available

JCQuintas · 2025-12-29T11:50:03Z

@alexfauquette the current solution is dependant on the current position, so it feels a bit non-deterministic.

In the video below, I just press "down" and it initially goes to red (same index), then to the end of yellow (last index), then to blue (last non-null index), then to red (i suppose it goes to the last non-null index before the blue index?)

Screen.Recording.2025-12-29.at.12.45.52.mov

This is confusing, and it happens in many variations. If I go down I should always pass through the same three(in this case) values, if I go up, I should pass through the same 3 values in the reverse order.

JCQuintas · 2025-12-29T11:53:03Z

I've also noticed we are using up as next series, shouldn't it be down for next series?

right/down next
left/top previous

we might need to adapt based on rtl eventually too 😅

alexfauquette · 2025-12-29T14:26:29Z

Resume of the issues

If you press arrow down, you end up in a loop, but after few steps.

If I go down I should always pass through the same three(in this case) values, if I go up, I should pass through the same 3 values in the reverse order.

That's not feasible, except if we keep in memory the history of last focused items. And not sure it's something we want.

Behavior if we respect the "loop consistency"

Here are two scenarios where you start from different points and only press arrow down. At some point both ends up on the same yellow item.

To always loop on the same 3 items, we need to have different behavior on this yellow item according to the item previously focused.

Why it's impossible

To respect this rule, we need to link each item of a series with a unique item of the next series. Which is not feasible if series don't have the same number of items. The simpler case being the following two series.

We can have a consistent loop for the second blue item. But for the first one?

first solution: we keep in memory the previous item and consistently loop on them. But when yellow is focused, you've now way to know where you will go since it depends from where you come from
second solution: we accept to have inconsistency, goes to yellow and from it loop with the last blue item

Conclusion

So the 3 solutions are

keep an history of focused item: sounds like over engineered and the behavior is trading some weird behavior for other weird behaviors
keep the current solution. Maybe with some improvement. Like not going from first to last item.
Allow focus to land on null values. but to do that we will need to find a way to visualize empty values. Since those are for bar/line we could display the axis highlight without focus item

bernardobelchior · 2026-01-02T11:22:29Z

I think the biggest issue with this behavior is that it requires users to have a mental representation of the series order so they can predict what the data point of the previous series will be.

I was searching through the ARIA APG, but couldn't find a good example to use in this case.

However, having memory also creates weird use cases where a user also needs to have a mental representation of where they come from to be able to predict where they're going next.

As such, I think the current behavior is acceptable since the alternatives aren't that much better.

The only change we might want to do is using the closest point instead of always the previous/next? Might be a bit more intuitive, but up for discussion.

JCQuintas

The current solution to use the axis highlight to display the current series even on null values looks good to me.

The behaviour is predictable and it is clear where the user currently is at.

nice work 👍

alexfauquette added 2 commits December 23, 2025 12:44

Let keyboard navigation skip null series

e69fb3c

skip landin on null values

7ec579b

alexfauquette requested a review from a team as a code owner December 23, 2025 12:39

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. scope: charts Changes related to the charts. labels Dec 23, 2025

bernardobelchior previously approved these changes Dec 24, 2025

View reviewed changes

alexfauquette mentioned this pull request Dec 24, 2025

[charts-pro] Add keyboard navigation to funnel #20766

Merged

alexfauquette requested a review from JCQuintas December 29, 2025 08:28

alexfauquette added 2 commits December 29, 2025 10:17

add test to prevent regression on losing focus when only one series i…

2ffb700

…s available

Merge remote-tracking branch 'upstream/master' into handle-null-values

50efd02

alexfauquette mentioned this pull request Dec 29, 2025

[charts] Enable keyboard navigation in radar chart #20765

Merged

Allow focusing on null value

71921d9

alexfauquette changed the title ~~[charts] Let keyboard navigation skip nullable value~~ [charts] Let keyboard navigation avoid overflow and handle nullish values Dec 30, 2025

JCQuintas approved these changes Jan 2, 2026

View reviewed changes

alexfauquette mentioned this pull request Jan 5, 2026

[charts-pro] Save heatmap data as a Map #20790

Closed

alexfauquette merged commit 0fb2b7b into mui:master Jan 6, 2026
22 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[charts] Let keyboard navigation avoid overflow and handle nullish values#20757

[charts] Let keyboard navigation avoid overflow and handle nullish values#20757
alexfauquette merged 5 commits intomui:masterfrom
alexfauquette:handle-null-values

alexfauquette commented Dec 23, 2025 •

edited

Loading

Uh oh!

mui-bot commented Dec 23, 2025 •

edited

Loading

Uh oh!

codspeed-hq bot commented Dec 23, 2025 •

edited

Loading

Uh oh!

bernardobelchior commented Dec 24, 2025

Uh oh!

alexfauquette commented Dec 29, 2025 •

edited

Loading

Uh oh!

JCQuintas commented Dec 29, 2025

Uh oh!

JCQuintas commented Dec 29, 2025

Uh oh!

alexfauquette commented Dec 29, 2025

Uh oh!

bernardobelchior commented Jan 2, 2026

Uh oh!

JCQuintas left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

CodSpeed Performance Report

Merging #20757 will not alter performance

Summary

Footnotes

Uh oh!

bernardobelchior commented Dec 24, 2025

Uh oh!

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

Uh oh!

Examples

Impact of the different solutions

Uh oh!

JCQuintas commented Dec 29, 2025

Uh oh!

JCQuintas commented Dec 29, 2025

Uh oh!

alexfauquette commented Dec 29, 2025

Resume of the issues

Behavior if we respect the "loop consistency"

Why it's impossible

Conclusion

Uh oh!

bernardobelchior commented Jan 2, 2026

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

alexfauquette commented Dec 23, 2025 •

edited

Loading

mui-bot commented Dec 23, 2025 •

edited

Loading

codspeed-hq bot commented Dec 23, 2025 •

edited

Loading

alexfauquette commented Dec 29, 2025 •

edited

Loading