feat(pie): added aria hidden and disabled flag for arcs

packages/arcs/src/ArcShape.tsx

@@ -1,4 +1,4 @@
-import { useCallback, MouseEvent } from 'react'
+import { useCallback, MouseEvent, AriaAttributes } from 'react'
 import { SpringValue, Interpolation, animated } from '@react-spring/web'
 import { DatumWithArcAndColor } from './types'
 
@@ -16,6 +16,11 @@ export interface ArcShapeProps<Datum extends DatumWithArcAndColor> {
         borderColor: SpringValue<string>
         path: Interpolation<string>
     }
+    ariaLabel?: AriaAttributes['aria-label']
+    ariaLabelledBy?: AriaAttributes['aria-labelledby']
+    ariaDescribedBy?: AriaAttributes['aria-describedby']
+    ariaHidden?: AriaAttributes['aria-hidden']
+    ariaDisabled?: AriaAttributes['aria-disabled']
     onClick?: ArcMouseHandler<Datum>
     onMouseEnter?: ArcMouseHandler<Datum>
     onMouseMove?: ArcMouseHandler<Datum>
@@ -31,6 +36,11 @@ export interface ArcShapeProps<Datum extends DatumWithArcAndColor> {
 export const ArcShape = <Datum extends DatumWithArcAndColor>({
     datum,
     style,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    ariaHidden,
+    ariaDisabled,
     onClick,
     onMouseEnter,
     onMouseMove,
@@ -63,6 +73,11 @@ export const ArcShape = <Datum extends DatumWithArcAndColor>({
             fill={datum.fill || style.color}
             stroke={style.borderColor}
             strokeWidth={style.borderWidth}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-describedby={ariaDescribedBy}
+            aria-hidden={ariaHidden}
+            aria-disabled={ariaDisabled}
             onClick={onClick ? handleClick : undefined}
             onMouseEnter={onMouseEnter ? handleMouseEnter : undefined}
             onMouseMove={onMouseMove ? handleMouseMove : undefined}

packages/arcs/src/ArcsLayer.tsx

@@ -1,4 +1,4 @@
-import { createElement } from 'react'
+import { createElement, AriaAttributes } from 'react'
 import { useTheme } from '@nivo/theming'
 import { InheritedColorConfig, useInheritedColor } from '@nivo/colors'
 import { DatumWithArcAndColor, ArcGenerator } from './types'
@@ -16,6 +16,11 @@ interface ArcsLayerProps<Datum extends DatumWithArcAndColor> {
     arcGenerator: ArcGenerator
     borderWidth: number
     borderColor: InheritedColorConfig<Datum>
+    ariaLabel?: (datum: Datum) => AriaAttributes['aria-label']
+    ariaLabelledBy?: (datum: Datum) => AriaAttributes['aria-labelledby']
+    ariaDescribedBy?: (datum: Datum) => AriaAttributes['aria-describedby']
+    ariaHidden?: (datum: Datum) => AriaAttributes['aria-hidden']
+    ariaDisabled?: (datum: Datum) => AriaAttributes['aria-disabled']
     onClick?: ArcMouseHandler<Datum>
     onMouseEnter?: ArcMouseHandler<Datum>
     onMouseMove?: ArcMouseHandler<Datum>
@@ -30,6 +35,11 @@ export const ArcsLayer = <Datum extends DatumWithArcAndColor>({
     arcGenerator,
     borderWidth,
     borderColor,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    ariaHidden,
+    ariaDisabled,
     onClick,
     onMouseEnter,
     onMouseMove,
@@ -84,6 +94,11 @@ export const ArcsLayer = <Datum extends DatumWithArcAndColor>({
                             arcGenerator
                         ),
                     },
+                    ariaLabel: ariaLabel ? ariaLabel(datum) : undefined,
+                    ariaLabelledBy: ariaLabelledBy ? ariaLabelledBy(datum) : undefined,
+                    ariaDescribedBy: ariaDescribedBy ? ariaDescribedBy(datum) : undefined,
+                    ariaHidden: ariaHidden ? ariaHidden(datum) : undefined,
+                    ariaDisabled: ariaDisabled ? ariaDisabled(datum) : undefined,
                     onClick,
                     onMouseEnter,
                     onMouseMove,

packages/pie/src/Arcs.tsx

@@ -18,6 +18,11 @@ interface ArcsProps<RawDatum> {
     setActiveId: (id: null | string | number) => void
     tooltip: CompletePieSvgProps<RawDatum>['tooltip']
     transitionMode: CompletePieSvgProps<RawDatum>['transitionMode']
+    arcAriaLabel?: CompletePieSvgProps<RawDatum>['arcAriaLabel']
+    arcAriaLabelledBy?: CompletePieSvgProps<RawDatum>['arcAriaLabelledBy']
+    arcAriaDescribedBy?: CompletePieSvgProps<RawDatum>['arcAriaDescribedBy']
+    arcAriaHidden?: CompletePieSvgProps<RawDatum>['arcAriaHidden']
+    arcAriaDisabled?: CompletePieSvgProps<RawDatum>['arcAriaDisabled']
 }
 
 export const Arcs = <RawDatum,>({
@@ -34,6 +39,11 @@ export const Arcs = <RawDatum,>({
     setActiveId,
     tooltip,
     transitionMode,
+    arcAriaLabel,
+    arcAriaLabelledBy,
+    arcAriaDescribedBy,
+    arcAriaHidden,
+    arcAriaDisabled,
 }: ArcsProps<RawDatum>) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
@@ -86,6 +96,11 @@ export const Arcs = <RawDatum,>({
             onMouseEnter={handleMouseEnter}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
+            ariaLabel={arcAriaLabel}
+            ariaLabelledBy={arcAriaLabelledBy}
+            ariaDescribedBy={arcAriaDescribedBy}
+            ariaHidden={arcAriaHidden}
+            ariaDisabled={arcAriaDisabled}
         />
     )
 }

packages/pie/src/Pie.tsx

@@ -72,6 +72,11 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
     ariaLabel,
     ariaLabelledBy,
     ariaDescribedBy,
+    arcAriaLabel,
+    arcAriaLabelledBy,
+    arcAriaDescribedBy,
+    arcAriaHidden,
+    arcAriaDisabled,
     forwardedRef,
 }: PieSvgProps<RawDatum> & {
     forwardedRef: Ref<SVGSVGElement>
@@ -145,6 +150,11 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
                 setActiveId={setActiveId}
                 tooltip={tooltip}
                 transitionMode={transitionMode}
+                arcAriaLabel={arcAriaLabel}
+                arcAriaLabelledBy={arcAriaLabelledBy}
+                arcAriaDescribedBy={arcAriaDescribedBy}
+                arcAriaHidden={arcAriaHidden}
+                arcAriaDisabled={arcAriaDisabled}
             />
         )
     }

packages/pie/src/types.ts

@@ -151,6 +151,11 @@ export type PieSvgProps<RawDatum> = DataProps<RawDatum> &
         ariaLabel?: AriaAttributes['aria-label']
         ariaLabelledBy?: AriaAttributes['aria-labelledby']
         ariaDescribedBy?: AriaAttributes['aria-describedby']
+        arcAriaLabel?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-label']
+        arcAriaLabelledBy?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-labelledby']
+        arcAriaDescribedBy?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-describedby']
+        arcAriaHidden?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-hidden']
+        arcAriaDisabled?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-disabled']
     }
 
 export type CompletePieSvgProps<RawDatum> = DataProps<RawDatum> &
@@ -166,6 +171,11 @@ export type CompletePieSvgProps<RawDatum> = DataProps<RawDatum> &
         ariaLabel?: AriaAttributes['aria-label']
         ariaLabelledBy?: AriaAttributes['aria-labelledby']
         ariaDescribedBy?: AriaAttributes['aria-describedby']
+        arcAriaLabel?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-label']
+        arcAriaLabelledBy?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-labelledby']
+        arcAriaDescribedBy?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-describedby']
+        arcAriaHidden?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-hidden']
+        arcAriaDisabled?: (data: ComputedDatum<RawDatum>) => AriaAttributes['aria-disabled']
     }
 
 export type PieCanvasProps<RawDatum> = DataProps<RawDatum> &

packages/pie/tests/Pie.test.tsx

@@ -805,6 +805,38 @@ describe('Pie', () => {
             expect(svg.props['aria-labelledby']).toBeUndefined()
             expect(svg.props['aria-describedby']).toBeUndefined()
         })
+
+        it('should add aria attributes to arcs', () => {
+            const instance = create(
+                <Pie
+                    width={400}
+                    height={400}
+                    data={sampleData}
+                    arcAriaLabel={datum => `Arc ${datum.id}`}
+                    arcAriaLabelledBy={datum => `label-${datum.id}`}
+                    arcAriaDescribedBy={datum => `desc-${datum.id}`}
+                    arcAriaHidden={datum => datum.id === 'B'}
+                    arcAriaDisabled={datum => datum.id === 'B'}
+                />
+            ).root
+
+            const arcs = instance.findAllByType(ArcShape)
+            expect(arcs).toHaveLength(3)
+
+            const paths = arcs.map(arc => arc.findByType('path'))
+
+            expect(paths[0].props['aria-label']).toBe('Arc A')
+            expect(paths[0].props['aria-labelledby']).toBe('label-A')
+            expect(paths[0].props['aria-describedby']).toBe('desc-A')
+            expect(paths[0].props['aria-hidden']).toBe(false)
+            expect(paths[0].props['aria-disabled']).toBe(false)
+
+            expect(paths[1].props['aria-label']).toBe('Arc B')
+            expect(paths[1].props['aria-labelledby']).toBe('label-B')
+            expect(paths[1].props['aria-describedby']).toBe('desc-B')
+            expect(paths[1].props['aria-hidden']).toBe(true)
+            expect(paths[1].props['aria-disabled']).toBe(true)
+        })
     })
 
     describe('layers', () => {

website/src/data/components/pie/props.ts

@@ -12,6 +12,7 @@ import {
     chartRef,
     ordinalColors,
     isInteractive,
+    commonAccessibilityProps,
 } from '../../../lib/chart-properties'
 import { ChartProperty, Flavor } from '../../../types'
 
@@ -718,6 +719,47 @@ const props: ChartProperty[] = [
             },
         },
     },
+    ...commonAccessibilityProps(['svg'], defaultProps),
+    {
+        key: 'arcAriaLabel',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-label](https://www.w3.org/TR/wai-aria/#aria-label) for arcs.',
+        type: '(data: ComputedDatum) => string | undefined',
+    },
+    {
+        key: 'arcAriaLabelledBy',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) for arcs.',
+        type: '(data: ComputedDatum) => string | undefined',
+    },
+    {
+        key: 'arcAriaDescribedBy',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) for arcs.',
+        type: '(data: ComputedDatum) => string | undefined',
+    },
+    {
+        key: 'arcAriaHidden',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-hidden](https://www.w3.org/TR/wai-aria/#aria-hidden) for arcs.',
+        type: '(data: ComputedDatum) => boolean | undefined',
+    },
+    {
+        key: 'arcAriaDisabled',
+        flavors: ['svg'],
+        required: false,
+        group: 'Accessibility',
+        help: '[aria-disabled](https://www.w3.org/TR/wai-aria/#aria-disabled) for arcs.',
+        type: '(data: ComputedDatum) => boolean | undefined',
+    },
 ]
 
 export const groups = groupProperties(props)