feat(bar): added aria hidden and disabled flag

plouc · Apr 19, 2024 · d3bc823 · d3bc823
1 parent d90a326
commit d3bc823
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/packages/bar/src/Bar.tsx b/packages/bar/src/Bar.tsx
@@ -101,6 +101,8 @@ const InnerBar = <RawDatum extends BarDatum>({
     barAriaLabel,
     barAriaLabelledBy,
     barAriaDescribedBy,
+    barAriaHidden,
+    barAriaDisabled,
 
     initialHiddenIds,
 
@@ -257,6 +259,8 @@ const InnerBar = <RawDatum extends BarDatum>({
             ariaLabel: barAriaLabel,
             ariaLabelledBy: barAriaLabelledBy,
             ariaDescribedBy: barAriaDescribedBy,
+            ariaHidden: barAriaHidden,
+            ariaDisabled: barAriaDisabled,
         }),
         [
             borderRadius,
@@ -274,6 +278,8 @@ const InnerBar = <RawDatum extends BarDatum>({
             barAriaLabel,
             barAriaLabelledBy,
             barAriaDescribedBy,
+            barAriaHidden,
+            barAriaDisabled,
         ]
     )
 

diff --git a/packages/bar/src/BarItem.tsx b/packages/bar/src/BarItem.tsx
@@ -36,6 +36,8 @@ export const BarItem = <RawDatum extends BarDatum>({
     ariaLabel,
     ariaLabelledBy,
     ariaDescribedBy,
+    ariaDisabled,
+    ariaHidden,
 }: BarItemProps<RawDatum>) => {
     const theme = useTheme()
     const { showTooltipFromEvent, showTooltipAt, hideTooltip } = useTooltip()
@@ -93,6 +95,8 @@ export const BarItem = <RawDatum extends BarDatum>({
                 aria-label={ariaLabel ? ariaLabel(data) : undefined}
                 aria-labelledby={ariaLabelledBy ? ariaLabelledBy(data) : undefined}
                 aria-describedby={ariaDescribedBy ? ariaDescribedBy(data) : undefined}
+                aria-disabled={ariaDisabled ? ariaDisabled(data) : undefined}
+                aria-hidden={ariaHidden ? ariaHidden(data) : undefined}
                 onMouseEnter={isInteractive ? handleMouseEnter : undefined}
                 onMouseMove={isInteractive ? handleTooltip : undefined}
                 onMouseLeave={isInteractive ? handleMouseLeave : undefined}

diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
@@ -174,6 +174,8 @@ export interface BarItemProps<RawDatum extends BarDatum>
     ariaLabel?: BarSvgProps<RawDatum>['barAriaLabel']
     ariaLabelledBy?: BarSvgProps<RawDatum>['barAriaLabelledBy']
     ariaDescribedBy?: BarSvgProps<RawDatum>['barAriaDescribedBy']
+    ariaHidden?: BarSvgProps<RawDatum>['barAriaHidden']
+    ariaDisabled?: BarSvgProps<RawDatum>['barAriaDisabled']
 }
 
 export type RenderBarProps<RawDatum extends BarDatum> = Omit<
@@ -185,6 +187,8 @@ export type RenderBarProps<RawDatum extends BarDatum> = Omit<
     | 'ariaLabel'
     | 'ariaLabelledBy'
     | 'ariaDescribedBy'
+    | 'ariaHidden'
+    | 'ariaDisabled'
 > & {
     borderColor: string
     labelColor: string
@@ -293,6 +297,8 @@ export type BarSvgProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawD
         barAriaDescribedBy?: (
             data: ComputedDatum<RawDatum>
         ) => React.AriaAttributes['aria-describedby']
+        barAriaHidden?: (data: ComputedDatum<RawDatum>) => React.AriaAttributes['aria-hidden']
+        barAriaDisabled?: (data: ComputedDatum<RawDatum>) => React.AriaAttributes['aria-disabled']
     }>
 
 export type BarCanvasProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawDatum>> &