chore(refactor): refactors A11Y screen reader description generation into chart selector factories

e2e/tests_a11y/goal_chart_a11y.test.ts

@@ -14,21 +14,21 @@ test.describe('Goal Chart Accessibility', () => {
   test('should generate correct a11y summary for goal chart', async ({ page }) => {
     await common.testA11ySummary(page)(
       'http://localhost:9001/?path=/story/goal-alpha--minimal-goal',
-      'Revenue 2020 YTD  (thousand USD)  Chart type:goal chartMinimum:0Maximum:300Target:260Value:280',
+      'Chart type:goal chartMajor label:Revenue 2020 YTD  Minor label:(thousand USD)  Minimum:0Maximum:300Target:260Value:280',
     );
   });
 
   test('should generate correct a11y summary for gauge chart', async ({ page }) => {
     await common.testA11ySummary(page)(
       'http://localhost:9001/?path=/story/goal-alpha--gauge-with-target',
-      'Revenue 2020 YTD  (thousand USD)  Chart type:goal chartMinimum:0Maximum:300Target:260Value:170',
+      'Chart type:goal chartMajor label:Revenue 2020 YTD  Minor label:(thousand USD)  Minimum:0Maximum:300Target:260Value:170',
     );
   });
 
   test('should generate correct a11y summary for goal chart without target', async ({ page }) => {
     await common.testA11ySummary(page)(
       'http://localhost:9001/?path=/story/goal-alpha--gaps',
-      'Revenue 2020 YTD  (thousand USD)  Chart type:goal chartMinimum:0Maximum:300Target:260Value:280',
+      'Chart type:goal chartMajor label:Revenue 2020 YTD  Minor label:(thousand USD)  Minimum:0Maximum:300Target:260Value:280',
     );
   });
 

packages/charts/api/charts.api.md

@@ -246,7 +246,7 @@ export interface ArrayNode extends NodeDescriptor {
 }
 
 // @public
-export const Axis: FC<SFProps<AxisSpec, "chartType" | "specType", "position" | "hide" | "groupId" | "showOverlappingTicks" | "showOverlappingLabels" | "timeAxisLayerCount", "style" | "title" | "domain" | "maximumFractionDigits" | "ticks" | "tickFormat" | "gridLine" | "labelFormat" | "integersOnly" | "showDuplicatedTicks", "id">>;
+export const Axis: FC<SFProps<AxisSpec, "chartType" | "specType", "position" | "hide" | "groupId" | "showOverlappingTicks" | "showOverlappingLabels" | "timeAxisLayerCount", "style" | "title" | "domain" | "maximumFractionDigits" | "tickFormat" | "ticks" | "gridLine" | "labelFormat" | "integersOnly" | "showDuplicatedTicks", "id">>;
 
 // @public (undocumented)
 export type AxisId = string;
@@ -3201,7 +3201,7 @@ export type TooltipAction<D extends BaseDatum = Datum, SI extends SeriesIdentifi
 };
 
 // @public
-export const tooltipBuildProps: BuildProps<TooltipSpec<any, SeriesIdentifier>, "id" | "chartType" | "specType", "type" | "body" | "footer" | "header" | "actions" | "selectionPrompt" | "actionsLoading" | "noActionsLoaded" | "snap" | "showNullValues" | "actionPrompt" | "pinningPrompt" | "maxTooltipItems" | "maxVisibleTooltipItems", "sort" | "offset" | "unit" | "headerFormatter" | "customTooltip" | "stickTo" | "placement" | "fallbackPlacements" | "boundary" | "boundaryPadding", never>;
+export const tooltipBuildProps: BuildProps<TooltipSpec<any, SeriesIdentifier>, "id" | "chartType" | "specType", "type" | "body" | "footer" | "header" | "actions" | "selectionPrompt" | "actionsLoading" | "noActionsLoaded" | "snap" | "showNullValues" | "actionPrompt" | "pinningPrompt" | "maxTooltipItems" | "maxVisibleTooltipItems", "sort" | "offset" | "headerFormatter" | "unit" | "customTooltip" | "stickTo" | "placement" | "fallbackPlacements" | "boundary" | "boundaryPadding", never>;
 
 // @public
 export type TooltipCellStyle = Pick<CSSProperties, 'maxHeight' | 'textAlign' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;

packages/charts/src/components/accessibility/goal_semantic_description.tsx → packages/charts/src/chart_types/goal_chart/components/goal_semantic_description.tsx

@@ -8,8 +8,8 @@
 
 import React, { Fragment } from 'react';
 
-import type { BandViewModel } from '../../chart_types/goal_chart/layout/types/viewmodel_types';
-import type { A11ySettings } from '../../state/selectors/get_accessibility_config';
+import type { A11ySettings } from '../../../state/selectors/get_accessibility_config';
+import type { BandViewModel } from '../layout/types/viewmodel_types';
 
 interface GoalSemanticDescriptionProps {
   bandLabels: BandViewModel[];

packages/charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx

@@ -16,14 +16,15 @@ import { renderCanvas2d } from './canvas_renderers';
 import type { Color } from '../../../../common/colors';
 import { Colors } from '../../../../common/colors';
 import type { Rectangle } from '../../../../common/geometry';
-import { GoalSemanticDescription, ScreenReaderSummary } from '../../../../components/accessibility';
+import { ScreenReaderSummary } from '../../../../components/accessibility';
 import { onChartRendered } from '../../../../state/actions/chart';
 import type { GlobalChartState } from '../../../../state/chart_state';
 import type { A11ySettings } from '../../../../state/selectors/get_accessibility_config';
 import { DEFAULT_A11Y_SETTINGS, getA11ySettingsSelector } from '../../../../state/selectors/get_accessibility_config';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import type { Dimensions } from '../../../../utils/dimensions';
+import { GoalSemanticDescription } from '../../components/goal_semantic_description';
 import type { BandViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { nullShapeViewModel } from '../../layout/types/viewmodel_types';
 import type { Mark } from '../../layout/viewmodel/geoms';
@@ -138,10 +139,9 @@ class Component extends React.Component<Props> {
           }}
           // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
           role="presentation"
-        >
-          <ScreenReaderSummary />
-          <GoalSemanticDescription bandLabels={bandLabels} firstValue={firstValue} {...a11ySettings} />
-        </canvas>
+        />
+        <ScreenReaderSummary />
+        <GoalSemanticDescription bandLabels={bandLabels} firstValue={firstValue} {...a11ySettings} />
       </figure>
     );
   }

