调整Highcharts React组件外元素的键盘导航顺序

问题背景 #

• 基于Highcharts React构建的Chart组件，ChartContextMenu（右侧齿轮按钮）DOM结构在HighchartsReact组件之前
• 当前键盘Tab导航顺序：齿轮按钮 → 图例 → 系列，符合DOM顺序及keyboardNavigation.order: ["legend", "series"]配置
• 需求：修改为 图例 → 齿轮按钮 → 系列，将组件外的齿轮按钮插入到图表导航序列中间
• 遇到的问题：调整tabIndex无效；参考Highcharts无障碍自定义组件示例时触发TypeError: this is undefined，不确定是否需要扩展Highcharts核心方法

解决方案 #

不需要扩展Highcharts核心方法，通过手动控制焦点流转结合Highcharts事件即可实现需求，步骤如下：

1. 调整Highcharts键盘导航配置 #

先让内置导航仅处理图例，关闭自动循环，方便后续手动控制焦点：

const chartOptions = {
  keyboardNavigation: {
    enabled: true,
    order: ["legend"], // 仅让图例参与内置导航
    wrapAround: false // 禁用自动循环导航，避免干扰手动焦点流转
  },
  // ...其他图表配置
};

2. 监听图例焦点离开，转移到齿轮按钮 #

通过Highcharts的chart.events.load事件获取图例导航元素，监听blur事件，在图例失去焦点时将焦点转移到齿轮按钮：

chart: {
  events: {
    load: function() {
      // this指向当前chart实例
      const legendNavElement = this.legend.navigationGroup.element;
      // 获取齿轮按钮DOM（可通过React ref或ID获取）
      const gearButton = document.getElementById('chart-gear-button');

      legendNavElement.addEventListener('blur', (e) => {
        // 仅在通过Tab键离开图例时触发
        if (!legendNavElement.contains(e.relatedTarget)) {
          gearButton.focus();
        }
      });
    }
  }
}

3. 监听齿轮按钮焦点离开，转移到系列导航 #

在齿轮按钮上添加onBlur事件处理，当按钮失去焦点时，将焦点转移到Highcharts的系列导航元素：

// React组件内定义处理函数
const handleGearBlur = (e) => {
  // 通过HighchartsReact的ref获取chart实例
  const chartInstance = highchartsRef.current.chart;
  const seriesNavElement = chartInstance.seriesNavigationGroup.element;

  // 避免焦点回退到图例时重复触发
  if (e.relatedTarget !== chartInstance.legend.navigationGroup.element) {
    seriesNavElement.focus();
  }
};

// 齿轮按钮JSX
<ChartContextMenu
  id="chart-gear-button"
  ref={gearButtonRef}
  onBlur={handleGearBlur}
  // ...其他属性
/>

4. 修复TypeError: this is undefined问题 #

• 在Highcharts的事件回调中不要使用箭头函数，普通函数会被Highcharts自动绑定到chart实例，确保this指向正确
• React组件内的方法如果需要访问组件实例，用箭头函数定义或在构造函数中绑定this

关键说明 #

无需扩展Highcharts核心方法，通过事件监听+手动焦点控制的方式更轻量，不会破坏Highcharts原有逻辑，同时精准实现自定义导航顺序。

内容的提问来源于stack exchange，提问作者Alvaro Silva