如何通过React Ref API查询所有可聚焦元素并实现无障碍Tab键循环聚焦？

数据老陈

2026-4-27

很高兴帮你解决这个问题！要在React里用Ref API实现可聚焦元素的查询，并完成模态框的循环Tab聚焦（符合Web无障碍要求），其实可以结合DOM查询和React Hooks来优化性能，下面是具体的实现方案：

核心思路

虽然React Ref最终还是关联真实DOM，但我们可以通过容器Ref缩小查询范围，再结合useMemo缓存查询结果，避免不必要的DOM重复查询，同时精准筛选符合无障碍标准的可聚焦元素。

具体实现步骤

1. 定义标准可聚焦元素选择器

先整理出符合WCAG标准的可聚焦元素选择器，覆盖常见的可交互元素，同时排除不可通过Tab键切换的元素（比如tabindex="-1"）：

const FOCUSABLE_SELECTORS = [
  'a[href]:not([disabled])',
  'area[href]:not([disabled])',
  'input:not([disabled]):not([type="hidden"])',
  'button:not([disabled])',
  'select:not([disabled])',
  'textarea:not([disabled])',
  '[tabindex]:not([tabindex="-1"]):not([disabled])',
  'audio[controls]:not([disabled])',
  'video[controls]:not([disabled])',
  '[contenteditable="true"]:not([disabled])'
].join(', ');

2. 用Ref获取容器并查询可聚焦元素

在组件中，通过useRef获取容器DOM，再用useMemo缓存查询结果，只有当容器内容或Ref变化时才重新查询：

import { useRef, useMemo, useEffect } from 'react';

function MyComponent() {
  const elementRef = useRef<HTMLDivElement>(null);

  // 获取容器内所有符合条件的可聚焦元素（缓存结果）
  const focusableElements = useMemo(() => {
    if (!elementRef.current) return [];
    
    // 查询所有匹配选择器的元素
    const elements = Array.from(elementRef.current.querySelectorAll(FOCUSABLE_SELECTORS));
    
    // 额外过滤掉不可见元素（比如display:none、visibility:hidden）
    return elements.filter(el => {
      const style = window.getComputedStyle(el);
      return style.display !== 'none' && style.visibility !== 'hidden' && el.offsetParent !== null;
    });
  }, [elementRef.current]); // 容器Ref变化时重新查询

  // 处理Tab键循环聚焦逻辑
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key !== 'Tab') return;

      const firstElement = focusableElements[0];
      const lastElement = focusableElements[focusableElements.length - 1];
      
      // Shift+Tab：从第一个元素跳转到最后一个
      if (e.shiftKey && document.activeElement === firstElement) {
        e.preventDefault();
        lastElement?.focus();
      }
      // Tab：从最后一个元素跳转到第一个
      else if (!e.shiftKey && document.activeElement === lastElement) {
        e.preventDefault();
        firstElement?.focus();
      }
    };

    // 添加全局键盘监听（若仅需模态框内生效，可绑定到容器元素）
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [focusableElements]); // 可聚焦元素列表变化时更新监听

  return (
    <div ref={elementRef}>
      <input placeholder="输入框" />
      <button>按钮</button>
      <section>
        <div tabindex={0} style={{ padding: '10px', border: '1px solid #ccc' }}>可聚焦div</div>
      </section>
      <a href="#test">可点击链接</a>
    </div>
  );
}

3. 关键细节说明

性能优化：用useMemo缓存查询结果，避免每次组件渲染都执行DOM查询；同时限定在容器Ref内查询，比全局document.querySelectorAll范围更小，性能更优。
无障碍适配：过滤掉不可见元素，确保只有用户能看到的元素才会被纳入Tab循环；同时处理Shift+Tab反向循环逻辑，完全符合Web无障碍标准。
动态内容适配：如果组件内的可聚焦元素是动态生成的（比如根据state渲染），需要把相关state加入useMemo的依赖数组，确保focusableElements能及时更新。

额外模态框适配提示

如果你的场景是模态框，还可以补充以下逻辑完善无障碍体验：

模态框打开时，自动聚焦到第一个可聚焦元素；
模态框打开时，保存之前的焦点元素，关闭时恢复焦点；
阻止模态框外的元素被Tab键选中（可通过监听焦点事件或结合aria-modal属性实现）。

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