SlickGrid单元格Tab键导航：实现激活后聚焦箭头图标

问题场景 #

单元格结构如下：

<div class="slick-cell">
    <div title="First">
        <span class="menu-icon">
          <i class="icon-folder"></i>
        </span>
        <span class="text">First</span>
        <div>
             <span class="number">2</span>
             <span class="arrow" tabindex="1">
                 <i class="icon-arrow"></i>
             </span>
        </div>
   </div>
</div>

需求：按下Tab键时，首次激活单元格，再次按下Tab聚焦单元格内的.arrow图标，同时为箭头添加回车按键触发的事件。

解决方案步骤 #

1. 调整元素可聚焦性

先确保单元格的内层容器（包裹内容的<div title="First">）具备可聚焦能力，设置tabindex="0"让首次Tab能定位到单元格；同时将.arrow的tabindex改为0，保证它是单元格内的可聚焦元素：

<div class="slick-cell">
    <div title="First" tabindex="0"> <!-- 添加可聚焦属性 -->
        <span class="menu-icon">
          <i class="icon-folder"></i>
        </span>
        <span class="text">First</span>
        <div>
             <span class="number">2</span>
             <span class="arrow" tabindex="0"> <!-- 统一可聚焦层级 -->
                 <i class="icon-arrow"></i>
             </span>
        </div>
   </div>
</div>

2. 拦截SlickGrid默认Tab行为

SlickGrid默认会用Tab切换单元格，需要阻止这个默认行为，让Tab在单元格内部完成导航：

// 监听SlickGrid的键盘事件
grid.onKeyDown.subscribe(function(e) {
  const activeEl = document.activeElement;
  // 当前焦点在单元格容器上时，拦截Tab并聚焦箭头
  if (e.key === 'Tab' && activeEl.matches('.slick-cell > div[tabindex="0"]')) {
    e.stopPropagation();
    if (!e.shiftKey) {
      activeEl.querySelector('.arrow').focus();
      e.preventDefault();
    }
  }
  // 焦点在箭头元素上时，可按需决定是否放行Tab到下一个单元格
  else if (e.key === 'Tab' && activeEl.matches('.arrow')) {
    e.stopPropagation();
    // 若需要让Tab继续切换单元格，可注释下面一行；否则保留阻止默认行为
    // e.preventDefault();
  }
});

3. 为箭头添加回车事件监听

给.arrow绑定回车按键事件，实现自定义操作逻辑：

// 全局监听回车事件
document.addEventListener('keydown', function(e) {
  if (e.key === 'Enter' && e.target.matches('.arrow')) {
    // 这里写入回车触发的业务逻辑，比如展开菜单、执行操作等
    console.log('箭头图标被回车触发');
    e.stopPropagation();
  }
});

额外优化 #

可以通过CSS伪类添加焦点视觉反馈，提升用户体验：

.slick-cell > div[tabindex="0"]:focus {
  outline: 2px solid #165DFF;
  border-radius: 4px;
}
.arrow:focus {
  outline: 2px solid #165DFF;
  border-radius: 4px;
}

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