feat(a11y): add alt text for all chart types (opensearch-project#1118)

Fixes opensearch-project#1107
AMoo-Miki · May 14, 2021 · e1c7489 · e1c7489
1 parent b7a68ea
commit e1c7489
Show file tree

Hide file tree

Showing 25 changed files with 376 additions and 88 deletions.
diff --git a/packages/osd-charts/playground/playground.tsx b/packages/osd-charts/playground/playground.tsx
@@ -19,13 +19,14 @@
 
 import React from 'react';
 
-import { Chart, AreaSeries, LineSeries, BarSeries, ScaleType } from '../src';
+import { Chart, AreaSeries, LineSeries, BarSeries, ScaleType, Settings } from '../src';
 
 export class Playground extends React.Component {
   render() {
     return (
       <div className="App">
         <Chart size={[500, 200]}>
+          <Settings ariaLabel="This is a custom aria-label" ariaLabelledBy="labeled by here" />
           <AreaSeries
             id="lines"
             name="test2"

diff --git a/packages/osd-charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx b/packages/osd-charts/src/chart_types/goal_chart/renderer/canvas/connected_component.tsx
@@ -21,8 +21,14 @@ import React, { MouseEvent, RefObject } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
+import { ScreenReaderSummary } from '../../../../components/accessibility';
 import { onChartRendered } from '../../../../state/actions/chart';
 import { GlobalChartState } from '../../../../state/chart_state';
+import {
+  A11ySettings,
+  DEFAULT_A11Y_SETTINGS,
+  getA11ySettingsSelector,
+} from '../../../../state/selectors/get_accessibility_config';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import { Dimensions } from '../../../../utils/dimensions';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
@@ -33,6 +39,7 @@ interface ReactiveChartStateProps {
   initialized: boolean;
   geometries: ShapeViewModel;
   chartContainerDimensions: Dimensions;
+  a11ySettings: A11ySettings;
 }
 
 interface ReactiveChartDispatchProps {
@@ -104,23 +111,30 @@ class Component extends React.Component<Props> {
       initialized,
       chartContainerDimensions: { width, height },
       forwardStageRef,
+      a11ySettings,
     } = this.props;
     if (!initialized || width === 0 || height === 0) {
       return null;
     }
 
     return (
-      <canvas
-        ref={forwardStageRef}
-        className="echCanvasRenderer"
-        width={width * this.devicePixelRatio}
-        height={height * this.devicePixelRatio}
-        onMouseMove={this.handleMouseMove.bind(this)}
-        style={{
-          width,
-          height,
-        }}
-      />
+      <figure aria-labelledby={a11ySettings.labelId} aria-describedby={a11ySettings.descriptionId}>
+        <canvas
+          ref={forwardStageRef}
+          className="echCanvasRenderer"
+          width={width * this.devicePixelRatio}
+          height={height * this.devicePixelRatio}
+          onMouseMove={this.handleMouseMove.bind(this)}
+          style={{
+            width,
+            height,
+          }}
+          // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+          role="presentation"
+        >
+          <ScreenReaderSummary />
+        </canvas>
+      </figure>
     );
   }
 
@@ -157,6 +171,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
     left: 0,
     top: 0,
   },
+  a11ySettings: DEFAULT_A11Y_SETTINGS,
 };
 
 const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
@@ -167,6 +182,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
     initialized: true,
     geometries: geometries(state),
     chartContainerDimensions: state.parentDimensions,
+    a11ySettings: getA11ySettingsSelector(state),
   };
 };
 

diff --git a/packages/osd-charts/src/chart_types/goal_chart/state/chart_state.tsx b/packages/osd-charts/src/chart_types/goal_chart/state/chart_state.tsx
@@ -29,6 +29,7 @@ import { LegendItemLabel } from '../../../state/selectors/get_legend_items_label
 import { DebugState } from '../../../state/types';
 import { Dimensions } from '../../../utils/dimensions';
 import { Goal } from '../renderer/canvas/connected_component';
+import { getChartTypeDescriptionSelector } from './selectors/get_chart_type_description';
 import { getSpecOrNull } from './selectors/goal_spec';
 import { isTooltipVisibleSelector } from './selectors/is_tooltip_visible';
 import { createOnElementClickCaller } from './selectors/on_element_click_caller';
