无障碍开发：键盘触发自动点击及Banner焦点锁定问题求助

核心问题修正 #

• 事件绑定错误：原代码中onKeyDown = {this.handleTab()}会直接执行函数，应改为onKeyDown={this.handleTab}，才是正确的事件绑定方式。
• 焦点丢失问题：调用e.preventDefault()后需主动将焦点重置到Banner内的目标元素，避免焦点游离。

完整实现方案 #

1. 焦点锁定逻辑 #

要确保焦点始终在Banner范围内，需：

• 追踪Banner内所有可聚焦元素（按钮、链接、输入框等）
• 监听键盘事件，当焦点试图移出Banner时，强制将焦点循环到Banner内的元素上

2. 任意按键恢复焦点 #

在键盘事件处理函数中，判断当前焦点是否在Banner内，若不在则立即将焦点设置到Banner的首个可聚焦元素。

3. Tab键触发自动点击 #

当检测到Tab键按下时，找到Banner内需要触发点击的目标元素，调用其原生click()方法。

完整代码示例 #

class Banner extends React.Component {
  constructor(props) {
    super(props);
    this.bannerRef = React.createRef();
    this.targetActionRef = React.createRef();
  }

  componentDidMount() {
    // 页面加载完成后，默认将焦点定位到Banner内的交互元素
    this.targetActionRef.current.focus();
  }

  handleKeyDown = (e) => {
    const bannerContainer = this.bannerRef.current;
    const currentFocus = document.activeElement;

    // 任意按键触发：若焦点不在Banner内，强制拉回
    if (!bannerContainer.contains(currentFocus)) {
      e.preventDefault();
      this.targetActionRef.current.focus();
      return;
    }

    // Tab键处理：触发自动点击 + 焦点循环
    if (e.key === 'Tab') {
      e.preventDefault();
      // 触发目标元素的点击事件
      this.targetActionRef.current.click();

      // 获取Banner内所有可聚焦元素
      const focusableItems = bannerContainer.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      const firstItem = focusableItems[0];
      const lastItem = focusableItems[focusableItems.length - 1];

      // 处理Shift+Tab的反向焦点循环
      if (e.shiftKey) {
        currentFocus === firstItem ? lastItem.focus() : focusableItems[Array.from(focusableItems).indexOf(currentFocus) - 1].focus();
      } else {
        currentFocus === lastItem ? firstItem.focus() : focusableItems[Array.from(focusableItems).indexOf(currentFocus) + 1].focus();
      }
    }
  };

  render() {
    return (
      <div 
        ref={this.bannerRef} 
        onKeyDown={this.handleKeyDown} 
        role="dialog" 
        aria-modal="true"
        style={{ padding: '20px', border: '1px solid #ccc' }}
      >
        <h3>无障碍提示Banner</h3>
        <p>请完成操作后关闭Banner</p>
        {/* 需要自动点击的目标元素 */}
        <button ref={this.targetActionRef} onClick={() => console.log("Banner内操作触发")}>
          确认操作
        </button>
        <button style={{ marginLeft: '10px' }} onClick={() => console.log("Banner关闭")}>
          关闭Banner
        </button>
      </div>
    );
  }
}

关键细节说明 #

• 使用ref获取Banner容器和目标元素，便于直接操作焦点与触发点击事件
• 通过contains方法判断焦点归属，确保焦点不会逃出Banner范围
• Tab键处理实现了焦点循环，符合WCAG无障碍交互规范
• 初始加载时主动设置焦点，满足无障碍访问的基础要求

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