feat(stream): add aria attributes to the root SVG container

Author: plouc

packages/stream/src/Stream.tsx

@@ -62,7 +62,11 @@ const InnerStream = <RawDatum extends StreamDatum>({
     enableStackTooltip = svgDefaultProps.enableStackTooltip,
 
     legends = svgDefaultProps.legends,
+
     role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
 }: InnerStreamProps<RawDatum>) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
@@ -209,6 +213,9 @@ const InnerStream = <RawDatum extends StreamDatum>({
             margin={margin}
             defs={boundDefs}
             role={role}
+            ariaLabel={ariaLabel}
+            ariaLabelledBy={ariaLabelledBy}
+            ariaDescribedBy={ariaDescribedBy}
         >
             {chartLayers.map((layer, i) => {
                 if (typeof layer === 'function') {

packages/stream/src/types.ts

@@ -1,3 +1,4 @@
+import { AriaAttributes } from 'react'
 import {
     Box,
     Dimensions,
@@ -120,6 +121,9 @@ export type StreamCommonProps<RawDatum extends StreamDatum> = {
     renderWrapper: boolean
 
     role: string
+    ariaLabel: AriaAttributes['aria-label']
+    ariaLabelledBy: AriaAttributes['aria-labelledby']
+    ariaDescribedBy: AriaAttributes['aria-describedby']
 }
 
 export type StreamSvgProps<RawDatum extends StreamDatum> = Partial<StreamCommonProps<RawDatum>> &

packages/stream/tests/Stream.test.tsx

@@ -1,5 +1,6 @@
 import { mount } from 'enzyme'
 import { Stream } from '../src'
+import { Bar } from '@nivo/bar'
 
 type TestDatum = {
     A: number
@@ -25,3 +26,30 @@ it('should render a basic stream chart', () => {
 
     expect(wrapper.find('StreamLayer')).toHaveLength(3)
 })
+
+describe('accessibility', () => {
+    it('should forward root aria properties to the SVG element', () => {
+        const wrapper = mount(
+            <Stream<TestDatum>
+                width={500}
+                height={300}
+                data={[
+                    { A: 10, B: 20, C: 30 },
+                    { A: 20, B: 10, C: 30 },
+                    { A: 30, B: 10, C: 20 },
+                ]}
+                keys={['A', 'B', 'C']}
+                animate={false}
+                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')
+    })
+})