feat(a11y): add data table for screen readers (sunburst, treemap, icicle, flame)

api/charts.api.md

@@ -625,7 +625,7 @@ export const DEFAULT_TOOLTIP_SNAP = true;
 export const DEFAULT_TOOLTIP_TYPE: "vertical";
 
 // @public (undocumented)
-export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'hideDuplicateAxes' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel';
+export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'hideDuplicateAxes' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel' | 'ariaTableCaption';
 
 // @public (undocumented)
 export const DEPTH_KEY = "depth";
@@ -1748,6 +1748,7 @@ export interface SettingsSpec extends Spec, LegendSpec {
     ariaLabel?: string;
     ariaLabelHeadingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
     ariaLabelledBy?: string;
+    ariaTableCaption: string;
     ariaUseDefaultSummary: boolean;
     baseTheme?: Theme;
     brushAxis?: BrushAxis;

src/chart_types/partition_chart/layout/utils/group_by_rollup.ts

@@ -20,7 +20,9 @@
 import { CategoryKey } from '../../../../common/category';
 import { Relation } from '../../../../common/text_utils';
 import { LegendPath } from '../../../../state/actions/legend';
+import { LegendItemLabel } from '../../../../state/selectors/get_legend_items_labels';
 import { Datum, ValueAccessor } from '../../../../utils/common';
+import { Layer } from '../../specs';
 
 /** @public */
 export const AGGREGATE_KEY = 'value';
@@ -297,3 +299,46 @@ export const aggregators = {
   //   },
   // },
 };
+
+/** @internal */
+export function flatSlicesNames(
+  layers: Layer[],
+  depth: number,
+  tree: HierarchyOfArrays,
+  keys: Map<LegendItemLabel['label'], any> = new Map(),
+) {
+  if (tree.length === 0) {
+    return [];
+  }
+
+  for (let i = 0; i < tree.length; i++) {
+    const branch = tree[i];
+    const arrayNode = branch[1];
+    const key = branch[0];
+
+    // format the key with the layer formatter
+    const layer = layers[depth - 1];
+    const formatter = layer?.nodeLabel;
+    let formattedValue = '';
+    if (key != null) {
+      formattedValue = formatter ? formatter(key) : `${key}`;
+    }
+    // preventing errors from external formatters
+    if (formattedValue != null && formattedValue !== '' && formattedValue !== HIERARCHY_ROOT_KEY) {
+      const current = new Map();
+      current.set('depth', Math.max(depth, keys.get(formattedValue)?.get(depth) ?? 0));
+      current.set('percentage', `${Math.round((arrayNode.value / arrayNode[STATISTICS_KEY].globalAggregate) * 100)}%`);
+      current.set('valueText', arrayNode.value);
+      keys.set(formattedValue, current);
+    }
+
+    const children = arrayNode[CHILDREN_KEY];
+    flatSlicesNames(layers, depth + 1, children, keys);
+  }
+  return [...keys.keys()].map((k) => ({
+    label: k,
+    depth: keys.get(k)?.get('depth') ?? 0,
+    percentage: keys.get(k)?.get('percentage'),
+    valueText: keys.get(k)?.get('valueText'),
+  }));
+}

src/chart_types/partition_chart/layout/utils/legend_labels.ts

@@ -19,46 +19,11 @@
 
 import { LegendItemLabel } from '../../../../state/selectors/get_legend_items_labels';
 import { Layer } from '../../specs';
-import { CHILDREN_KEY, HIERARCHY_ROOT_KEY, HierarchyOfArrays } from './group_by_rollup';
+import { flatSlicesNames, HierarchyOfArrays } from './group_by_rollup';
 
 /** @internal */
 export function getLegendLabels(layers: Layer[], tree: HierarchyOfArrays, legendMaxDepth: number) {
-  return flatSlicesNames(layers, 0, tree).filter(({ depth }) => depth <= legendMaxDepth);
-}
-
-function flatSlicesNames(
-  layers: Layer[],
-  depth: number,
-  tree: HierarchyOfArrays,
-  keys: Map<string, number> = new Map(),
-): LegendItemLabel[] {
-  if (tree.length === 0) {
-    return [];
-  }
-
-  for (let i = 0; i < tree.length; i++) {
-    const branch = tree[i];
-    const arrayNode = branch[1];
-    const key = branch[0];
-
-    // format the key with the layer formatter
-    const layer = layers[depth - 1];
-    const formatter = layer?.nodeLabel;
-    let formattedValue = '';
-    if (key != null) {
-      formattedValue = formatter ? formatter(key) : `${key}`;
-    }
-    // preventing errors from external formatters
-    if (formattedValue != null && formattedValue !== '' && formattedValue !== HIERARCHY_ROOT_KEY) {
-      // save only the max depth, so we can compute the the max extension of the legend
-      keys.set(formattedValue, Math.max(depth, keys.get(formattedValue) ?? 0));
-    }
-
-    const children = arrayNode[CHILDREN_KEY];
-    flatSlicesNames(layers, depth + 1, children, keys);
-  }
-  return [...keys.keys()].map((k) => ({
-    label: k,
-    depth: keys.get(k) ?? 0,
-  }));
+  return flatSlicesNames(layers, 0, tree).reduce((acc, val) => {
+    return val.depth <= legendMaxDepth ? acc.concat({ label: val.label, depth: val.depth }) : acc;
+  }, [] as LegendItemLabel[]);
 }

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

@@ -22,6 +22,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
 import { ScreenReaderSummary } from '../../../../components/accessibility';
+import { ScreenReaderSunburstTable } from '../../../../components/accessibility/sunburst_table';
 import { clearCanvas } from '../../../../renderers/canvas';
 import { onChartRendered } from '../../../../state/actions/chart';
 import { ChartId, GlobalChartState } from '../../../../state/chart_state';
@@ -169,6 +170,7 @@ class PartitionComponent extends React.Component<PartitionProps> {
           role="presentation"
         >
           <ScreenReaderSummary />
+          <ScreenReaderSunburstTable />
         </canvas>
       </figure>
     );

src/chart_types/partition_chart/state/selectors/get_screen_reader_data.tsx

@@ -0,0 +1,72 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import createCachedSelector from 're-reselect';
+
+import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
+import { flatSlicesNames, HierarchyOfArrays } from '../../layout/utils/group_by_rollup';
+import { Layer, PartitionSpec } from '../../specs';
+import { partitionMultiGeometries } from './geometries';
+import { getPartitionSpecs } from './get_partition_specs';
+import { getTrees } from './tree';
+
+/** @internal */
+export interface LabelsInterface {
+  label: string;
+  valueText: number;
+  depth: number;
+  percentage: string;
+}
+
+/** @internal */
+const getFlattenedLabels = (layers: Layer[], tree: HierarchyOfArrays, legendMaxDepth: number = 0) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  return flatSlicesNames(layers, 0, tree).filter((val) => val.depth <= legendMaxDepth);
+};
+
+/**
+ * @internal
+ */
+const getScreenReaderDataForPartitions = (
+  specs: PartitionSpec[],
+  legendMaxDepth: number,
+  trees: { tree: HierarchyOfArrays }[],
+) => {
+  return specs.flatMap((spec) => getFlattenedLabels(spec.layers, trees[0].tree, legendMaxDepth));
+};
+
+/** @internal */
+export const getScreenReaderDataSelector = createCachedSelector(
+  [getPartitionSpecs, getSettingsSpecSelector, getTrees, partitionMultiGeometries],
+  (specs, { legendMaxDepth }, trees) => {
+    const lengthOfResults = getScreenReaderDataForPartitions(specs, legendMaxDepth, trees).length;
+    // how to control how much is calculated
+    return lengthOfResults > 20
+      ? [
+          {
+            label: `There are ${lengthOfResults} data points in this chart`,
+            depth: 0,
+            valueText: lengthOfResults,
+            percentage: 'N/A',
+          },
+        ]
+      : getScreenReaderDataForPartitions(specs, legendMaxDepth, trees);
+  },
+)(getChartIdSelector);

