[Donut Chart]: Donut Chart is not keyboard accessible

[amdev138]

Describe the bug

Hi team,

I see in recharts storybook, they have a way make the donut charts keyboard accessible. Please see either:

1. recharts storybook > Pie > CustomActiveShapePiechart
2. Alternatively you can navigate directly to the iframe: custom-active-shape-pie-chart

However, I could not seem to get this to work through the react wrapper. I suspect it may be due to this rootTabIndex always set to -1, PieChart.tsx#L316, but I could not verify that.

Please help to fix or find a solution to make this chart keyboard accessible.

Thanks!

Isolated Example

No response

Reproduction steps

1. Find the storybook links in the description of this ticket, tab to the chart container, then use the arrow keys to traverse the pie chart.
2. Open the ui5-webcomponents-react storybook and try the same. Here it will not be possible to traverse the pie chart with the keyboard.

Expected Behaviour

Developers should be able to leverage the keyboard accessibility that recharts seems to offer.

Screenshots or Videos

No response

UI5 Web Components for React Version

main

UI5 Web Components Version

main

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

SF

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @amdev138,

Recharts was recently updated to version 3, which introduces the accessibilityLayer as a default feature across all charts. This change is not present in v2, which likely explains the difference in behavior you're seeing.

We've already started migrating our charts to v3, but I can't give a definitive timeline for completion yet. We're facing some challenges with custom implementations that are no longer compatible. You can track our progress here.