From 7213ca0586076cd8bc5764f01009340c7730102a Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sun, 2 Jan 2022 15:58:30 +0900
Subject: [PATCH] feat(treemap): add support for basic aria attributes to all
 flavors

---
 packages/treemap/src/TreeMap.tsx             | 6 ++++++
 packages/treemap/src/TreeMapCanvas.tsx       | 8 ++++++++
 packages/treemap/src/TreeMapHtml.tsx         | 8 ++++++++
 website/src/data/components/treemap/props.ts | 8 +++++++-
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/treemap/src/TreeMap.tsx b/packages/treemap/src/TreeMap.tsx
index 53f9989538..3a3cda62ed 100644
--- a/packages/treemap/src/TreeMap.tsx
+++ b/packages/treemap/src/TreeMap.tsx
@@ -59,6 +59,9 @@ const InnerTreeMap = <Datum extends TreeMapDatum>({
     onClick,
     tooltip = svgDefaultProps.tooltip as unknown as TreeMapCommonProps<Datum>['tooltip'],
     role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
 }: InnerTreeMapProps<Datum>) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
@@ -101,6 +104,9 @@ const InnerTreeMap = <Datum extends TreeMapDatum>({
             margin={margin}
             defs={boundDefs}
             role={role}
+            ariaLabel={ariaLabel}
+            ariaLabelledBy={ariaLabelledBy}
+            ariaDescribedBy={ariaDescribedBy}
         >
             <TreeMapNodes<Datum>
                 nodes={nodes}
diff --git a/packages/treemap/src/TreeMapCanvas.tsx b/packages/treemap/src/TreeMapCanvas.tsx
index 55158cc624..4f8ad722a5 100644
--- a/packages/treemap/src/TreeMapCanvas.tsx
+++ b/packages/treemap/src/TreeMapCanvas.tsx
@@ -61,6 +61,10 @@ const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
     onClick,
     tooltip = canvasDefaultProps.tooltip as unknown as TreeMapCommonProps<Datum>['tooltip'],
     pixelRatio = canvasDefaultProps.pixelRatio,
+    role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
 }: InnerTreeMapCanvasProps<Datum>) => {
     const canvasEl = useRef<HTMLCanvasElement | null>(null)
 
@@ -208,6 +212,10 @@ const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
             onMouseMove={isInteractive ? handleMouseHover : undefined}
             onMouseLeave={isInteractive ? handleMouseLeave : undefined}
             onClick={isInteractive ? handleClick : undefined}
+            role={role}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-describedby={ariaDescribedBy}
         />
     )
 }
diff --git a/packages/treemap/src/TreeMapHtml.tsx b/packages/treemap/src/TreeMapHtml.tsx
index ae5caa3cfa..55f74c7ecd 100644
--- a/packages/treemap/src/TreeMapHtml.tsx
+++ b/packages/treemap/src/TreeMapHtml.tsx
@@ -44,6 +44,10 @@ const InnerTreeMapHtml = <Datum extends TreeMapDatum>({
     onMouseLeave,
     onClick,
     tooltip = htmlDefaultProps.tooltip as unknown as TreeMapCommonProps<Datum>['tooltip'],
+    role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
 }: InnerTreeMapHtmlProps<Datum>) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
@@ -79,6 +83,10 @@ const InnerTreeMapHtml = <Datum extends TreeMapDatum>({
 
     return (
         <div
+            role={role}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-describedby={ariaDescribedBy}
             style={{
                 position: 'relative',
                 width: outerWidth,
diff --git a/website/src/data/components/treemap/props.ts b/website/src/data/components/treemap/props.ts
index 931e30036d..b4fdbd8ac8 100644
--- a/website/src/data/components/treemap/props.ts
+++ b/website/src/data/components/treemap/props.ts
@@ -5,7 +5,12 @@ import {
     groupProperties,
     themeProperty,
 } from '../../../lib/componentProperties'
-import { chartDimensions, ordinalColors, isInteractive } from '../../../lib/chart-properties'
+import {
+    chartDimensions,
+    ordinalColors,
+    isInteractive,
+    commonAccessibilityProps,
+} from '../../../lib/chart-properties'
 import { ChartProperty, Flavor } from '../../../types'
 
 const allFlavors: Flavor[] = ['svg', 'html', 'canvas', 'api']
@@ -335,6 +340,7 @@ const props: ChartProperty[] = [
         help: 'onClick handler.',
         required: false,
     },
+    ...commonAccessibilityProps(allFlavors),
     ...motionProperties(['svg', 'html', 'canvas'], defaults, 'react-spring'),
 ]