diff --git a/packages/bar/src/Bar.tsx b/packages/bar/src/Bar.tsx index d0dd26ec1..d972e2946 100644 --- a/packages/bar/src/Bar.tsx +++ b/packages/bar/src/Bar.tsx @@ -101,6 +101,8 @@ const InnerBar = ({ barAriaLabel, barAriaLabelledBy, barAriaDescribedBy, + barAriaHidden, + barAriaDisabled, initialHiddenIds, @@ -257,6 +259,8 @@ const InnerBar = ({ ariaLabel: barAriaLabel, ariaLabelledBy: barAriaLabelledBy, ariaDescribedBy: barAriaDescribedBy, + ariaHidden: barAriaHidden, + ariaDisabled: barAriaDisabled, }), [ borderRadius, @@ -274,6 +278,8 @@ const InnerBar = ({ barAriaLabel, barAriaLabelledBy, barAriaDescribedBy, + barAriaHidden, + barAriaDisabled, ] ) diff --git a/packages/bar/src/BarItem.tsx b/packages/bar/src/BarItem.tsx index 7ac2cf789..79089aedc 100644 --- a/packages/bar/src/BarItem.tsx +++ b/packages/bar/src/BarItem.tsx @@ -36,6 +36,8 @@ export const BarItem = ({ ariaLabel, ariaLabelledBy, ariaDescribedBy, + ariaDisabled, + ariaHidden, }: BarItemProps) => { const theme = useTheme() const { showTooltipFromEvent, showTooltipAt, hideTooltip } = useTooltip() @@ -93,6 +95,8 @@ export const BarItem = ({ 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 index ec545851e..b28334e05 100644 --- a/packages/bar/src/types.ts +++ b/packages/bar/src/types.ts @@ -174,6 +174,8 @@ export interface BarItemProps ariaLabel?: BarSvgProps['barAriaLabel'] ariaLabelledBy?: BarSvgProps['barAriaLabelledBy'] ariaDescribedBy?: BarSvgProps['barAriaDescribedBy'] + ariaHidden?: BarSvgProps['barAriaHidden'] + ariaDisabled?: BarSvgProps['barAriaDisabled'] } export type RenderBarProps = Omit< @@ -185,6 +187,8 @@ export type RenderBarProps = Omit< | 'ariaLabel' | 'ariaLabelledBy' | 'ariaDescribedBy' + | 'ariaHidden' + | 'ariaDisabled' > & { borderColor: string labelColor: string @@ -293,6 +297,8 @@ export type BarSvgProps = Partial ) => React.AriaAttributes['aria-describedby'] + barAriaHidden?: (data: ComputedDatum) => React.AriaAttributes['aria-hidden'] + barAriaDisabled?: (data: ComputedDatum) => React.AriaAttributes['aria-disabled'] }> export type BarCanvasProps = Partial> & diff --git a/website/src/data/components/bar/props.ts b/website/src/data/components/bar/props.ts index 2e5cd406b..d0dd72c74 100644 --- a/website/src/data/components/bar/props.ts +++ b/website/src/data/components/bar/props.ts @@ -591,6 +591,22 @@ const props: ChartProperty[] = [ help: '[aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) for bar items.', type: '(data) => string', }, + { + key: 'barAriaHidden', + flavors: ['svg'], + required: false, + group: 'Accessibility', + help: '[aria-hidden](https://www.w3.org/TR/wai-aria/#aria-hidden) for bar items.', + type: '(data) => boolean', + }, + { + key: 'barAriaDisabled', + flavors: ['svg'], + required: false, + group: 'Accessibility', + help: '[aria-disabled](https://www.w3.org/TR/wai-aria/#aria-disabled) for bar items.', + type: '(data) => boolean', + }, ] export const groups = groupProperties(props)