feat(treemap): add support for basic aria attributes to all flavors

plouc · Jan 2, 2022 · 7213ca0 · 7213ca0
1 parent 7b5b393
commit 7213ca0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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'),
 ]