From 3564f8232adbd9eb8dd612bbfdaad31341c6c25a Mon Sep 17 00:00:00 2001
From: rshen91 <rachelwshen@gmail.com>
Date: Tue, 13 Apr 2021 13:37:23 -0600
Subject: [PATCH] feat: add alt text for parititon charts

---
 .../renderer/canvas/partition.tsx             | 32 ++++++++++++-------
 .../xy_chart/renderer/canvas/xy_chart.tsx     |  2 +-
 .../__snapshots__/chart.test.tsx.snap         |  2 +-
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/chart_types/partition_chart/renderer/canvas/partition.tsx b/src/chart_types/partition_chart/renderer/canvas/partition.tsx
index f993240c3b..258f6b127e 100644
--- a/src/chart_types/partition_chart/renderer/canvas/partition.tsx
+++ b/src/chart_types/partition_chart/renderer/canvas/partition.tsx
@@ -141,23 +141,31 @@ class PartitionComponent extends React.Component<PartitionProps> {
       forwardStageRef,
       initialized,
       chartContainerDimensions: { width, height },
+      geometries: { partitionLayout },
     } = 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>
+        <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"
+        />
+        <dl className="echScreenReaderOnly">
+          <dt>Chart type</dt>
+          <dd>{partitionLayout}</dd>
+        </dl>
+      </figure>
     );
   }
 
diff --git a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
index 40a174a841..f11711ef0f 100644
--- a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
+++ b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
@@ -179,7 +179,7 @@ class XYChartComponent extends React.Component<XYChartProps> {
           // eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
           role="presentation"
         >
-          <dl className="echScreen-reader">
+          <dl className="echScreenReaderOnly">
             <dt>Chart type</dt>
             <dd>{chartSeriesTypes}</dd>
           </dl>
diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap
index 6c1e2f571a..e1ecf5bf89 100644
--- a/src/components/__snapshots__/chart.test.tsx.snap
+++ b/src/components/__snapshots__/chart.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`Chart should render the legend name test 1`] = `
                   <XYChart forwardStageRef={{...}} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} seriesTypes={{...}} onChartRendered={[Function (anonymous)]}>
                     <figure>
                       <canvas className=\\"echCanvasRenderer\\" width={150} height={200} style={{...}} role=\\"presentation\\">
-                        <dl className=\\"echScreen-reader\\">
+                        <dl className=\\"echScreenReaderOnly\\">
                           <dt>
                             Chart type
                           </dt>