Open alexwizp opened 1 month ago
@nickofthyme do you remember why this is a button
? I don't think this is clickable, do we need that?
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.
This recording starts with an
onAnnotationClick
enabled where it's a<button>
then I remove it and it reverts back to a<div>
.
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.
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.
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:Let's discuss how we can update the API to fix these issues.