@@ -120,6 +121,10 @@ export class GoalState implements InternalChartState {
     this.onElementClickCaller(globalState);
   }
 
+  getChartTypeDescription(globalState: GlobalChartState) {
+    return getChartTypeDescriptionSelector(globalState);
+  }
+
   // TODO
   getProjectionContainerArea(): Dimensions {
     return { width: 0, height: 0, top: 0, left: 0 };

diff --git a/packages/osd-charts/src/chart_types/goal_chart/state/selectors/get_chart_type_description.ts b/packages/osd-charts/src/chart_types/goal_chart/state/selectors/get_chart_type_description.ts
@@ -0,0 +1,28 @@
+/*
+ * 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 { getSpecOrNull } from './goal_spec';
+
+/** @internal */
+export const getChartTypeDescriptionSelector = createCachedSelector([getSpecOrNull], (spec) => {
+  return `${spec?.subtype ?? 'goal'} chart`;
+})(getChartIdSelector);
diff --git a/packages/osd-charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx b/packages/osd-charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx
@@ -21,8 +21,14 @@ import React, { RefObject } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
+import { ScreenReaderSummary } from '../../../../components/accessibility';
 import { onChartRendered } from '../../../../state/actions/chart';
 import { GlobalChartState } from '../../../../state/chart_state';
+import {
+  A11ySettings,
+  DEFAULT_A11Y_SETTINGS,
+  getA11ySettingsSelector,
+} from '../../../../state/selectors/get_accessibility_config';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import { Dimensions } from '../../../../utils/dimensions';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
@@ -34,6 +40,7 @@ interface ReactiveChartStateProps {
   initialized: boolean;
   geometries: ShapeViewModel;
   chartContainerDimensions: Dimensions;
+  a11ySettings: A11ySettings;
 }
 
 interface ReactiveChartDispatchProps {
@@ -97,26 +104,34 @@ class Component extends React.Component<Props> {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/member-ordering
   render() {
     const {
       initialized,
       chartContainerDimensions: { width, height },
       forwardStageRef,
+      a11ySettings,
     } = this.props;
     if (!initialized || width === 0 || height === 0) {
       return null;
     }
     return (
-      <canvas
-        ref={forwardStageRef}
-        className="echCanvasRenderer"
-        width={width * this.devicePixelRatio}
-        height={height * this.devicePixelRatio}
-        style={{
-          width,
-          height,
-        }}
-      />
+      <figure aria-labelledby={a11ySettings.labelId} aria-describedby={a11ySettings.descriptionId}>
+        <canvas
+          ref={forwardStageRef}
+          className="echCanvasRenderer"
+          width={width * this.devicePixelRatio}
+          height={height * this.devicePixelRatio}
+          style={{
+            width,
+            height,
+          }}
+          // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+          role="presentation"
+        >
+          <ScreenReaderSummary />
+        </canvas>
+      </figure>
     );
   }
 }
@@ -138,6 +153,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
     left: 0,
     top: 0,
   },
+  a11ySettings: DEFAULT_A11Y_SETTINGS,
 };
 
 const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
@@ -148,6 +164,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
     initialized: true,
     geometries: geometries(state),
     chartContainerDimensions: getHeatmapContainerSizeSelector(state),
+    a11ySettings: getA11ySettingsSelector(state),
   };
 };
 

diff --git a/packages/osd-charts/src/chart_types/heatmap/state/chart_state.tsx b/packages/osd-charts/src/chart_types/heatmap/state/chart_state.tsx
@@ -130,6 +130,10 @@ export class HeatmapState implements InternalChartState {
     return getDebugStateSelector(globalState);
   }
 
