Skip to content

Improve a11y of code insights charts

Administrator requested to merge vk/xychart-event-capturing into main

Created by: vovakulikov

Context

This PR is about PoC of adding our own capture event handlers to a line chart to be able to render links and other elements over the chart in a way that they are accessible to mouse or focus. Also, this PR adds voice-over support for charts.

A bit of context: In line chart, we have a tooltip component. XYChart uses a rect element over all charts to capture events to track users' input and update tooltip position. But in this case, if we render some interactive elements like links or buttons we won't be able to interact with them because we have rect element over them. So because of that, we have to implement our own system of capturing events on some particular element that we would have created ourselves and which would be placed under interactive elements of the chart.

In order to still have tooltip from xychart and pointerOut and pointerMove events from these components, we have to override EventEmitterContext and provide this context from our code (LineChart.tsx). In this case, we would be able to create and bind event handlers to elements which we rendered by ourselves (some rect element overt XY chart but under layer with links).

A bit pseudo code

function LineChart() {
  return (
    <EventEmitterProvider>
        <LineChartContent/>
    </EventEmitterProvider>
  )
}

function LineChartContent() {
    // thanks to EventEmitterProvider we can use this hook and get event handlers
    const handlers = useEventEmitters()
    
    return (
        <svg>
            <XYChart />
            {/* Bind event handlers to elements which placed over XYChart */}
            <rect {...handlers} />
            
            {/* render links and other interactive elements here */}
        </svg>
    )
}

Merge request reports

Loading