src/components/__snapshots__/chart.test.tsx.snap

@@ -54,7 +54,7 @@ exports[`Chart should render the legend name test 1`] = `
         <Connect(SpecsParserComponent)>
           <SpecsParserComponent specParsed={[Function (anonymous)]} specUnmounted={[Function (anonymous)]}>
             <Connect(SpecInstance) debug={true} rendering=\\"svg\\" showLegend={true}>
-              <SpecInstance debug={true} rendering=\\"svg\\" showLegend={true} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} id=\\"__global__settings___\\" chartType=\\"global\\" specType=\\"settings\\" rotation={0} animateData={true} resizeDebounce={10} tooltip={{...}} externalPointerEvents={{...}} hideDuplicateAxes={false} baseTheme={{...}} brushAxis=\\"x\\" minBrushDelta={2} ariaUseDefaultSummary={true} ariaLabelHeadingLevel=\\"p\\" showLegendExtra={false} legendMaxDepth={Infinity} legendPosition=\\"right\\" />
+              <SpecInstance debug={true} rendering=\\"svg\\" showLegend={true} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} id=\\"__global__settings___\\" chartType=\\"global\\" specType=\\"settings\\" rotation={0} animateData={true} resizeDebounce={10} tooltip={{...}} externalPointerEvents={{...}} hideDuplicateAxes={false} baseTheme={{...}} brushAxis=\\"x\\" minBrushDelta={2} ariaUseDefaultSummary={true} ariaLabelHeadingLevel=\\"p\\" ariaTableCaption=\\"Table of the data for screen reader navigation\\" showLegendExtra={false} legendMaxDepth={Infinity} legendPosition=\\"right\\" />
             </Connect(SpecInstance)>
             <Connect(SpecInstance) id=\\"test\\" data={{...}}>
               <SpecInstance id=\\"test\\" data={{...}} upsertSpec={[Function (anonymous)]} removeSpec={[Function (anonymous)]} chartType=\\"xy_axis\\" specType=\\"series\\" seriesType=\\"bar\\" groupId=\\"__global__\\" xScaleType=\\"ordinal\\" yScaleType=\\"linear\\" xAccessor=\\"x\\" yAccessors={{...}} yScaleToDataExtent={false} hideInLegend={false} enableHistogramMode={false} />
@@ -75,9 +75,9 @@ exports[`Chart should render the legend name test 1`] = `
                         <Connect(ScreenReaderSummaryComponent)>
                           <ScreenReaderSummaryComponent chartTypeDescription=\\"bar chart\\" a11ySettings={{...}} dispatch={[Function: dispatch]}>
                             <div className=\\"echScreenReaderOnly\\">
