Chart legend circle elements fail accessibility test as all have identical id

[peteharverson]

The circle elements used in chart legends all use the identical id of dot-a, which causes an accessibility issue, as revealed by the axe web accessibility testing tool.

Can be seen on https://elastic.github.io/elastic-charts/?path=/story/legend--right, or for example:

This will block accessibility tests being added for elastic/kibana#51456 on any pages which use an Elastic chart where the legend is visible.

[nickofthyme]

Thanks @peteharverson we'll fix that ASAP.

[darnautov]

hey! 👋 Not sure if #971 fix suffices, because it's possible to have multiple charts with the same legend on the same page. Prepending a unique chart id to the id attribute should work. cc @rshen91 @nickofthyme

[rshen91]

@darnautov good call - there is a new PR without any id (no longer needed) that should address this issue - #973

[markov00]

🎉 This issue has been resolved in version 24.5.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