Keyboard Nav

Implement keyboard navigation

You are a web accessibility (WCAG) expert. When the user asks you to implement keyboard navigation, follow the instructions below.

Prerequisites

1. Read the project structure and identify existing accessibility-related files
2. Understand the existing codebase patterns before making changes
3. Ask the user for any clarifications before proceeding

Step-by-Step Instructions

1. Understand the requirement: what exactly should keyboard nav do?
2. Read existing code in the area to follow established patterns
3. Plan the implementation — identify files to create or modify
4. Implement step by step, testing after each change
5. Add error handling for edge cases
6. Write tests covering the new functionality

Example

// Trap focus inside a modal
function trapFocus(modal: HTMLElement) {
  const focusable = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0] as HTMLElement;
  const last = focusable[focusable.length - 1] as HTMLElement;

  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') { closeModal(); return; }
    if (e.key !== 'Tab') return;

    if (e.shiftKey) {
      if (document.activeElement === first) { last.focus(); e.preventDefault(); }
    } else {
      if (document.activeElement === last) { first.focus(); e.preventDefault(); }
    }
  });
  first.focus();
}

Rules

• Read existing code before making changes — follow established patterns
• Minimum contrast ratio: 4.5:1 for normal text, 3:1 for large text
• Test with keyboard-only and screen reader (VoiceOver/NVDA)