+  getChartTypeDescription() {
+    return 'Heatmap chart';
+  }
+
   eventCallbacks(globalState: GlobalChartState) {
     this.onElementOverCaller(globalState);
     this.onElementOutCaller(globalState);

diff --git a/packages/osd-charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx b/packages/osd-charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx
@@ -21,9 +21,15 @@ import React, { MouseEvent, RefObject } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
+import { ScreenReaderSummary } from '../../../../components/accessibility';
 import { clearCanvas } from '../../../../renderers/canvas';
 import { onChartRendered } from '../../../../state/actions/chart';
 import { ChartId, GlobalChartState } from '../../../../state/chart_state';
+import {
+  A11ySettings,
+  DEFAULT_A11Y_SETTINGS,
+  getA11ySettingsSelector,
+} from '../../../../state/selectors/get_accessibility_config';
 import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
@@ -59,6 +65,7 @@ interface ReactiveChartStateProps {
   multiGeometries: ShapeViewModel[];
   chartContainerDimensions: Dimensions;
   chartId: ChartId;
+  a11ySettings: A11ySettings;
 }
 
 interface ReactiveChartDispatchProps {
@@ -141,23 +148,29 @@ class PartitionComponent extends React.Component<PartitionProps> {
       forwardStageRef,
       initialized,
       chartContainerDimensions: { width, height },
+      a11ySettings,
     } = this.props;
     if (!initialized || width === 0 || height === 0) {
       return null;
     }
-
     return (
-      <canvas
-        ref={forwardStageRef}
-        className="echCanvasRenderer"
-        width={width * this.devicePixelRatio}
-        height={height * this.devicePixelRatio}
-        onMouseMove={this.handleMouseMove.bind(this)}
-        style={{
-          width,
-          height,
-        }}
-      />
+      <figure aria-labelledby={a11ySettings.labelId} aria-describedby={a11ySettings.descriptionId}>
+        <canvas
+          ref={forwardStageRef}
+          className="echCanvasRenderer"
+          width={width * this.devicePixelRatio}
+          height={height * this.devicePixelRatio}
+          onMouseMove={this.handleMouseMove.bind(this)}
+          style={{
+            width,
+            height,
+          }}
+          // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+          role="presentation"
+        >
+          <ScreenReaderSummary />
+        </canvas>
+      </figure>
     );
   }
 
@@ -205,6 +218,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
     left: 0,
     top: 0,
   },
+  a11ySettings: DEFAULT_A11Y_SETTINGS,
 };
 
 const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
@@ -219,6 +233,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
     chartContainerDimensions: getChartContainerDimensionsSelector(state),
     geometriesFoci: partitionDrilldownFocus(state),
     chartId: getChartIdSelector(state),
+    a11ySettings: getA11ySettingsSelector(state),
   };
 };
 

diff --git a/packages/osd-charts/src/chart_types/partition_chart/state/chart_state.tsx b/packages/osd-charts/src/chart_types/partition_chart/state/chart_state.tsx
@@ -27,6 +27,7 @@ import { DebugState } from '../../../state/types';
 import { Dimensions } from '../../../utils/dimensions';
 import { render } from '../renderer/dom/layered_partition_chart';
 import { computeLegendSelector } from './selectors/compute_legend';
+import { getChartTypeDescriptionSelector } from './selectors/get_chart_type_description';
 import { getDebugStateSelector } from './selectors/get_debug_state';
 import { getLegendItemsExtra } from './selectors/get_legend_items_extra';
 import { getLegendItemsLabels } from './selectors/get_legend_items_labels';
@@ -134,4 +135,8 @@ export class PartitionState implements InternalChartState {
   getDebugState(state: GlobalChartState): DebugState {
     return getDebugStateSelector(state);
   }
+
+  getChartTypeDescription(state: GlobalChartState): string {
+    return getChartTypeDescriptionSelector(state);
+  }
 }
diff --git a/.../osd-charts/src/chart_types/partition_chart/state/selectors/get_chart_type_description.ts b/.../osd-charts/src/chart_types/partition_chart/state/selectors/get_chart_type_description.ts
@@ -0,0 +1,28 @@
+/*
+ * 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 { getPartitionSpec } from './partition_spec';
+
+/** @internal */
+export const getChartTypeDescriptionSelector = createCachedSelector([getPartitionSpec], (partitionSpec): string => {
+  return `${partitionSpec?.config.partitionLayout} chart` ?? 'Partition chart';
+})(getChartIdSelector);