-                              <ScreenReaderLabel label={[undefined]} labelId={[undefined]} labelHeadingLevel=\\"p\\" description={[undefined]} descriptionId=\\"chart1--defaultSummary\\" defaultSummaryId=\\"chart1--defaultSummary\\" />
-                              <ScreenReaderDescription label={[undefined]} labelId={[undefined]} labelHeadingLevel=\\"p\\" description={[undefined]} descriptionId=\\"chart1--defaultSummary\\" defaultSummaryId=\\"chart1--defaultSummary\\" />
-                              <ScreenReaderTypes label={[undefined]} labelId={[undefined]} labelHeadingLevel=\\"p\\" description={[undefined]} descriptionId=\\"chart1--defaultSummary\\" defaultSummaryId=\\"chart1--defaultSummary\\" chartTypeDescription=\\"bar chart\\">
+                              <ScreenReaderLabel label={[undefined]} labelId={[undefined]} labelHeadingLevel=\\"p\\" description={[undefined]} descriptionId=\\"chart1--defaultSummary\\" defaultSummaryId=\\"chart1--defaultSummary\\" tableCaption=\\"Table of the data for screen reader navigation\\" />
+                              <ScreenReaderDescription label={[undefined]} labelId={[undefined]} labelHeadingLevel=\\"p\\" description={[undefined]} descriptionId=\\"chart1--defaultSummary\\" defaultSummaryId=\\"chart1--defaultSummary\\" tableCaption=\\"Table of the data for screen reader navigation\\" />
+                              <ScreenReaderTypes label={[undefined]} labelId={[undefined]} labelHeadingLevel=\\"p\\" description={[undefined]} descriptionId=\\"chart1--defaultSummary\\" defaultSummaryId=\\"chart1--defaultSummary\\" tableCaption=\\"Table of the data for screen reader navigation\\" chartTypeDescription=\\"bar chart\\">
                                 <dl>
                                   <dt>
                                     Chart type:

