patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

Published 20 hours ago • verified publisher icon patternfly

Add id prop to fix docs a11y violations

Open dlabrecq opened this issue 2 years ago • 1 comments

This adds an name prop to Chart in order to resolve the docs a11y violations, related to duplicate IDs.

Victory uses the name prop as a prefix when creating child element IDs. This mimics that behavior so we don't need to create a new prop for ChartAxis, ChartLegend, etc.

https://github.com/patternfly/patternfly-react/issues/7675

Example:

When the top Chart component uses name="chart1", axis tick label IDs are output as:

"chart1-ChartAxis-0-ChartLabel-0"
"chart1-ChartAxis-0-ChartLabel-1"
...

Dependent axis tick label IDs are output as:

"chart1-ChartAxis-1-ChartLabel-0"
"chart1-ChartAxis-1-ChartLabel-1"
...

And legend label IDs are output as:

"chart1-ChartLegend-ChartLabel-0"
"chart1-ChartLegend-ChartLabel-1"
...

This covers all the main Chart components:

Chart
ChartAxis
ChartBullet
ChartDonut
ChartDonutUtilization
ChartDonutThreshold
ChartLegend
ChartPie

Screenshot from browser inspector: Screen Shot 2022-08-09 at 10 58 38 AM

dlabrecq avatar Aug 09 '22 15:08 dlabrecq

Preview: https://patternfly-react-pr-7808.surge.sh

A11y report: https://patternfly-react-pr-7808-a11y.surge.sh

patternfly-build avatar Aug 09 '22 15:08 patternfly-build

Your changes have been released in:

Thanks for your contribution! :tada:

patternfly-build avatar Aug 16 '22 19:08 patternfly-build