Summary

Fixes #1107

There has been great alternative text improvements for cartesian charts and this PR aims to bridge the gap with the other chart types.

The new default with charts (in terms of a11y)

This is a mixed chart (line, bar and area series). Nothing has been configured. In the video below, you can see that a dd element is generated with the following content. This is readable by a screen reader:

<dt>Chart type:</dt>
<dd>Mixed chart: area and line and bar chart</dd>

If you have one type of chart, the generated text will be something like:

<dt>Chart type: </dt>
<dd>goal chart</dd> // or whatever type of series in the chart

Adding a a11y description and disabling the default

Using the same chart as an example, you can add your own custom description for a screen reader user. Use the ariaDescription prop on the Settings component.

In this example below, the autogenerated description is also disabled by setting the ariaUseDefaultSummary to false. The ariaUseDefaultSummary prop defaults to true, and you can always include your own description as well as the default one.

<Settings 
ariaDescription="This chart has three different types of series. There is a bar, line and area series." 
ariaUseDefaultSummary={false} 
/>

Setting the heading level of the screen reader description

You can also change the heading level (instead of <p> as the default seen in the above video) by passing the ariaLabelHeadingLevel to the Settings component. Valid options are "h1", "h2", "h3", "h4", "h5", "h6", or "p".

Setting your own aria-labels, aria-labelledby/aria-describedby properties on charts

Within the Settings component, you can add your own aria-label on the figure surrounding the chart element. Use the ariaLabel prop on the Settings component. You can also set the aria-describedby with the ariaDescribedBy prop or the aria-labeledby with the ariaLabelledBy prop to tie the charts to other accessible elements within your app.

Checklist

• Unit tests were updated or added to match the most common scenarios