add support for pie chart segment aria label

Author: pan-kot

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -126,7 +126,7 @@ Supported Highcharts versions:
       "description": "An object that contains all of the localized strings required by the component.",
       "i18nTag": true,
       "inlineType": {
-        "name": "BaseI18nStrings",
+        "name": "CartesianI18nStrings",
         "properties": [
           {
             "name": "chartAccessibleDescription",
@@ -188,7 +188,7 @@ Supported Highcharts versions:
       },
       "name": "i18nStrings",
       "optional": true,
-      "type": "BaseI18nStrings",
+      "type": "CartesianI18nStrings",
     },
     {
       "defaultValue": "false",
@@ -276,7 +276,7 @@ Supported types:
 * [area](https://api.highcharts.com/highcharts/series.area).
 * [areaspline](https://api.highcharts.com/highcharts/series.areaspline).
 * [column](https://api.highcharts.com/highcharts/series.column).
-* [errorbar](https://api.highcharts.com/highcharts/series.errorbar).
+* [errorbar](https://api.highcharts.com/highcharts/series.errorbar) - requires "highcharts/highcharts-more" module.
 * [line](https://api.highcharts.com/highcharts/series.line).
 * [scatter](https://api.highcharts.com/highcharts/series.scatter).
 * [spline](https://api.highcharts.com/highcharts/series.spline).
@@ -637,7 +637,7 @@ Supported Highcharts versions:
       "description": "An object that contains all of the localized strings required by the component.",
       "i18nTag": true,
       "inlineType": {
-        "name": "BaseI18nStrings",
+        "name": "PieI18nStrings",
         "properties": [
           {
             "name": "chartAccessibleDescription",
@@ -670,27 +670,22 @@ Supported Highcharts versions:
             "type": "string",
           },
           {
-            "name": "seriesFilterLabel",
-            "optional": true,
-            "type": "string",
-          },
-          {
-            "name": "seriesFilterPlaceholder",
+            "name": "segmentAccessibleDescription",
             "optional": true,
             "type": "string",
           },
           {
-            "name": "seriesFilterSelectedAriaLabel",
+            "name": "seriesFilterLabel",
             "optional": true,
             "type": "string",
           },
           {
-            "name": "xAxisAccessibleDescription",
+            "name": "seriesFilterPlaceholder",
             "optional": true,
             "type": "string",
           },
           {
-            "name": "yAxisAccessibleDescription",
+            "name": "seriesFilterSelectedAriaLabel",
             "optional": true,
             "type": "string",
           },
@@ -699,7 +694,7 @@ Supported Highcharts versions:
       },
       "name": "i18nStrings",
       "optional": true,
-      "type": "BaseI18nStrings",
+      "type": "PieI18nStrings",
     },
     {
       "description": "Description of the inner chart area. Only supported for donut series.",

src/cartesian-chart/interfaces.ts

@@ -29,7 +29,7 @@ export interface CartesianChartProps extends CoreTypes.BaseChartOptions, CoreTyp
    * * [area](https://api.highcharts.com/highcharts/series.area).
    * * [areaspline](https://api.highcharts.com/highcharts/series.areaspline).
    * * [column](https://api.highcharts.com/highcharts/series.column).
-   * * [errorbar](https://api.highcharts.com/highcharts/series.errorbar).
+   * * [errorbar](https://api.highcharts.com/highcharts/series.errorbar) - requires "highcharts/highcharts-more" module.
    * * [line](https://api.highcharts.com/highcharts/series.line).
    * * [scatter](https://api.highcharts.com/highcharts/series.scatter).
    * * [spline](https://api.highcharts.com/highcharts/series.spline).
@@ -106,6 +106,12 @@ export interface CartesianChartProps extends CoreTypes.BaseChartOptions, CoreTyp
    * A callback, triggered when series visibility changes as result of user interacting with the legend or filter.
    */
   onChangeVisibleSeries?: NonCancelableEventHandler<{ visibleSeries: string[] }>;
+
+  /**
+   * An object that contains all of the localized strings required by the component.
+   * @i18n
+   */
+  i18nStrings?: CoreTypes.CartesianI18nStrings;
 }
 
 export namespace CartesianChartProps {

src/core/__tests__/chart-core-axes.test.tsx

@@ -62,11 +62,7 @@ function optionsContaining({
 }) {
   return objectContainingDeep({
     options: {
-      xAxis: [
-        {
-          title: { text: xTitle },
-        },
-      ],
+      xAxis: [{ title: { text: xTitle } }],
       yAxis: [
         {
           title: { text: yTitle },

src/core/__tests__/chart-core-navigation-pie.test.tsx

@@ -87,7 +87,7 @@ describe("CoreChart: navigation, pie charts", () => {
     focusApplication();
     keyDown(keyCode);
 
-    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P1Pie series10");
   });
 
@@ -103,7 +103,7 @@ describe("CoreChart: navigation, pie charts", () => {
     focusApplication();
     keyDown(keyCode);
 
-    expect(describeFocusedElement()).toBe("button:P3, 60. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P3, 60. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P3Pie series60");
   });
 
@@ -117,22 +117,22 @@ describe("CoreChart: navigation, pie charts", () => {
     focusApplication();
     keyDown(KeyCode.home);
 
-    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P1Pie series10");
 
     keyDown(keyCode);
 
-    expect(describeFocusedElement()).toBe("button:P2, 30. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P2, 30. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P2Pie series30");
 
     keyDown(keyCode);
 
-    expect(describeFocusedElement()).toBe("button:P3, 60. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P3, 60. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P3Pie series60");
 
     keyDown(keyCode);
 
-    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P1Pie series10");
   });
 
@@ -146,22 +146,22 @@ describe("CoreChart: navigation, pie charts", () => {
     focusApplication();
     keyDown(KeyCode.end);
 
-    expect(describeFocusedElement()).toBe("button:P3, 60. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P3, 60. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P3Pie series60");
 
     keyDown(keyCode);
 
-    expect(describeFocusedElement()).toBe("button:P2, 30. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P2, 30. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P2Pie series30");
 
     keyDown(keyCode);
 
-    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P1Pie series10");
 
     keyDown(keyCode);
 
-    expect(describeFocusedElement()).toBe("button:P3, 60. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P3, 60. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P3Pie series60");
   });
 
@@ -171,7 +171,7 @@ describe("CoreChart: navigation, pie charts", () => {
     focusApplication();
     keyDown(KeyCode.enter);
 
-    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P1Pie series10");
 
     keyDown(KeyCode.escape);
@@ -186,7 +186,7 @@ describe("CoreChart: navigation, pie charts", () => {
     focusApplication();
     keyDown(KeyCode.enter);
 
-    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series.[true,false]");
+    expect(describeFocusedElement()).toBe("button:P1, 10. Pie series[true,false]");
     expect(wrapper.findTooltip()!.getElement().textContent).toBe("P1Pie series10");
     expect(wrapper.findTooltip()!.findDismissButton()).toBe(null);
 

src/core/chart-api/chart-extra-context.tsx

@@ -3,6 +3,7 @@
 
 import type Highcharts from "highcharts";
 
+import { ChartLabels } from "../i18n-utils";
 import { ChartHighlightProps, CoreLegendItem, Rect } from "../interfaces";
 import { getGroupRect, isSeriesStacked } from "../utils";
 
@@ -27,6 +28,7 @@ export namespace ChartExtraContext {
     legendEnabled: boolean;
     tooltipEnabled: boolean;
     keyboardNavigationEnabled: boolean;
+    labels: ChartLabels;
   }
 
   export interface Handlers {
@@ -57,6 +59,7 @@ export function createChartContext(): ChartExtraContext {
       legendEnabled: false,
       tooltipEnabled: false,
       keyboardNavigationEnabled: false,
+      labels: {},
     },
     handlers: {},
     state: {},

src/core/chart-api/index.tsx

@@ -237,8 +237,9 @@ export class ChartAPI {
         this.chartExtraNavigation.announceElement(getGroupAccessibleDescription(group), false);
       },
       onFocusPoint: (point: Highcharts.Point) => {
+        const labels = this.context.settings.labels;
         this.highlightActions(point, true);
-        this.chartExtraNavigation.announceElement(getPointAccessibleDescription(point), false);
+        this.chartExtraNavigation.announceElement(getPointAccessibleDescription(point, labels), false);
       },
       onBlur: () => this.clearChartHighlight(),
       onActivateGroup: () => {
@@ -251,8 +252,9 @@ export class ChartAPI {
       onActivatePoint: () => {
         const current = this.chartExtraTooltip.get();
         if (current.point) {
+          const labels = this.context.settings.labels;
           this.chartExtraTooltip.pinTooltip();
-          this.chartExtraNavigation.announceElement(getPointAccessibleDescription(current.point), true);
+          this.chartExtraNavigation.announceElement(getPointAccessibleDescription(current.point, labels), true);
         }
       },
     };

src/core/chart-core.tsx

@@ -8,7 +8,6 @@ import HighchartsReact from "highcharts-react-official";
 
 import { getIsRtl, useMergeRefs, useUniqueId } from "@cloudscape-design/component-toolkit/internal";
 import { isDevelopment } from "@cloudscape-design/component-toolkit/internal";
-import { useInternalI18n } from "@cloudscape-design/components/internal/do-not-use/i18n";
 import Spinner from "@cloudscape-design/components/spinner";
 
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
@@ -25,8 +24,9 @@ import { ChartFooter, ChartHeader } from "./components/core-slots";
 import { ChartTooltip } from "./components/core-tooltip";
 import { VerticalAxisTitle } from "./components/core-vertical-axis-title";
 import { getFormatter } from "./formatters";
+import { useChartI18n } from "./i18n-utils";
 import { CoreChartProps } from "./interfaces";
-import { getFormattedPointDescription } from "./utils";
+import { getPointAccessibleDescription } from "./utils";
 
 import styles from "./styles.css.js";
 import testClasses from "./test-classes/styles.css.js";
@@ -65,18 +65,18 @@ export function InternalCoreChart({
   ...rest
 }: CoreChartProps & InternalBaseComponentProps) {
   const highcharts = rest.highcharts as null | typeof Highcharts;
-  const i18n = useInternalI18n("[charts]");
-
-  const settings = {
+  const labels = useChartI18n({ ariaLabel, ariaDescription, i18nStrings });
+  const context = {
     chartId: useUniqueId(),
     noDataEnabled: !!noDataOptions,
     legendEnabled: legendOptions?.enabled !== false,
     tooltipEnabled: tooltipOptions?.enabled !== false,
     keyboardNavigationEnabled: keyboardNavigation,
+    labels,
   };
   const handlers = { onHighlight, onClearHighlight, onVisibleItemsChange };
   const state = { visibleItems };
-  const api = useChartAPI(settings, handlers, state);
+  const api = useChartAPI(context, handlers, state);
 
   const rootClassName = clsx(testClasses.root, styles.root, fitHeight && styles["root-fit-height"], className);
   const rootRef = useRef<HTMLDivElement>(null);
@@ -109,15 +109,6 @@ export function InternalCoreChart({
     );
   }
 
-  const aria = {
-    chartLabel: ariaLabel,
-    chartDescription: ariaDescription,
-    // We reuse existing translations as passing for now, but it is possible to introduce new i18n strings that
-    // are parametrized with axes names, and more.
-    chartContainerLabel: i18n("i18nStrings.chartAriaRoleDescription", i18nStrings?.chartAccessibleDescription),
-    chartXAxisLabel: i18n("i18nStrings.xAxisAriaRoleDescription", i18nStrings?.xAxisAccessibleDescription),
-    chartYAxisLabel: i18n("i18nStrings.yAxisAriaRoleDescription", i18nStrings?.yAxisAccessibleDescription),
-  };
   const apiOptions = api.getOptions();
   const inverted = !!options.chart?.inverted;
   const isRtl = () => getIsRtl(rootRef?.current);
@@ -182,18 +173,22 @@ export function InternalCoreChart({
               accessibility: {
                 // The default chart title is disabled by default to prevent the default "Chart" in the screen-reader detail.
                 defaultChartTitle: "",
-                chartContainerLabel: aria.chartLabel,
-                svgContainerLabel: aria.chartContainerLabel,
+                chartContainerLabel: labels.chartLabel,
+                svgContainerLabel: labels.chartContainerLabel,
                 // We used {names[0]} to inject the axis title, see: https://api.highcharts.com/highcharts/lang.accessibility.axis.xAxisDescriptionSingular.
                 axis: {
-                  xAxisDescriptionSingular: aria.chartXAxisLabel ? `${aria.chartXAxisLabel}, {names[0]}` : undefined,
-                  yAxisDescriptionSingular: aria.chartYAxisLabel ? `${aria.chartYAxisLabel}, {names[0]}` : undefined,
+                  xAxisDescriptionSingular: labels.chartXAxisLabel
+                    ? `${labels.chartXAxisLabel}, {names[0]}`
+                    : undefined,
+                  yAxisDescriptionSingular: labels.chartYAxisLabel
+                    ? `${labels.chartYAxisLabel}, {names[0]}`
+                    : undefined,
                 },
                 ...options.lang?.accessibility,
               },
             },
             accessibility: {
-              description: aria.chartDescription,
+              description: labels.chartDescription,
               screenReaderSection: {
                 // We use custom before-message to remove detail that are currently not supported with our i18n.
                 // See: https://api.highcharts.com/highcharts/accessibility.screenReaderSection.beforeChartFormat.
@@ -206,7 +201,7 @@ export function InternalCoreChart({
               keyboardNavigation: options.accessibility?.keyboardNavigation ?? { enabled: !keyboardNavigation },
               point: {
                 // Point description formatter is overridden to respect custom axes value formatters.
-                descriptionFormatter: getFormattedPointDescription,
+                descriptionFormatter: (point) => getPointAccessibleDescription(point, labels),
                 ...options.accessibility?.point,
               },
             },
@@ -312,7 +307,7 @@ export function InternalCoreChart({
         }}
         navigator={navigator}
         legend={
-          settings.legendEnabled ? (
+          context.legendEnabled ? (
             <ChartLegend {...legendOptions} position={legendPosition} api={api} i18nStrings={i18nStrings} />
           ) : null
         }
@@ -333,7 +328,7 @@ export function InternalCoreChart({
         }
       />
 
-      {settings.tooltipEnabled && (
+      {context.tooltipEnabled && (
         <ChartTooltip
           {...tooltipOptions}
           i18nStrings={i18nStrings}
@@ -342,7 +337,7 @@ export function InternalCoreChart({
         />
       )}
 
-      {settings.noDataEnabled && <ChartNoData {...noDataOptions} i18nStrings={i18nStrings} api={api} />}
+      {context.noDataEnabled && <ChartNoData {...noDataOptions} i18nStrings={i18nStrings} api={api} />}
     </div>
   );
 }