search

elastic / elastic-charts

https://elastic.github.io/elastic-charts/storybook
Other
370 stars 119 forks source link

[LineAnnotation] improve accessibility (a11y) #2520

Open alexwizp opened 1 month ago

alexwizp commented 1 month ago

This issue is related to https://github.com/elastic/kibana/issues/188861. During an a11y audit, we found a couple of issues with that component that we should address.

  1. All modes (clickable and icon modes): The annotation tooltip should be keyboard accessible. Currently, when rendered as a button, focus can be set using the keyboard, but the tooltip does not open. In icon mode, keyboard navigation does not work at all. This violates the WCAG 2.2 guidelines for keyboard accessibility and focus order. Proposed Solution: Please see how EUI team solved that issue for EuiIconTip.

  2. Clickable mode: The tooltip button should have a unique aria-label attribute.
    This violates the WCAG 2.2 guideline on "Info and Relationships". Proposed Solution: We need some mechanizm for setting required aria-label attribute. Axe plugin trigger the following issue here:

Image

Let's discuss how we can update the API to fix these issues.

markov00 commented 2 days ago

@nickofthyme do you remember why this is a button? I don't think this is clickable, do we need that?

nickofthyme commented 2 days ago

Yeah it's clickable when there is a Settings.onAnnotationClick callback defined. It's also handles keyboard a11y but doesn't seem great and the rest of the chart has no keyboard interactions.

Image

This recording starts with an onAnnotationClick enabled where it's a <button> then I remove it and it reverts back to a <div>.