正确管理浮动 Tooltip 焦点顺序提升可访问性

function findNextFocusableElement(startEl, direction = 'next') {
  const allFocusables = Array.from(
    document.querySelectorAll(
      'button:not([disabled]), [href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
    )
  ).filter(el => {
    const style = window.getComputedStyle(el);
    return style.display !== 'none' && style.visibility !== 'hidden' && el.offsetParent !== null;
  });

  const currentIndex = allFocusables.indexOf(startEl);
  if (currentIndex === -1) return null;

  if (direction === 'next') {
    return allFocusables.slice(currentIndex + 1).find(el => el.tabIndex >= 0 || el.tagName === 'A' || el.tagName === 'BUTTON');
  } else {
    return allFocusables.slice(0, currentIndex).reverse().find(el => el.tabIndex >= 0 || el.tagName === 'A' || el.tagName === 'BUTTON');
  }
}

在 Tooltip 组件中集成该逻辑：

const handleTooltipBlur = () => {
  if (!triggerRef.current) return;

  const nextEl = findNextFocusableElement(triggerRef.current);
  if (nextEl) {
    // 使用 setTimeout 绕过 React 合成事件与 DOM 更新时序冲突
    setTimeout(() => {
      nextEl.focus({ preventScroll: true });
      setTooltipVisible(false);
    }, 0);
  } else {
    // 无后续元素时，回退至 Trigger 自身（保持焦点不丢失）
    triggerRef.current.focus();
    setTooltipVisible(false);
  }
};

⚠️ 注意事项

• 不要使用 focus() 同步调用：React Portal 渲染后 DOM 可能尚未完成重排，直接 focus() 易失败；setTimeout(..., 0) 或 requestAnimationFrame 是稳定兜底方案。
• 避免硬编码 tabindex 序列：页面其他组件可能动态增删 focusable 元素，应始终基于实时 DOM 查询。
• 支持反向 Tab（Shift+Tab）：若需支持从 tooltip 向上导航，可扩展 findNextFocusableElement(..., 'prev') 并绑定 onKeyDown 监听 Shift+Tab。
• 屏幕阅读器兼容性：配合 aria-describedby 或 aria-labelledby 关联 Trigger 与 Tooltip 内容，并为 tooltip 容器添加 role="dialog" 和 aria-modal="true"（若为模态型），确保语义正确传达。

✅ 总结

真正符合无障碍标准的 Tooltip，其焦点行为不应是“独立模块”，而应是页面整体导航流的有机延伸。通过精准定位触发器在全局焦点序列中的位置，并在关闭时主动桥接下一个合法焦点目标，我们既保留了 portal 渲染的布局自由度，又严格遵循了「焦点顺序应与内容逻辑顺序一致」这一黄金准则。此模式同样适用于 Dropdown、Combobox、Context Menu 等所有脱离原生 DOM 位置的浮层组件。

以上就是《正确管理浮动 Tooltip 焦点顺序提升可访问性》的详细内容，更多关于的资料请关注golang学习网公众号！