packages/charts/src/chart_types/goal_chart/state/chart_selectors.ts

@@ -8,6 +8,7 @@
 
 import { getChartTypeDescriptionSelector } from './selectors/get_chart_type_description';
 import { getGoalSpecSelector } from './selectors/get_goal_spec';
+import { getScreenReaderDataSelector } from './selectors/get_screen_reader_data';
 import { isTooltipVisibleSelector } from './selectors/is_tooltip_visible';
 import { createOnElementClickCaller } from './selectors/on_element_click_caller';
 import { createOnElementOutCaller } from './selectors/on_element_out_caller';
@@ -46,6 +47,7 @@ export const chartSelectorsFactory = createChartSelectorsFactory(
     },
 
     getChartTypeDescription: getChartTypeDescriptionSelector,
+    getScreenReaderData: getScreenReaderDataSelector,
 
     // TODO enable for small multiples
     canDisplayChartTitles: () => false,

packages/charts/src/chart_types/goal_chart/state/selectors/get_screen_reader_data.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getGoalChartDataSelector, getGoalChartLabelsSelector } from './get_goal_chart_data';
+import type { ChartSpecificScreenReaderData, ScreenReaderItem } from '../../../../state/chart_selectors';
+import type { GlobalChartState } from '../../../../state/chart_state';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getA11ySettingsSelector } from '../../../../state/selectors/get_accessibility_config';
+import { getInternalChartStateSelector } from '../../../../state/selectors/get_internal_chart_state';
+
+/** @internal */
+export const getScreenReaderDataSelector = createCustomCachedSelector(
+  [
+    getGoalChartDataSelector,
+    getGoalChartLabelsSelector,
+    getInternalChartStateSelector,
+    getA11ySettingsSelector,
+    (state: GlobalChartState) => state,
+  ],
+  (goalChartData, goalChartLabels, internalChartState, a11ySettings, state): ChartSpecificScreenReaderData => {
+    const screenReaderItems: ScreenReaderItem[] = [];
+
+    // Add chart type description first
+    const chartTypeDescription = internalChartState?.getChartTypeDescription(state);
+    if (chartTypeDescription) {
+      screenReaderItems.push({
+        label: 'Chart type',
+        id: a11ySettings.defaultSummaryId,
+        value: chartTypeDescription,
+      });
+    }
+
+    // Add goal chart specific parts
+    if (goalChartData && !isNaN(goalChartData.maximum)) {
+      if (goalChartLabels.majorLabel) {
+        screenReaderItems.push({
+          label: 'Major label',
+          value: goalChartLabels.majorLabel,
+        });
+      }
+      if (goalChartLabels.minorLabel) {
+        screenReaderItems.push({
+          label: 'Minor label',
+          value: goalChartLabels.minorLabel,
+        });
+      }
+      screenReaderItems.push(
+        {
+          label: 'Minimum',
+          value: goalChartData.minimum.toString(),
+        },
+        {
+          label: 'Maximum',
+          value: goalChartData.maximum.toString(),
+        },
+        {
+          label: 'Target',
+          value: goalChartData.target?.toString() ?? 'N/A',
+        },
+        {
+          label: 'Value',
+          value: goalChartData.value.toString(),
+        },
+      );
+    }
+
+    return { screenReaderItems };
+  },
+);

packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx

@@ -136,9 +136,8 @@ class Component extends React.Component<Props> {
           }}
           // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
           role="presentation"
-        >
-          <ScreenReaderSummary />
-        </canvas>
+        />
+        <ScreenReaderSummary />
       </figure>
     );
   }

packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx

@@ -17,7 +17,7 @@ import { renderPartitionCanvas2d } from './canvas_renderers';
 import { renderWrappedPartitionCanvas2d } from './canvas_wrapped_renderers';
 import type { Color } from '../../../../common/colors';
 import { Colors } from '../../../../common/colors';
-import { ScreenReaderSummary, ScreenReaderPartitionTable } from '../../../../components/accessibility';
+import { ScreenReaderSummary } from '../../../../components/accessibility';
 import { clearCanvas } from '../../../../renderers/canvas';
 import type { SettingsSpec } from '../../../../specs/settings';
 import { onChartRendered } from '../../../../state/actions/chart';
@@ -35,6 +35,7 @@ import { hasMostlyRTLLabels, nullShapeViewModel } from '../../layout/types/viewm
 import { INPUT_KEY } from '../../layout/utils/group_by_rollup';
 import { isSimpleLinear, isWaffle } from '../../layout/viewmodel/viewmodel';
 import { partitionDrilldownFocus, partitionMultiGeometries } from '../../state/selectors/geometries';
+import { ScreenReaderPartitionTable } from '../dom/screen_reader_partition_table';
 
 /** @internal */
 export interface ContinuousDomainFocus {

packages/charts/src/components/accessibility/partitions_data_table.tsx → packages/charts/src/chart_types/partition_chart/renderer/dom/screen_reader_partition_table.tsx

@@ -9,15 +9,15 @@
 import React, { useRef, memo, useState } from 'react';
 import { connect } from 'react-redux';
 
-import type { PartitionData } from '../../chart_types/partition_chart/state/selectors/get_screen_reader_data';
-import { getScreenReaderDataSelector } from '../../chart_types/partition_chart/state/selectors/get_screen_reader_data';
-import type { SettingsSpec } from '../../specs/settings';
-import type { GlobalChartState } from '../../state/chart_state';
-import type { A11ySettings } from '../../state/selectors/get_accessibility_config';
-import { DEFAULT_A11Y_SETTINGS, getA11ySettingsSelector } from '../../state/selectors/get_accessibility_config';
-import { getInternalIsInitializedSelector, InitStatus } from '../../state/selectors/get_internal_is_intialized';
-import { getSettingsSpecSelector } from '../../state/selectors/get_settings_spec';
-import { isNil } from '../../utils/common';
+import type { SettingsSpec } from '../../../../specs/settings';
+import type { GlobalChartState } from '../../../../state/chart_state';
+import type { A11ySettings } from '../../../../state/selectors/get_accessibility_config';
+import { DEFAULT_A11Y_SETTINGS, getA11ySettingsSelector } from '../../../../state/selectors/get_accessibility_config';
+import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import { isNil } from '../../../../utils/common';
+import { getPartitionScreenReaderDataSelector } from '../../state/selectors/get_screen_reader_data';
+import type { PartitionData } from '../../state/selectors/get_screen_reader_data';
 
 interface ScreenReaderPartitionTableProps {
   a11ySettings: A11ySettings;
@@ -131,7 +131,7 @@ const mapStateToProps = (state: GlobalChartState): ScreenReaderPartitionTablePro
   }
   return {
     a11ySettings: getA11ySettingsSelector(state),
-    partitionData: getScreenReaderDataSelector(state),
+    partitionData: getPartitionScreenReaderDataSelector(state),
     debug: getSettingsSpecSelector(state).debug,
   };
 };

