elastic-charts
elastic-charts copied to clipboard
Improve accessibility of `onAnnotationClick`
onAnnotationClick
(added in #1293) doesn't seem to be keyboard accessible at all. I would expect tabbing through the document would focus the annotation rectangles (for RectAnnotation
) and markers (for LineAnnotation
.)
We implemented this in APM before this feature was available by using buttons for the markers and that seems to work: https://github.com/elastic/kibana/blob/3122e3f7e01063019916038757a25dcd16cb36f8/x-pack/plugins/apm/public/components/shared/charts/helper/get_alert_annotations.tsx#L148-L166
Due to the nature of canvas elements, we must create a custom mechanism for tracking what is selected within the canvas element. Currently no such mechanism exists, not even for tabbing through the geometry elements within the chart. This could be a next step towards accessibility.
We can however, make the line markers keyboard accessible as those elements are on the DOM and not canvas.