[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.

Keyboard.focus.is.not.moving.to.the.Line.chart.in.Windows.mp4

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]

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}
/>