键盘导航技能Skill keyboard-navigation

---

名称: 键盘导航技能 描述: 键盘可访问性、焦点管理和快捷键。 允许工具: 读取、写入、编辑、Bash、Glob、Grep

键盘导航技能

提供键盘可访问性的专家协助。

能力

• 实现键盘导航
• 管理焦点
• 创建键盘快捷键
• 处理焦点陷阱
• 测试键盘访问

焦点管理

// 模态框的焦点陷阱
function useFocusTrap(ref: RefObject<HTMLElement>) {
  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const focusableElements = element.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const first = focusableElements[0];
    const last = focusableElements[focusableElements.length - 1];

    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === 'Tab') {
        if (e.shiftKey && document.activeElement === first) {
          e.preventDefault();
          last.focus();
        } else if (!e.shiftKey && document.activeElement === last) {
          e.preventDefault();
          first.focus();
        }
      }
    }

    element.addEventListener('keydown', handleKeyDown);
    return () => element.removeEventListener('keydown', handleKeyDown);
  }, [ref]);
}

目标流程

• 键盘可访问性
• 焦点管理
• 可访问性实施