feat(bar): add labelledby and describedby aria attributes support to SVG bar item component

Author: plouc

packages/bar/src/Bar.tsx

@@ -103,6 +103,8 @@ const InnerBar = <RawDatum extends BarDatum>({
     ariaDescribedBy,
     isFocusable = svgDefaultProps.isFocusable,
     barAriaLabel,
+    barAriaLabelledBy,
+    barAriaDescribedBy,
 
     initialHiddenIds,
 }: InnerBarProps<RawDatum>) => {
@@ -279,6 +281,8 @@ const InnerBar = <RawDatum extends BarDatum>({
             tooltip,
             isFocusable,
             ariaLabel: barAriaLabel,
+            ariaLabelledBy: barAriaLabelledBy,
+            ariaDescribedBy: barAriaDescribedBy,
         }),
         [
             borderRadius,
@@ -294,6 +298,8 @@ const InnerBar = <RawDatum extends BarDatum>({
             tooltip,
             isFocusable,
             barAriaLabel,
+            barAriaLabelledBy,
+            barAriaDescribedBy,
         ]
     )
 

packages/bar/src/BarItem.tsx

@@ -34,6 +34,8 @@ export const BarItem = <RawDatum extends BarDatum>({
 
     isFocusable,
     ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
 }: BarItemProps<RawDatum>) => {
     const theme = useTheme()
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
@@ -81,6 +83,8 @@ export const BarItem = <RawDatum extends BarDatum>({
                 focusable={isFocusable}
                 tabIndex={isFocusable ? 0 : undefined}
                 aria-label={ariaLabel ? ariaLabel() : undefined}
+                aria-labelledby={ariaLabelledBy ? ariaLabelledBy() : undefined}
+                aria-describedby={ariaDescribedBy ? ariaDescribedBy() : undefined}
             />
             {shouldRenderLabel && (
                 <animated.text

packages/bar/src/types.ts

@@ -161,6 +161,8 @@ export interface BarItemProps<RawDatum extends BarDatum>
 
     isFocusable: boolean
     ariaLabel?: BarSvgProps<RawDatum>['barAriaLabel']
+    ariaLabelledBy?: BarSvgProps<RawDatum>['barAriaLabelledBy']
+    ariaDescribedBy?: BarSvgProps<RawDatum>['barAriaDescribedBy']
 }
 
 export type RenderBarProps<RawDatum extends BarDatum> = Omit<
@@ -263,7 +265,9 @@ export type BarSvgProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawD
         ariaLabelledBy?: React.AriaAttributes['aria-labelledby']
         ariaDescribedBy?: React.AriaAttributes['aria-describedby']
         isFocusable?: boolean
-        barAriaLabel?: (...data: any) => string
+        barAriaLabel?: (...data: any) => React.AriaAttributes['aria-label']
+        barAriaLabelledBy?: (...data: any) => React.AriaAttributes['aria-labelledby']
+        barAriaDescribedBy?: (...data: any) => React.AriaAttributes['aria-describedby']
     }>
 
 export type BarCanvasProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawDatum>> &

packages/bar/tests/Bar.test.tsx

@@ -643,20 +643,20 @@ describe('accessibility', () => {
                 ]}
                 keys={['A', 'B']}
                 animate={false}
-                ariaLabel="Aria label"
+                ariaLabel="AriaLabel"
                 ariaLabelledBy="AriaLabelledBy"
                 ariaDescribedBy="AriaDescribedBy"
             />
         )
 
         const svg = wrapper.find('svg')
 
-        expect(svg.prop('aria-label')).toBe('Aria label')
+        expect(svg.prop('aria-label')).toBe('AriaLabel')
         expect(svg.prop('aria-labelledby')).toBe('AriaLabelledBy')
         expect(svg.prop('aria-describedby')).toBe('AriaDescribedBy')
     })
 
-    it('should add an aria-label attribute to bars', () => {
+    it('should add an aria attributes to bars', () => {
         const wrapper = mount(
             <Bar
                 width={500}
@@ -667,15 +667,19 @@ describe('accessibility', () => {
                 ]}
                 keys={['A', 'B']}
                 animate={false}
-                barAriaLabel={() => `Bar aria label`}
+                barAriaLabel={() => 'BarAriaLabel'}
+                barAriaLabelledBy={() => 'BarAriaLabelledBy'}
+                barAriaDescribedBy={() => 'BarAriaDescribedBy'}
             />
         )
 
         wrapper
             .find('BarItem')
             .find('rect')
             .forEach(bar => {
-                expect(bar.prop('aria-label')).toBe('Bar aria label')
+                expect(bar.prop('aria-label')).toBe('BarAriaLabel')
+                expect(bar.prop('aria-labelledby')).toBe('BarAriaLabelledBy')
+                expect(bar.prop('aria-describedby')).toBe('BarAriaDescribedBy')
             })
     })
 })

website/src/data/components/bar/props.js

@@ -602,29 +602,43 @@ const props = [
         key: 'ariaLabel',
         flavors: ['svg'],
         group: 'Accessibility',
-        help: 'Main element aria-label.',
+        help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
         type: 'string',
     },
     {
         key: 'ariaLabelledBy',
         flavors: ['svg'],
         group: 'Accessibility',
-        help: 'Main element aria-labelledby.',
+        help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
         type: 'string',
     },
     {
         key: 'ariaDescribedBy',
         flavors: ['svg'],
         group: 'Accessibility',
-        help: 'Main element aria-describedby.',
+        help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
         type: 'string',
     },
     {
         key: 'barAriaLabel',
         flavors: ['svg'],
         group: 'Accessibility',
-        help: 'Aria label for bar items.',
-        type: 'string | (bar) => string',
+        help: '[aria-label](https://www.w3.org/TR/wai-aria/#aria-label) for bar items.',
+        type: '(bar) => string',
+    },
+    {
+        key: 'barAriaLabelledBy',
+        flavors: ['svg'],
+        group: 'Accessibility',
+        help: '[aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) for bar items.',
+        type: '(bar) => string',
+    },
+    {
+        key: 'barAriaDescribedBy',
+        flavors: ['svg'],
+        group: 'Accessibility',
+        help: '[aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) for bar items.',
+        type: '(bar) => string',
     },
 ]