Improve a11y of code insights charts
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>
)
}