[JCQuintas]

Problem

When navigating a chart with the keyboard, clicking outside the chart on a non-focusable element (empty page area, a plain div, ...) left the focus indicator visible.

focusout clears the keyboard focus state only when relatedTarget is a Node:

if (root && next instanceof Node && !root.contains(next)) { /* clear focus */ }

A click on a non-focusable element gives relatedTarget === null, so the condition was never met and keyboardNavigation.isFocused stayed true. The bug was invisible in the existing test because it clicks a <button>, which is focusable and therefore provides a relatedTarget.

Fix

Invert the guard: bail out only when focus stays inside the chart. Every other case, including a null relatedTarget, clears the focus state.

Tests

Added a browser test that clicks a non-focusable element outside the chart and asserts the focus indicator is gone. It fails on master and passes with the fix.

[code-infra-dashboard]

Deploy preview

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

Bundle size

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	▼-10B(0.00%)	▼-4B(0.00%)
@mui/x-charts-pro	▼-10B(0.00%)	▼-4B(0.00%)
@mui/x-charts-premium	▼-10B(0.00%)	▼-4B(0.00%)
@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%)
@mui/x-scheduler	0B(0.00%)	0B(0.00%)
@mui/x-scheduler-premium	0B(0.00%)	0B(0.00%)
@mui/x-chat	0B(0.00%)	0B(0.00%)
@mui/x-license	0B(0.00%)	0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,605.01 ms -83.76 ms^{(-5.0%, p<0.001)} | Renders: 63 ⁽⁺⁰⁾ | Paint: 2,162.18 ms -319.30 ms^(-12.9%)

Test	Duration	Renders
ScatterChartPro with big data amount (batch renderer)	26.35 ms 🔺+12.31 ms(+87.7%, p<0.001)	2 (+0)
RadialLineChart with big data amount	23.80 ms 🔺+4.91 ms(+26.0%, p=0.048)	2 (+0)
SparkLineChart grid of 100 instances	90.24 ms ▼-41.73 ms(-31.6%, p<0.001)	1 (+0)
BarChartPro with big data amount	26.57 ms ▼-5.88 ms(-18.1%, p<0.001)	2 (+0)
PieChart with big data amount	7.05 ms ▼-3.23 ms(-31.4%, p<0.001)	2 (+0)

…and 2 more (+19 within noise) — details

Metric alarms

Test	Metric	Change
ScatterChartPro with big data amount (batch renderer)	bench:paint	🔺 +10.85 ms
RadialLineChart with big data amount	bench:paint	🔺 +16.64 ms

---

Check out the code infra dashboard for more information about this PR.

[LukasTy]

Nice fix. 👍
A side note: WDYT about introducing an initially focused element?
Currently, if you focus on a chart, there is no visual indicator in it to indicate that it happened until you start navigating the chart.

[JCQuintas]

Nice fix. 👍 A side note: WDYT about introducing an initially focused element? Currently, if you focus on a chart, there is no visual indicator in it to indicate that it happened until you start navigating the chart.

Could be a good idea. We are generally improving the accessibility, so it makes sense.

There is this PR #23195 that addes "clicking to focus". I'll keep it in mind