4. Keyboard Navigation

• Ensure all interactive elements are reachable and usable via keyboard.

• Use tabindex="0" for custom components that should be focusable.

• Avoid removing outlines for focused elements (outlines help users see where focus is).

• Use logical tab order—elements should be focusable in a way that matches the visual and functional flow of the page.

• Provide visible focus indicators for all focusable elements.

• Use Angular’s @HostListener to handle keyboard events for custom components:

  // Example: Custom button with keyboard support
  @Component({
    selector: 'app-custom-button',
    template: `<div tabindex="0" role="button" (click)="onClick()">Click Me</div>`
  })
  export class CustomButtonComponent {
    @HostListener('keydown', ['\$event'])
    handleKeyDown(event: KeyboardEvent) {
      if (event.key === 'Enter' || event.key === ' ') {
        this.onClick();
        event.preventDefault();
      }
    }
    onClick() {
      // Button action
    }
  }

• For complex widgets (menus, dialogs, etc.), follow WAI-ARIA Authoring Practices for keyboard interaction patterns.

• Use skip links and landmarks to help keyboard users jump to main content quickly.