Skip to main content

VictoryAccessibleGroup

A specialized group container that enables users to assign aria-labels, descs and other props specified below which allow for improved access by screen readers. VictoryAccessibleGroup can be used as any groupComponent prop value. VictoryAccessibleGroup will render its children in a <g> element and includes a desc tag if provided as a prop.

Props​

aria-describedby​

type: string

The aria-describedby prop applies to the g element rendered by VictoryAccessibleGroup as well as descId if a desc is provided. This prop should be given as a string corresponding to the id of an element that describes the chart.

aria-label​

type: string

The aria-label prop applies to the g element rendered by VictoryAccessibleGroup.

children​

type: ReactElement | ReactElement[]

VictoryAccessibleGroup renders a single child, or an array of children in the group element.

className​

type: string

The className prop specifies a className that will be applied to the g element rendered by VictoryAccessibleGroup. If this prop is not set, the className will default to "VictoryAccessibleGroup".

example: className="myChartAccessibleGroup"

desc​

type: string

The desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more descriptive this title is, the more useful it will be for people using screen readers.

example: desc="Golden retrievers make up 30%, Labs make up 25%, and other dog breeds are not represented above 5% each."

tabIndex​

type: number

The tabIndex will be applied to the g element.