Apply AriaAttributes to Marimekko chart

packages/marimekko/src/Marimekko.tsx

@@ -52,6 +52,9 @@ const InnerMarimekko = <Datum,>({
     onMouseLeave,
     legends = svgDefaultProps.legends,
     role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
     forwardedRef,
 }: MarimekkoSvgProps<Datum> & {
     forwardedRef: Ref<SVGSVGElement>
@@ -169,6 +172,9 @@ const InnerMarimekko = <Datum,>({
             margin={margin}
             defs={boundDefs}
             role={role}
+            ariaLabel={ariaLabel}
+            ariaLabelledBy={ariaLabelledBy}
+            ariaDescribedBy={ariaDescribedBy}
             ref={forwardedRef}
         >
             {layers.map((layer, i) => {

packages/marimekko/src/types.ts

@@ -1,3 +1,4 @@
+import { AriaAttributes } from 'react'
 import * as React from 'react'
 import {
     stackOffsetDiverging,
@@ -131,6 +132,9 @@ export interface MarimekkoCommonProps<Datum> {
     tooltip: BarTooltipType<Datum>
     legends: readonly LegendProps[]
     role?: string
+    ariaLabel?: AriaAttributes['aria-label']
+    ariaLabelledBy?: AriaAttributes['aria-labelledby']
+    ariaDescribedBy?: AriaAttributes['aria-describedby']
 }
 
 export type MouseEventHandler<Datum, ElementType> = (

packages/marimekko/tests/Marimekko.test.tsx

@@ -79,3 +79,22 @@ describe('layout', () => {
         expect(sizes[2].height).toBeGreaterThan(sizes[0].height)
     })
 })
+
+describe('accessibility', () => {
+    it('should forward root aria properties to the SVG element', () => {
+        const wrapper = mount(
+            <Marimekko
+                {...commonProps}
+                ariaLabel="AriaLabel"
+                ariaLabelledBy="AriaLabelledBy"
+                ariaDescribedBy="AriaDescribedBy"
+            />
+        )
+
+        const svg = wrapper.find('svg')
+
+        expect(svg.prop('aria-label')).toBe('AriaLabel')
+        expect(svg.prop('aria-labelledby')).toBe('AriaLabelledBy')
+        expect(svg.prop('aria-describedby')).toBe('AriaDescribedBy')
+    })
+})