Apply AriaAttributes to Pie Chart

packages/pie/src/Pie.tsx

@@ -69,6 +69,9 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
     legends = defaultProps.legends,
     forwardLegendData,
     role = defaultProps.role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     forwardedRef,
 }: PieSvgProps<RawDatum> & {
     forwardedRef: Ref<SVGSVGElement>
@@ -212,6 +215,9 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
             margin={margin}
             defs={boundDefs}
             role={role}
+            ariaLabel={ariaLabel}
+            ariaLabelledBy={ariaLabelledBy}
+            ariaDescribedBy={ariaDescribedBy}
             ref={forwardedRef}
         >
             {layers.map((layer, i) => {

packages/pie/src/PieCanvas.tsx

@@ -71,6 +71,9 @@ const InnerPieCanvas = <RawDatum extends MayHaveLabel>({
     legends = defaultProps.legends,
     forwardLegendData,
     role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     forwardedRef,
 }: PieCanvasProps<RawDatum> & {
     forwardedRef: Ref<HTMLCanvasElement>
@@ -290,6 +293,9 @@ const InnerPieCanvas = <RawDatum extends MayHaveLabel>({
             onMouseLeave={isInteractive ? handleMouseLeave : undefined}
             onClick={isInteractive ? handleClick : undefined}
             role={role}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-describedby={ariaDescribedBy}
         />
     )
 }

packages/pie/src/types.ts

@@ -1,3 +1,4 @@
+import { AriaAttributes } from 'react'
 import * as React from 'react'
 import {
     Box,
@@ -146,7 +147,11 @@ export type PieSvgProps<RawDatum> = DataProps<RawDatum> &
         animate?: boolean
         motionConfig?: MotionProps['motionConfig']
         transitionMode?: ArcTransitionMode
-    } & PieSvgCustomComponents<RawDatum>
+    } & PieSvgCustomComponents<RawDatum> & {
+        ariaLabel?: AriaAttributes['aria-label']
+        ariaLabelledBy?: AriaAttributes['aria-labelledby']
+        ariaDescribedBy?: AriaAttributes['aria-describedby']
+    }
 
 export type CompletePieSvgProps<RawDatum> = DataProps<RawDatum> &
     Dimensions &
@@ -157,18 +162,30 @@ export type CompletePieSvgProps<RawDatum> = DataProps<RawDatum> &
         animate: boolean
         motionConfig: MotionProps['motionConfig']
         transitionMode: ArcTransitionMode
-    } & PieSvgCustomComponents<RawDatum>
+    } & PieSvgCustomComponents<RawDatum> & {
+        ariaLabel?: AriaAttributes['aria-label']
+        ariaLabelledBy?: AriaAttributes['aria-labelledby']
+        ariaDescribedBy?: AriaAttributes['aria-describedby']
+    }
 
 export type PieCanvasProps<RawDatum> = DataProps<RawDatum> &
     Dimensions &
     Partial<CommonPieProps<RawDatum>> &
     Pick<PieHandlers<RawDatum, HTMLCanvasElement>, 'onClick' | 'onMouseMove'> & {
         pixelRatio?: number
+    } & {
+        ariaLabel?: AriaAttributes['aria-label']
+        ariaLabelledBy?: AriaAttributes['aria-labelledby']
+        ariaDescribedBy?: AriaAttributes['aria-describedby']
     }
 
 export type CompletePieCanvasProps<RawDatum> = DataProps<RawDatum> &
     Dimensions &
     CommonPieProps<RawDatum> &
     Pick<PieHandlers<RawDatum, HTMLCanvasElement>, 'onClick' | 'onMouseMove'> & {
         pixelRatio: number
+    } & {
+        ariaLabel?: AriaAttributes['aria-label']
+        ariaLabelledBy?: AriaAttributes['aria-labelledby']
+        ariaDescribedBy?: AriaAttributes['aria-describedby']
     }

packages/pie/tests/Pie.test.tsx

@@ -778,6 +778,35 @@ describe('Pie', () => {
         })
     })
 
+    describe('accessibility', () => {
+        it('should forward aria properties to the SVG element', () => {
+            const instance = create(
+                <Pie
+                    width={400}
+                    height={400}
+                    data={sampleData}
+                    ariaLabel="AriaLabel"
+                    ariaLabelledBy="AriaLabelledBy"
+                    ariaDescribedBy="AriaDescribedBy"
+                />
+            ).root
+
+            const svg = instance.findByType('svg')
+            expect(svg.props['aria-label']).toBe('AriaLabel')
+            expect(svg.props['aria-labelledby']).toBe('AriaLabelledBy')
+            expect(svg.props['aria-describedby']).toBe('AriaDescribedBy')
+        })
+
+        it('should not set aria properties if not provided', () => {
+            const instance = create(<Pie width={400} height={400} data={sampleData} />).root
+
+            const svg = instance.findByType('svg')
+            expect(svg.props['aria-label']).toBeUndefined()
+            expect(svg.props['aria-labelledby']).toBeUndefined()
+            expect(svg.props['aria-describedby']).toBeUndefined()
+        })
+    })
+
     describe('layers', () => {
         it('should support disabling a layer', () => {
             const instance = create(