a11y: support ARIA attributes, role and fallback content for canvas

[d-koppenhagen]

Would you like to work on this feature?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

The underlying lib Chart.js renders everything on a canvas. So it's up to us as developers to make charts accessible by providing ARIA attributes / an appropriate role. In the Chart.js docs are some hints about how to make the charts accessible:
https://www.chartjs.org/docs/latest/general/accessibility.html

Currently this wrapper lib creates only a plain canvas element:
https://github.com/apertureless/vue-chartjs/blob/main/src/chart.ts#L115-L117

Describe the solution you'd like

In my opinion there are four things that should be supported by properties / slots and added to the canvas element.

• role: should be defaulted to img to help e.g. screen readers to interpret the canvas semantic (image of a chart)
• aria-label: should be supported by a property to describe the image / chart for visually impaired users
• Fallback-Content: should be supported by a Slot to be able to show when the Browser isn't able to render the canvas
• aria-describedby should be supported by a property to be able to refer to a describing element (e.g. a table representation of the data)

All the points are currently only be able to implement by accessing the ref of the canvas and modifying it which is quite complicated.

The result could look like this:

<canvas
  id="myChartCanvas"
  width="400"
  height="100"
  aria-label="myAriaLabel" role="img"
  aria-describedby="rawChartDataAsTable">
  Some fallback content displayed, when the canvas could not be rendered.
</canvas>
<table id="rawChartDataAsTable"> ... </table>

Describe alternatives you've considered

Documentation, Adoption, Migration Strategy

This shouldn't be a breaking change.