Skip to content

[charts] Remove usage of focus outline for item highlight#19856

Merged
alexfauquette merged 6 commits into
mui:masterfrom
alexfauquette:bar-keyboard-highlight
Dec 10, 2025
Merged

[charts] Remove usage of focus outline for item highlight#19856
alexfauquette merged 6 commits into
mui:masterfrom
alexfauquette:bar-keyboard-highlight

Conversation

@alexfauquette

@alexfauquette alexfauquette commented Oct 8, 2025

Copy link
Copy Markdown
Member

Fix #19754

I moved all the the focus elements outside of their plot.

The only exception is the pie chart. But to do it properly I will have to move the pie layout computation in the seriesLayout selector

@alexfauquette alexfauquette added the scope: charts Changes related to the charts. label Oct 8, 2025
@mui-bot

mui-bot commented Oct 8, 2025

Copy link
Copy Markdown

Deploy preview: https://deploy-preview-19856--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%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 🔺+829B(+0.24%) 🔺+230B(+0.22%)
@mui/x-charts-pro 🔺+829B(+0.18%) 🔺+225B(+0.17%)
@mui/x-charts-premium 🔺+829B(+0.19%) 🔺+248B(+0.19%)
@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 28d23d8

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 13, 2025
@github-actions

Copy link
Copy Markdown
Contributor

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

@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 8, 2025
@codspeed-hq

codspeed-hq Bot commented Dec 8, 2025

Copy link
Copy Markdown

CodSpeed Performance Report

Merging #19856 will not alter performance

Comparing alexfauquette:bar-keyboard-highlight (28d23d8) with master (d72d0f4)1

Summary

✅ 13 untouched

Footnotes

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

@alexfauquette alexfauquette added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Dec 9, 2025
@alexfauquette alexfauquette marked this pull request as ready for review December 9, 2025 13:33
@alexfauquette alexfauquette requested review from a team and prakhargupta1 as code owners December 9, 2025 13:33
Comment on lines +93 to +95
// import { FocusedBar } from '@mui/x-charts/BarChart';
import { LineFocusedMark } from '@mui/x-charts/LineChart';
import { ScatterFocusedMark } from '@mui/x-charts/ScatterChart';

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Should we follow the same pattern on all focused mark?

Suggested change
// import { FocusedBar } from '@mui/x-charts/BarChart';
import { LineFocusedMark } from '@mui/x-charts/LineChart';
import { ScatterFocusedMark } from '@mui/x-charts/ScatterChart';
import { FocusedBar } from '@mui/x-charts/BarChart';
import { FocusedMark } from '@mui/x-charts/LineChart';
import { FocusedMark } from '@mui/x-charts/ScatterChart';

Or

Suggested change
// import { FocusedBar } from '@mui/x-charts/BarChart';
import { LineFocusedMark } from '@mui/x-charts/LineChart';
import { ScatterFocusedMark } from '@mui/x-charts/ScatterChart';
import { FocusedBar } from '@mui/x-charts/BarChart';
import { FocusedLineMark } from '@mui/x-charts/LineChart';
import { FocusedScatterMark } from '@mui/x-charts/ScatterChart';

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

The other option would be BarFocusedItem to keep consistency with "all bar element start with Bar". But it's less expressive

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

It depends on what it aggregates on I suppose. Since this doc is standalone, it feels like we should aggregate on the Focused which is the common ground

@prakhargupta1 prakhargupta1 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The bar highlight looks quite good now! 👏
All of these refinements might call for a blog post on charts accessibility!

@alexfauquette alexfauquette merged commit df15506 into mui:master Dec 10, 2025
22 checks passed
A-s-h-o-k pushed a commit to A-s-h-o-k/mui-x that referenced this pull request Dec 14, 2025
mapache-salvaje pushed a commit to mapache-salvaje/mui-x that referenced this pull request Dec 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[charts] Improve bar chart focus outline

4 participants