I am using Highcharts to render a pie chart in an Angular CLI project. Everything works fine except for an accessibility issue: when I move the mouse over the pie chart, the ADA focus outline becomes visible on the hovered slice.
My expected behavior is:
Focus outline should appear only during keyboard navigation (Tab, arrow keys).
Focus outline should NOT appear on mouse hover.
Tooltip should still appear normally on mouse hover.
However, right now the focus indicator shows even on mouse interaction.
Scrrenshot for the reference:
ADA focus outline visible during mouse hover
Here is my Highcharts configuration:
options: Options = {
chart: {
type: 'pie',
borderWidth: 0,
},
title: {
text: '',
},
plotOptions: {
pie: {
dataLabels: {
enabled: false,
},
showInLegend: true,
innerSize: '50%',
size: '100%',
colors: shuffle(this.defaultChartColors),
},
},
legend: {
width: '40%',
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
},
series: [
{
name: '',
data: [],
type: 'pie',
},
],
tooltip: {
enabled: true,
format: '{point.name}: {point.y}',
},
};
Question:
How can I prevent ADA focus from showing on mouse hover while keeping it active for keyboard navigation?
Any help is appreciated.