add stories

Author: Lukas742

packages/charts/src/components/DonutChart/DonutChart.mdx

@@ -3,6 +3,7 @@ import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './DonutChart.stories';
 import LegendStory from '../../resources/LegendConfig.mdx';
+import KeyboardNavigationStory from '../../resources/KeyboardNavigation.mdx';
 
 <Meta of={ComponentStories} />
 
@@ -45,6 +46,8 @@ import LegendStory from '../../resources/LegendConfig.mdx';
 
 <Canvas of={ComponentStories.WithActiveShape} />
 
+<KeyboardNavigationStory of={ComponentStories.KeyboardNavigation} />
+
 ### Hide labels
 
 <Canvas of={ComponentStories.HideLabels} />

packages/charts/src/components/DonutChart/DonutChart.stories.tsx

@@ -1,6 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
-import { legendConfig, simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
+import {
+  legendConfig,
+  simpleDataSet,
+  simpleDataSetWithSmallValues,
+  tooltipConfig,
+  keyboardNavigationStory,
+} from '../../resources/DemoProps.js';
 import { DonutChart } from './index.js';
 
 const meta = {
@@ -75,28 +81,6 @@ export const WithFormatter: Story = {
   },
 };
 
-export const HideLabels: Story = {
-  args: {
-    measure: {
-      accessor: 'users',
-      hideDataLabel: (chartConfig) => {
-        if (chartConfig.percent < 0.01) {
-          return true;
-        }
-      },
-    },
-    dataset: simpleDataSetWithSmallValues,
-  },
-};
-
-export const WithCustomTooltipConfig: Story = {
-  args: tooltipConfig,
-};
-
-export const WithCustomLegendConfig: Story = {
-  args: legendConfig,
-};
-
 export const WithActiveShape: Story = {
   args: {
     chartConfig: {
@@ -120,3 +104,27 @@ export const WithActiveShape: Story = {
     return <DonutChart {...args} chartConfig={{ ...args.chartConfig, activeSegment }} onClick={handleChartClick} />;
   },
 };
+
+export const KeyboardNavigation: Story = keyboardNavigationStory(DonutChart);
+
+export const HideLabels: Story = {
+  args: {
+    measure: {
+      accessor: 'users',
+      hideDataLabel: (chartConfig) => {
+        if (chartConfig.percent < 0.01) {
+          return true;
+        }
+      },
+    },
+    dataset: simpleDataSetWithSmallValues,
+  },
+};
+
+export const WithCustomTooltipConfig: Story = {
+  args: tooltipConfig,
+};
+
+export const WithCustomLegendConfig: Story = {
+  args: legendConfig,
+};

packages/charts/src/components/PieChart/PieChart.mdx

@@ -3,6 +3,7 @@ import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import TooltipStory from '../../resources/TooltipConfig.mdx';
 import * as ComponentStories from './PieChart.stories';
 import LegendStory from '../../resources/LegendConfig.mdx';
+import KeyboardNavigationStory from '../../resources/KeyboardNavigation.mdx';
 
 <Meta of={ComponentStories} />
 
@@ -33,6 +34,12 @@ import LegendStory from '../../resources/LegendConfig.mdx';
 
 <Canvas of={ComponentStories.WithFormatter} />
 
+### With highlighted active segment
+
+<Canvas of={ComponentStories.WithActiveShape} />
+
+<KeyboardNavigationStory of={ComponentStories.KeyboardNavigation} />
+
 ### Hide labels
 
 <Canvas of={ComponentStories.HideLabels} />

packages/charts/src/components/PieChart/PieChart.stories.tsx

@@ -1,6 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
-import { legendConfig, simpleDataSet, simpleDataSetWithSmallValues, tooltipConfig } from '../../resources/DemoProps.js';
+import {
+  legendConfig,
+  simpleDataSet,
+  simpleDataSetWithSmallValues,
+  tooltipConfig,
+  keyboardNavigationStory,
+} from '../../resources/DemoProps.js';
 import { PieChart } from './index.js';
 
 const meta = {
@@ -91,6 +97,8 @@ export const WithActiveShape: Story = {
   },
 };
 
+export const KeyboardNavigation: Story = keyboardNavigationStory(PieChart);
+
 export const HideLabels: Story = {
   args: {
     measure: {

packages/charts/src/resources/DemoProps.tsx

@@ -1,4 +1,6 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';
+import type { ComponentType } from 'react';
+import { useEffect, useState } from 'react';
 import { DefaultTooltipContent } from 'recharts';
 import type { TooltipProps } from 'recharts';
 import type { IChartBaseProps } from '../interfaces/IChartBaseProps.js';
@@ -667,3 +669,34 @@ export const CustomTooltipContent = ({ payload, ...rest }: TooltipProps<number,
 };
 
 CustomTooltipContent.displayName = 'CustomTooltipContent';
+
+export function keyboardNavigationStory(Chart: ComponentType<any>) {
+  return {
+    args: {
+      chartConfig: {
+        accessibilityLayer: true,
+        activeSegment: 0,
+        showActiveSegmentDataLabel: true,
+      },
+    },
+    render(args) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const [activeSegment, setActiveSegment] = useState(args.chartConfig.activeSegment);
+      const handleDataPointClick = (e) => {
+        const { dataIndex } = e.detail;
+        if (dataIndex != null) {
+          setActiveSegment(dataIndex);
+        }
+      };
+
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useEffect(() => {
+        setActiveSegment(args.chartConfig.activeSegment);
+      }, [args.chartConfig.activeSegment]);
+
+      return (
+        <Chart {...args} chartConfig={{ ...args.chartConfig, activeSegment }} onDataPointClick={handleDataPointClick} />
+      );
+    },
+  };
+}

packages/charts/src/resources/KeyboardNavigation.mdx

@@ -0,0 +1,41 @@
+import { Canvas } from '@storybook/addon-docs/blocks';
+
+### Keyboard Navigation
+
+Enable keyboard navigation for chart sectors via `chartConfig.accessibilityLayer`. When enabled, users can Tab into the chart, use arrow keys to navigate between sectors, and press Enter or Space to select a sector.
+
+Use `chartConfig.activeSegment` to highlight the selected sector. Space activates on key release, allowing users to hold Space, navigate with arrow keys, and release to select the final sector.
+
+<Canvas of={props.of} />
+
+<details>
+
+<summary>Show Code</summary>
+
+```tsx
+function ChartComponent() {
+  const [activeSegment, setActiveSegment] = useState(0);
+  const handleDataPointClick = (e) => {
+    const { dataIndex } = e.detail;
+    if (dataIndex != null) {
+      setActiveSegment(dataIndex);
+    }
+  };
+
+  return (
+    <PieChart
+      dataset={dataset}
+      dimension={{ accessor: 'name' }}
+      measure={{ accessor: 'users' }}
+      chartConfig={{
+        accessibilityLayer: true,
+        activeSegment,
+        showActiveSegmentDataLabel: true,
+      }}
+      onDataPointClick={handleDataPointClick}
+    />
+  );
+}
+```
+
+</details>