[charts] Keyboard focus is not moving to the 'Line chart' in Windows

[msftedad]

Steps to reproduce

Steps:

1. Open the URL: affectionate-matsumoto-ptdqw6 - CodeSandbox in the latest edge browser.
2. Focus will be present in the 'Demo.tsx' tab. Press tab key or F6 to move to the line chart.
3. Verify whether Keyboard focus is moving to the 'Line chart' or not.

Current behavior

Using tab or F6 key, Keyboard focus is not moving to the 'Line chart' in Windows.

https://github.com/user-attachments/assets/7effad41-9224-48f5-aadd-c97a4e18afab

Expected behavior

Keyboard focus should move to the 'Line chart' in Windows. Line charts should be accessible using tab or F6 key.

Context

Using tab or F6 key, Keyboard focus is not moving to the 'Line chart' in Windows. Keyboard Dependent users are not able to access the controls and perform related actions when keyboard focus does not move to interactive elements

Your environment

OS: Windows 11 Version 24H2(OS Build 26120.1930) Browser: Edge Version 135.0.3179.73 (Official build) (64-bit) URL: affectionate-matsumoto-ptdqw6 - CodeSandbox

Search keywords: Keyboard, Accessibility

[JCQuintas]

Hi @msftedad, I don't understand what is the goal of what you are trying to achieve.

In my understanding, you would be able to add a div around your chart and control the focus however you like. Eg: <div tabindex={0}><chart...></div>

Right now it is not possible to access the charts data in an accessible manner. Charts are primarily visual, so it is hard to translate that into a comprehensive text version.

The only alternative right now is for developers to provide an accessible title for their users.

[github-actions[bot]]

This issue has been inactive for 7 days. Please remove the stale label or leave a comment to keep it open. Otherwise, it will be closed in 5 days.

[msftedad]

Hi @JCQuintas, The keyboard focus is not moving to the whole line chart in output area. Will giving accessible title move the focus to the line charts?

[JCQuintas]

@msftedad You can simply add a tabindex property to the chart:

<LineChart
  ...
  tabindex={0}
/>

[github-actions[bot]]

This issue has been inactive for 7 days. Please remove the stale label or leave a comment to keep it open. Otherwise, it will be closed in 5 days.

[github-actions[bot]]

This issue has been closed due to 5 days of inactivity after being marked stale.

[msftedad]

Hi @JCQuintas, We got below response from PO team saying that

The <LineChart> component from @mui/x-charts does not support the tabIndex prop directly, as it is not part of the component’s accepted props. Attempting to pass tabIndex will result in a TypeScript error: Property 'tabIndex' does not exist on type 'LineChartProps'. This is because the component does not expose native focus management. ref https://mui.com/x/api/charts/line-chart/

[JCQuintas]

True, the props will be passed to the ChartsSurface nevertheless. You can also pass it to the slotProps.legend to focus on the legend.

https://codesandbox.io/p/sandbox/misty-shadow-jjh6qw?file=%2Fsrc%2FDemo.tsx%3A14%2C11

I've opened a PR to provide type support for adding tabIndex in those places https://github.com/mui/mui-x/pull/18344

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.