ADA focus visible on pie chart during mouse hover in Highcharts (Angular)
21:49 11 Dec 2025

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.

angular typescript highcharts