Hey there! I've run into this exact issue with Highcharts in Angular before—those focus outlines popping up on mouse hover can be frustrating when you only want them for keyboard accessibility. Let's go through two solid solutions to fix this:

方案1：使用CSS :focus-visible（最简单的现代方案） #

CSS的:focus-visible伪类 was built specifically for this scenario—it only shows the focus outline when the element is focused via keyboard navigation, and automatically ignores focus triggered by mouse hover. Just add this style to your component's CSS file to override Highcharts' default focus behavior:

/* 仅在键盘焦点时显示轮廓，鼠标悬停触发的焦点自动隐藏 */
.highcharts-point:focus:not(:focus-visible) {
  outline: none !important;
}

💡 注意：这个方案依赖浏览器对:focus-visible的支持，所有现代浏览器（Chrome、Firefox、Edge、Safari 15.4+）都完美支持，但如果你的项目需要兼容旧版Safari或其他 legacy 浏览器，方案2会更稳妥。

方案2：使用Highcharts事件+Angular状态追踪（全浏览器兼容） #

If you need broader browser support, we can either track the user's interaction mode (mouse/keyboard) or directly remove the focus state when hovering with a mouse:

子方案2.1：在Highcharts点事件中移除鼠标悬停的焦点

Modify your Highcharts configuration to add a mouseOver event to each pie slice. When the mouse hovers over a slice, we'll manually remove its focus state to hide the outline—this won't affect keyboard navigation or your tooltip functionality:

options: Options = {
  // ... 保留你现有的所有配置
  plotOptions: {
    pie: {
      // ... 现有配置不变
      point: {
        events: {
          mouseOver: function(this: any) {
            // 鼠标悬停时，移除切片元素的焦点状态
            if (this.graphic && this.graphic.element) {
              this.graphic.element.blur();
            }
          }
        }
      }
    },
  },
  // ... 其他配置不变
};

This method is great because it doesn't rely on any CSS features, and your tooltip will still work perfectly—we're only removing the focus state after the tooltip trigger event has already fired.

子方案2.2：追踪用户交互模式（更灵活的扩展方案）

For more granular control, you can track whether the user is using a mouse or keyboard in your Angular component, then toggle focus outlines with CSS classes:

1. Add state tracking and event listeners to your component class:

import { Component, HostListener } from '@angular/core';

// ... 其他必要的导入

@Component({
  selector: 'app-your-chart-component',
  templateUrl: './your-chart-component.component.html',
  styleUrls: ['./your-chart-component.component.css']
})
export class YourChartComponent {
  isUsingMouse = false;

  // 监听鼠标按下事件，标记当前为鼠标交互模式
  @HostListener('document:mousedown')
  onMouseDown() {
    this.isUsingMouse = true;
  }

  // 监听Tab键按下事件，标记当前为键盘交互模式
  @HostListener('document:keydown.tab')
  onTabKeyDown() {
    this.isUsingMouse = false;
  }

  // ... 你的现有代码（Highcharts配置、数据处理等）
}

2. Bind the state to your chart container in the template:

<div class="chart-container" [class.mouse-interaction]="isUsingMouse">
  <highcharts-chart [Highcharts]="Highcharts" [options]="options"></highcharts-chart>
</div>

3. Add the corresponding CSS:

/* 当用户使用鼠标时，隐藏所有切片的焦点轮廓 */
.mouse-interaction .highcharts-point:focus {
  outline: none !important;
}

This approach is super flexible—you can extend it to control focus outlines for other elements in your component too, if needed.

验证效果 #

After implementing either solution, make sure to test both interaction modes:

1. Mouse hover: Hover over pie slices—no focus outline should appear, but your tooltip should still pop up normally.
2. Keyboard navigation: Use the Tab key to navigate to slices— the focus outline should appear as expected for keyboard users.

Let me know if you run into any issues with either approach! 😊