elastic-charts icon indicating copy to clipboard operation
elastic-charts copied to clipboard

Improve accessibility of `onAnnotationClick`

Open smith opened this issue 3 years ago • 1 comments

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

smith avatar Sep 03 '21 16:09 smith

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.

rshen91 avatar Sep 07 '21 19:09 rshen91