Keyboard navigation support in Angular - Step-by-Step Execution

Concept Flow - Keyboard navigation support

User presses key

↓

Angular listens to key event

↓

Check which key was pressed

↓

Arrow keys

↓

Move focus

↓

Update focused element

↓

Screen reader and visual focus update

When a user presses a key, Angular listens and checks the key. If it's an arrow key, it moves focus accordingly, updating the focused element for keyboard navigation.

Execution Sample

Angular

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-nav',
  template: `<div tabindex="0" (keydown)="onKeydown($event)">Item 1</div><div tabindex="0" (keydown)="onKeydown($event)">Item 2</div>`
})
export class NavComponent {
  onKeydown(event: KeyboardEvent) {
    if(event.key === 'ArrowDown') {
      // move focus to next element
    }
  }
}

This Angular component listens for keydown events on a focusable div and moves focus when the down arrow key is pressed.

Execution Table

Step	Key Pressed	Event Detected	Condition Checked	Action Taken	Focus State
1	'ArrowDown'	Yes	event.key === 'ArrowDown' is True	Move focus to next element	Focus moves from Item 1 to Item 2
2	'ArrowDown'	Yes	event.key === 'ArrowDown' is True	Move focus to next element	Focus stays on Item 2 (last element)
3	'ArrowUp'	Yes	event.key === 'ArrowDown' is False	No action or custom action	Focus stays on Item 2
4	'Enter'	Yes	event.key === 'ArrowDown' is False	No action or custom action	Focus stays on Item 2
5	'Tab'	Yes	event.key === 'ArrowDown' is False	Default browser tab behavior	Focus moves out of component
6	No key (end)	No	No event	No action	Focus remains or moves as per user

💡 Execution stops when no key event occurs or focus leaves the component.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
focusedElement	Item 1	Item 2	Item 2	Item 2	Item 2	Outside or last focused element

Key Moments - 3 Insights

Why doesn't focus move past the last item when pressing ArrowDown?

Because the condition in step 2 shows focus is already on the last element, so no further move happens to avoid losing focus inside the component.

What happens if a key other than ArrowDown is pressed?

As shown in steps 3 and 4, the condition for ArrowDown is false, so no focus move occurs unless custom logic is added.

How does Angular detect the key press event?

Angular uses the (keydown) event binding on a focusable element, as shown in the code sample, to listen and respond to key presses.

Visual Quiz - 3 Questions

Look at the execution table, what is the focused element after step 1?

A Item 2

B Item 1

C No element focused

D Outside component

💡 Hint

Check the 'Focus State' column in row for step 1.

At which step does pressing 'ArrowDown' no longer move the focus?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Action Taken' and 'Focus State' columns for steps 1 and 2.

If the 'Tab' key is pressed, what happens to the focus according to the table?

A Focus moves to next item inside component

B Focus stays on current item

C Focus moves out of component

D Focus is lost

💡 Hint

See step 5's 'Action Taken' and 'Focus State' columns.

Concept Snapshot

Keyboard navigation in Angular:
- Use (keydown) event on focusable elements
- Check event.key for arrow keys
- Move focus programmatically with element.focus()
- Prevent focus moving outside unintentionally
- Supports accessibility and screen readers
- Always test keyboard flow for usability

Full Transcript

This visual execution shows how Angular supports keyboard navigation by listening to keydown events on focusable elements. When the user presses keys like ArrowDown, Angular checks the key and moves focus to the next element if possible. The execution table traces each key press step, showing how focus changes or stays. Variables track which element is focused after each step. Key moments clarify why focus stops at the last item and how other keys behave. The quiz tests understanding of focus changes and event handling. This approach helps build accessible Angular apps with smooth keyboard navigation.