Agent skill

keyboard-navigation

Keyboard accessibility, focus management, and shortcuts.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/keyboard-navigation

SKILL.md

Keyboard Navigation Skill

Expert assistance for keyboard accessibility.

Capabilities

  • Implement keyboard navigation
  • Manage focus
  • Create keyboard shortcuts
  • Handle focus trapping
  • Test keyboard access

Focus Management

tsx
// Focus trap for modals
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]);
}

Target Processes

  • keyboard-accessibility
  • focus-management
  • accessibility-implementation

Didn't find tool you were looking for?

Be as detailed as possible for better results