feat(a11y): add alt text for all chart types

[rshen91]

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>

defaultMixedChart.mp4

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} 
/>

with.custom.description.with.default.turned.off.mp4

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

[codecov-commenter]

Codecov Report

Merging #1118 (9f1c52e) into master (c1b59f2) will increase coverage by 0.38%.
The diff coverage is 0.00%.

❗ Current head 9f1c52e differs from pull request most recent head f13f276. Consider uploading reports for the commit f13f276 to get more accurate results

@@            Coverage Diff             @@
##           master    #1118      +/-   ##
==========================================
+ Coverage   72.26%   72.65%   +0.38%     
==========================================
  Files         387      404      +17     
  Lines       12021    12342     +321     
  Branches     2629     2671      +42     
==========================================
+ Hits         8687     8967     +280     
- Misses       3309     3342      +33     
- Partials       25       33       +8     

Flag	Coverage Δ
unittests	72.21% <0.00%> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...goal_chart/renderer/canvas/connected_component.tsx	33.33% <ø> (ø)
...es/heatmap/renderer/canvas/connected_component.tsx	42.00% <ø> (ø)
...ypes/partition_chart/renderer/canvas/partition.tsx	31.11% <0.00%> (-0.35%)	⬇️
...pes/wordcloud/renderer/svg/connected_component.tsx	21.97% <ø> (ø)
.../chart_types/xy_chart/renderer/canvas/xy_chart.tsx	94.80% <ø> (-0.71%)	⬇️
src/chart_types/xy_chart/state/utils/spec.ts	93.75% <0.00%> (-6.25%)	⬇️
src/specs/settings.tsx	90.32% <0.00%> (ø)
.../xy_chart/state/selectors/get_api_scale_configs.ts	100.00% <0.00%> (ø)
src/mocks/utils.ts	100.00% <0.00%> (ø)
... and 16 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 920e585...f13f276. Read the comment docs.

[markov00]

Few missing things that needs to be fixed

[markov00]

LGTM, I've pushed a slight change on the wordcloud to move the ScreenReaderSummary out of the SVG and changed the svg role to presentation as done in the other canvases

[nickofthyme]

🎉 This PR is included in version 29.2.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