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

* feat(a11y): enhance accessibility with consolidated screen reader descriptions and axis information

* refactor(a11y): replace div with figcaption for better semantic structure and remove unnecessary wrapper div

* refactor(a11y): consolidate screen reader logic into centralized selectors

* refactor(a11y): implement chart-specific screen reader selectors following ChartSelectors pattern

* refactor(a11y): relocate goal chart summary utils to chart type directory

* fix(a11y): improve accessibility summary grammar for singular/plural and single values

* refactor(a11y): move chart type descriptions to chart-specific screen reader selectors

* refactor(a11y): move chart type descriptions to chart-specific screen reader selectors

* refactor(a11y): rename PartitionData.data to sections to avoid nested data properties

* refactor(a11y): remove chart-specific properties from screen reader summary connector

* refactor: move partition screen reader table to chart-specific location

* refactor: remove unused ScreenReaderTypes component

* refactor(a11y): make ScreenReaderLabel component chart-agnostic by introducing generic ChartLabelData interface

* test(a11y): break out accessibility tests into separate files for each chart type

* refactor(a11y): move GoalSemanticDescription component to goal chart specific code area

* refactor(a11y): consolidate accessibility descriptions into A11ySettings with clearer naming

* refactor(a11y): consolidate description rendering in ScreenReaderDescription component

* refactor(a11y): simplify description rendering and combine custom/generated descriptions

* fix(a11y): move screen reader elements outside canvas and add specific test assertions

* refactor(test): consolidate accessibility tests into single file

* revert xy_chart figure attributes

* update snapshot, revert description tweaks

* update charts.api.md

* fix(a11y): add legacy format support for screen reader descriptions

* test(a11y): update snapshots for improved chart type description format

* refactor(a11y): use internal chart state for chart type descriptions

* refactor(a11y): consolidate screen reader data selectors into central chart_selectors

* refactor(a11y): rename label component to screen_reader_label for clarity

* refactor(a11y): consolidate screen reader summary connector into main component

* refactor(a11y): consolidate screen reader descriptions using structured SummaryPart objects

* test(a11y): update snapshots and test expectations for structured descriptions

* refactor(goal_chart): remove unused summary utils

* refactor(partition_chart): rename sections to data in screen reader interface

* test(partition): add screen reader data selector tests

* refactor: move mapStateToProps after component definition for consistency

* chore: remove outdated accessibility coverage scripts README

* docs: remove redundant comment about description combination

* refactor: remove unused chartType field from ScreenReaderSummaryData

* refactor(a11y): remove unused chartTypeDescription from screen reader summary

* test(snapshots): update chart component snapshots

* fix playwright docker image version 1.47.2

* refactor accessibility components into separate concerns

* rename SummaryPart to ScreenReaderType and summaryParts prop

* revert label naming to major/minor

* rename chartSpecificData to screenReaderData

* fix passing on default summary id

* add goal chart labels to regular screenReaderTypes

* fix e2e:a11y assertions. remove screen reader label component

* rename ScreenReaderTypes to ScreenReaderItems

* fix types for GlobalChartState

* rename ScreenReaderType to ScreenReaderItem

Author: walterra

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 renamed to 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 renamed to 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,