packages/charts/src/chart_types/partition_chart/state/selectors/get_screen_reader_data.test.ts

@@ -8,7 +8,7 @@
 
 import type { Store } from 'redux';
 
-import { getScreenReaderDataSelector } from './get_screen_reader_data';
+import { getPartitionScreenReaderDataSelector } from './get_screen_reader_data';
 import { MockSeriesSpec } from '../../../../mocks/specs/specs';
 import { MockStore } from '../../../../mocks/store';
 import type { GlobalChartState } from '../../../../state/chart_state';
@@ -65,7 +65,7 @@ describe('Get screen reader data', () => {
 
   it('should test defaults', () => {
     MockStore.addSpecs([spec1], store);
-    const expected = getScreenReaderDataSelector(store.getState());
+    const expected = getPartitionScreenReaderDataSelector(store.getState());
     expect(expected).toEqual({
       data: [
         { depth: 1, label: 'aaa', panelTitle: '', parentName: 'none', percentage: '100%', value: 3, valueText: '3' },
@@ -81,7 +81,7 @@ describe('Get screen reader data', () => {
   });
   it('should compute screen reader data for no slices in pie', () => {
     MockStore.addSpecs([specNoSlice], store);
-    const expected = getScreenReaderDataSelector(store.getState());
+    const expected = getPartitionScreenReaderDataSelector(store.getState());
     expect(expected).toEqual({
       data: [],
       hasMultipleLayers: true,

packages/charts/src/chart_types/partition_chart/state/selectors/get_screen_reader_data.ts

@@ -59,7 +59,7 @@ const getScreenReaderDataForPartitions = (
 };
 
 /** @internal */
-export const getScreenReaderDataSelector = createCustomCachedSelector(
+export const getPartitionScreenReaderDataSelector = createCustomCachedSelector(
   [getPartitionSpecs, partitionMultiGeometries],
   (specs, shapeViewModel): PartitionData => {
     if (specs.length === 0) {

packages/charts/src/components/accessibility/accessibility.test.tsx

@@ -165,7 +165,7 @@ describe('Accessibility', () => {
         </Chart>,
       );
       expect(screen.getByTestId('echScreenReaderSummary').textContent).toBe(
-        'Revenue 2020 YTD  (thousand USD)  Chart type:goal chartMinimum:0Maximum:300Target:260Value:170',
+        'Chart type:goal chartMajor label:Revenue 2020 YTD  Minor label:(thousand USD)  Minimum:0Maximum:300Target:260Value:170',
       );
     });
     it('should correctly render ascending semantic values', () => {

packages/charts/src/components/accessibility/index.ts

@@ -8,5 +8,3 @@
 
 /* @internal */
 export { ScreenReaderSummary } from './screen_reader_summary';
-export { ScreenReaderPartitionTable } from './partitions_data_table';
-export { GoalSemanticDescription } from './goal_semantic_description';

packages/charts/src/components/accessibility/screen_reader_items.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import type { ScreenReaderItem } from '../../state/chart_selectors';
+import type { A11ySettings } from '../../state/selectors/get_accessibility_config';
+
+interface ScreenReaderItemsProps {
+  screenReaderItems?: ScreenReaderItem[];
+}
+
+/** @internal */
+export function ScreenReaderItems({ screenReaderItems }: A11ySettings & ScreenReaderItemsProps) {
+  const hasScreenReaderItems = screenReaderItems && screenReaderItems.length > 0;
+
+  if (!hasScreenReaderItems) {
+    return null;
+  }
+
+  return (
+    <dl>
+      {screenReaderItems.map((part) => (
+        <React.Fragment key={part.id || part.label}>
+          <dt>{part.label}:</dt>
+          <dd id={part.id}>{part.value}</dd>
+        </React.Fragment>
+      ))}
+    </dl>
+  );
+}