feat(a11y): General Accessible Chart Information

e2e/playwright.a11y.config.ts

@@ -12,6 +12,7 @@ import baseConfig from './playwright.config';
 
 const config: PlaywrightTestConfig = {
   ...baseConfig,
+  testIgnore: undefined, // Reset the testIgnore from base config
   testDir: 'tests_a11y',
   testMatch: ['**/tests_a11y/**/*.test.ts'],
   reporter: [

e2e/playwright.config.ts

@@ -15,6 +15,7 @@ expect.extend(pwExpect.matchers);
 const isCI = process.env.CI === 'true';
 
 const config: PlaywrightTestConfig = {
+  testIgnore: ['**/accessibility_descriptions.test.ts'],
   use: {
     headless: true,
     locale: 'en-us',

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

@@ -8,8 +8,9 @@
 
 import { getGoalSpecSelector } from './get_goal_spec';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { capitalizeFirst } from '../../../../utils/text/text_utils';
 
 /** @internal */
 export const getChartTypeDescriptionSelector = createCustomCachedSelector([getGoalSpecSelector], (spec) => {
-  return `${spec?.subtype ?? 'goal'} chart`;
+  return `${capitalizeFirst(spec?.subtype ?? 'goal')} chart`;
 });

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

@@ -6,35 +6,17 @@
  * Side Public License, v 1.
  */
 
+import { getChartTypeDescriptionSelector } from './get_chart_type_description';
 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 => {
+  [getGoalChartDataSelector, getGoalChartLabelsSelector, getChartTypeDescriptionSelector],
+  (goalChartData, goalChartLabels, chartTypeDescription): 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) {
@@ -69,6 +51,16 @@ export const getScreenReaderDataSelector = createCustomCachedSelector(
       );
     }
 
-    return { screenReaderItems };
+    const summaryParts: string[] = [];
+
+    // Add chart type description first
+    if (chartTypeDescription) {
+      summaryParts.push(chartTypeDescription);
+    }
+
+    return {
+      summaryParts,
+      screenReaderItems,
+    };
   },
 );

packages/charts/src/chart_types/goal_chart/utils/summary_utils.test.tsx

@@ -0,0 +1,98 @@
+/*
+ * 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 { createGoalChartDescription } from './summary_utils';
+import { ChartType } from '../../../chart_types';
+import type { GoalChartData } from '../state/selectors/get_goal_chart_data';
+
+describe('createGoalChartDescription', () => {
+  const mockGoalChartData: GoalChartData = {
+    minimum: 0,
+    maximum: 300,
+    target: 260,
+    value: 170,
+  };
+
+  it('should return null for non-goal chart types', () => {
+    const result = createGoalChartDescription(ChartType.XYAxis, mockGoalChartData);
+    expect(result).toBeNull();
+  });
+
+  it('should return null when goalChartData is undefined', () => {
+    const result = createGoalChartDescription(ChartType.Goal, undefined);
+    expect(result).toBeNull();
+  });
+
+  it('should return null when maximum is NaN', () => {
+    const invalidData = {
+      ...mockGoalChartData,
+      maximum: NaN,
+    };
+    const result = createGoalChartDescription(ChartType.Goal, invalidData);
+    expect(result).toBeNull();
+  });
+
+  it('should create description for goal chart', () => {
+    const result = createGoalChartDescription(ChartType.Goal, mockGoalChartData);
+    expect(result).toBe('Minimum: 0, Maximum: 300, Target: 260, Value: 170');
+  });
+
+  it('should create description for bullet chart', () => {
+    const result = createGoalChartDescription(ChartType.Bullet, mockGoalChartData);
+    expect(result).toBe('Minimum: 0, Maximum: 300, Target: 260, Value: 170');
+  });
+
+  it('should return null for null chart type', () => {
+    const result = createGoalChartDescription(null, mockGoalChartData);
+    expect(result).toBeNull();
+  });
+
+  it('should handle decimal values', () => {
+    const decimalData: GoalChartData = {
+      minimum: 0.5,
+      maximum: 100.75,
+      target: 85.25,
+      value: 67.8,
+    };
+    const result = createGoalChartDescription(ChartType.Goal, decimalData);
+    expect(result).toBe('Minimum: 0.5, Maximum: 100.75, Target: 85.25, Value: 67.8');
+  });
+
+  it('should handle negative values', () => {
+    const negativeData: GoalChartData = {
+      minimum: -50,
+      maximum: 50,
+      target: 10,
+      value: -5,
+    };
+    const result = createGoalChartDescription(ChartType.Goal, negativeData);
+    expect(result).toBe('Minimum: -50, Maximum: 50, Target: 10, Value: -5');
+  });
+
+  it('should handle zero values', () => {
+    const zeroData: GoalChartData = {
+      minimum: 0,
+      maximum: 0,
+      target: 0,
+      value: 0,
+    };
+    const result = createGoalChartDescription(ChartType.Goal, zeroData);
+    expect(result).toBe('Minimum: 0, Maximum: 0, Target: 0, Value: 0');
+  });
+
+  it('should handle large numbers', () => {
+    const largeData: GoalChartData = {
+      minimum: 1000000,
+      maximum: 5000000,
+      target: 4000000,
+      value: 3500000,
+    };
+    const result = createGoalChartDescription(ChartType.Goal, largeData);
+    expect(result).toBe('Minimum: 1000000, Maximum: 5000000, Target: 4000000, Value: 3500000');
+  });
+});

packages/charts/src/chart_types/goal_chart/utils/summary_utils.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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 { ChartType } from '../../../chart_types';
+import type { GoalChartData } from '../state/selectors/get_goal_chart_data';
+
+/** @internal */
+export function createGoalChartDescription(chartType: ChartType | null, goalChartData?: GoalChartData): string | null {
+  const isGoalChart = chartType === ChartType.Goal || chartType === ChartType.Bullet;
+
+  if (!isGoalChart || !goalChartData || isNaN(goalChartData.maximum)) {
+    return null;
+  }
+
+  return `Minimum: ${goalChartData.minimum}, Maximum: ${goalChartData.maximum}, Target: ${goalChartData.target}, Value: ${goalChartData.value}`;
+}

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

@@ -13,6 +13,7 @@ import { getPointerCursorSelector } from './selectors/get_cursor_pointer';
 import { getDebugStateSelector } from './selectors/get_debug_state';
 import { getHeatmapTableSelector } from './selectors/get_heatmap_table';
 import { getLegendItemsLabelsSelector } from './selectors/get_legend_items_labels';
+import { getScreenReaderDataSelector } from './selectors/get_screen_reader_data';
 import { getTooltipAnchorSelector } from './selectors/get_tooltip_anchor';
 import { isBrushAvailableSelector } from './selectors/is_brush_available';
 import { isEmptySelector } from './selectors/is_empty';
@@ -48,6 +49,7 @@ export const chartSelectorsFactory = createChartSelectorsFactory(
     getBrushArea: getBrushAreaSelector,
     getDebugState: getDebugStateSelector,
     getChartTypeDescription: () => 'Heatmap chart',
+    getScreenReaderData: getScreenReaderDataSelector,
     getSmallMultiplesDomains: getHeatmapTableSelector,
   },
   // event callbacks

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

@@ -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 { getHeatmapSpecSelector } from './get_heatmap_spec';
+import type { ChartSpecificScreenReaderData } from '../../../../state/chart_selectors';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
+
+/** @internal */
+export interface HeatmapScreenReaderData {
+  heatmapSpec: ReturnType<typeof getHeatmapSpecSelector>;
+}
+
+/** @internal */
+export const getScreenReaderDataSelector = createCustomCachedSelector(
+  [getHeatmapSpecSelector],
+  (heatmapSpec): ChartSpecificScreenReaderData => {
+    const summaryParts: string[] = [];
+
+    // Add heatmap-specific accessibility information
+    if (heatmapSpec?.data && heatmapSpec.data.length > 0) {
+      summaryParts.push(`${heatmapSpec.data.length} data ${heatmapSpec.data.length === 1 ? 'point' : 'points'}`);
+    }
+
+    return {
+      data: {
+        heatmapSpec,
+      } as HeatmapScreenReaderData,
+      summaryParts,
+    };
+  },
+);

packages/charts/src/chart_types/partition_chart/renderer/dom/screen_reader_partition_table.tsx

@@ -16,8 +16,8 @@ import { DEFAULT_A11Y_SETTINGS, getA11ySettingsSelector } from '../../../../stat
 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';
+import { getPartitionScreenReaderDataSelector } from '../../state/selectors/get_screen_reader_data';
 
 interface ScreenReaderPartitionTableProps {
   a11ySettings: A11ySettings;
@@ -46,8 +46,8 @@ const ScreenReaderPartitionTableComponent = ({
     }
   };
 
-  const { isSmallMultiple, data, hasMultipleLayers } = partitionData;
-  const tableLength = data.length;
+  const { isSmallMultiple, sections, hasMultipleLayers } = partitionData;
+  const tableLength = sections.length;
   const showMoreRows = rowLimit < tableLength;
   let countOfCol: number = 3;
   const totalColumns: number =
@@ -84,7 +84,7 @@ const ScreenReaderPartitionTableComponent = ({
         </thead>
 
         <tbody>
-          {partitionData.data
+          {partitionData.sections
             .slice(0, rowLimit)
             .map(({ panelTitle, depth, label, parentName, valueText, percentage }, index) => {
               return (
@@ -120,7 +120,7 @@ const DEFAULT_SCREEN_READER_SUMMARY = {
   partitionData: {
     isSmallMultiple: false,
     hasMultipleLayers: false,
-    data: [],
+    sections: [],
   },
   debug: false,
 };

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

@@ -11,6 +11,7 @@ import { getChartTypeDescriptionSelector } from './selectors/get_chart_type_desc
 import { getPointerCursorSelector } from './selectors/get_cursor_pointer';
 import { getDebugStateSelector } from './selectors/get_debug_state';
 import { getLegendItemsLabels } from './selectors/get_legend_items_labels';
+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';
@@ -58,6 +59,7 @@ export const chartSelectorsFactory = createChartSelectorsFactory(
 
     getDebugState: getDebugStateSelector,
     getChartTypeDescription: getChartTypeDescriptionSelector,
+    getScreenReaderData: getScreenReaderDataSelector,
   },
   // event callbacks
   [createOnElementClickCaller, createOnElementOverCaller, createOnElementOutCaller],

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

@@ -8,11 +8,12 @@
 
 import { getPartitionSpec } from './partition_spec';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { capitalizeFirst } from '../../../../utils/text/text_utils';
 
 /** @internal */
 export const getChartTypeDescriptionSelector = createCustomCachedSelector(
   [getPartitionSpec],
   (partitionSpec): string => {
-    return `${partitionSpec?.layout} chart` ?? 'Partition chart';
+    return partitionSpec?.layout ? `${capitalizeFirst(partitionSpec.layout)} chart` : 'Partition chart';
   },
 );

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 { getPartitionScreenReaderDataSelector } from './get_screen_reader_data';
+import { getScreenReaderDataSelector } from './get_screen_reader_data';
 import { MockSeriesSpec } from '../../../../mocks/specs/specs';
 import { MockStore } from '../../../../mocks/store';
 import type { GlobalChartState } from '../../../../state/chart_state';
@@ -65,27 +65,33 @@ describe('Get screen reader data', () => {
 
   it('should test defaults', () => {
     MockStore.addSpecs([spec1], store);
-    const expected = getPartitionScreenReaderDataSelector(store.getState());
+    const expected = getScreenReaderDataSelector(store.getState());
     expect(expected).toEqual({
-      data: [
-        { depth: 1, label: 'aaa', panelTitle: '', parentName: 'none', percentage: '100%', value: 3, valueText: '3' },
-        { depth: 2, label: 'aa', panelTitle: '', parentName: 'aaa', percentage: '67%', value: 2, valueText: '2' },
-        { depth: 3, label: '1', panelTitle: '', parentName: 'aa', percentage: '33%', value: 1, valueText: '1' },
-        { depth: 3, label: '3', panelTitle: '', parentName: 'aa', percentage: '33%', value: 1, valueText: '1' },
-        { depth: 2, label: 'bb', panelTitle: '', parentName: 'aaa', percentage: '33%', value: 1, valueText: '1' },
-        { depth: 3, label: '4', panelTitle: '', parentName: 'bb', percentage: '33%', value: 1, valueText: '1' },
-      ],
-      hasMultipleLayers: true,
-      isSmallMultiple: false,
+      data: {
+        sections: [
+          { depth: 1, label: 'aaa', panelTitle: '', parentName: 'none', percentage: '100%', value: 3, valueText: '3' },
+          { depth: 2, label: 'aa', panelTitle: '', parentName: 'aaa', percentage: '67%', value: 2, valueText: '2' },
+          { depth: 3, label: '1', panelTitle: '', parentName: 'aa', percentage: '33%', value: 1, valueText: '1' },
+          { depth: 3, label: '3', panelTitle: '', parentName: 'aa', percentage: '33%', value: 1, valueText: '1' },
+          { depth: 2, label: 'bb', panelTitle: '', parentName: 'aaa', percentage: '33%', value: 1, valueText: '1' },
+          { depth: 3, label: '4', panelTitle: '', parentName: 'bb', percentage: '33%', value: 1, valueText: '1' },
+        ],
+        hasMultipleLayers: true,
+        isSmallMultiple: false,
+      },
+      summaryParts: ['Sunburst chart', '6 data points', 'with hierarchical layers'],
     });
   });
   it('should compute screen reader data for no slices in pie', () => {
     MockStore.addSpecs([specNoSlice], store);
-    const expected = getPartitionScreenReaderDataSelector(store.getState());
+    const expected = getScreenReaderDataSelector(store.getState());
     expect(expected).toEqual({
-      data: [],
-      hasMultipleLayers: true,
-      isSmallMultiple: false,
+      data: {
+        sections: [],
+        hasMultipleLayers: true,
+        isSmallMultiple: false,
+      },
+      summaryParts: ['Sunburst chart'],
     });
   });
 });