src/components/accessibility/accessibility.test.tsx

@@ -20,27 +20,83 @@
 import { mount } from 'enzyme';
 import React from 'react';
 
-import { BarSeries, LineSeries, Settings } from '../../specs';
+import { config } from '../../chart_types/partition_chart/layout/config';
+import { PartitionLayout } from '../../chart_types/partition_chart/layout/types/config_types';
+import { arrayToLookup } from '../../common/color_calcs';
+import { mocks } from '../../mocks/hierarchical';
+import { productDimension } from '../../mocks/hierarchical/dimension_codes';
+import { BarSeries, LineSeries, Partition, Settings } from '../../specs';
+import { Datum } from '../../utils/common';
 import { Chart } from '../chart';
 
 describe('Accessibility', () => {
-  it('should include the series types if one type of series', () => {
-    const wrapper = mount(
-      <Chart size={[100, 100]} id="chart1">
-        <Settings debug rendering="svg" showLegend />
-        <BarSeries id="test" data={[{ x: 0, y: 2 }]} />
-      </Chart>,
-    );
-    expect(wrapper.find('dd').first().text()).toBe('bar chart');
+  describe('Screen reader summary xy charts', () => {
+    it('should include the series types if one type of series', () => {
+      const wrapper = mount(
+        <Chart size={[100, 100]} id="chart1">
+          <Settings debug rendering="svg" showLegend />
+          <BarSeries id="test" data={[{ x: 0, y: 2 }]} />
+        </Chart>,
+      );
+      expect(wrapper.find('dd').first().text()).toBe('bar chart');
+    });
+    it('should include the series types if multiple types of series', () => {
+      const wrapper = mount(
+        <Chart size={[100, 100]} id="chart1">
+          <Settings debug rendering="svg" showLegend />
+          <BarSeries id="test" data={[{ x: 0, y: 2 }]} />
+          <LineSeries id="test2" data={[{ x: 3, y: 5 }]} />
+        </Chart>,
+      );
+      expect(wrapper.find('dd').first().text()).toBe('Mixed chart: bar and line chart');
+    });
   });
-  it('should include the series types if multiple types of series', () => {
-    const wrapper = mount(
-      <Chart size={[100, 100]} id="chart1">
-        <Settings debug rendering="svg" showLegend />
-        <BarSeries id="test" data={[{ x: 0, y: 2 }]} />
-        <LineSeries id="test2" data={[{ x: 3, y: 5 }]} />
-      </Chart>,
-    );
-    expect(wrapper.find('dd').first().text()).toBe('Mixed chart: bar and line chart');
+
+  describe('Screen reader summary, other chart types', () => {
+    it('should include the series type if partition chart', () => {
+      const productLookup = arrayToLookup((d: any) => d.sitc1, productDimension);
+      const wrapper = mount(
+        <Chart size={[100, 100]} id="chart1">
+          <Partition
+            id="spec_1"
+            data={mocks.pie}
+            valueAccessor={(d: Datum) => d.exportVal as number}
+            valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
+            layers={[
+              {
+                groupByRollup: (d: Datum) => d.sitc1,
+                nodeLabel: (d: Datum) => productLookup[d].name,
+              },
+            ]}
+          />
+        </Chart>,
+      );
+      expect(wrapper.find('dd').first().text()).toBe('sunburst chart');
+    });
+    it('should include series type if treemap type', () => {
+      const productLookup = arrayToLookup((d: any) => d.sitc1, productDimension);
+      const wrapper = mount(
+        <Chart size={[100, 100]} id="chart1">
+          <Partition
+            id="spec_1"
+            data={mocks.pie}
+            valueAccessor={(d: Datum) => d.exportVal as number}
+            valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
+            layers={[
+              {
+                groupByRollup: (d: Datum) => d.sitc1,
+                nodeLabel: (d: Datum) => productLookup[d].name,
+              },
+            ]}
+            config={{
+              partitionLayout: PartitionLayout.treemap,
+            }}
+          />
+        </Chart>,
+      );
+      expect(wrapper.find('dd').first().text()).toBe('treemap chart');
+    });
   });
+
+  describe('Data table for screen readers', () => {});
 });