Keyboard navigation support in Angular - Mini Project: Build & Apply

Keyboard navigation support

📖 Scenario: You are building a simple Angular component that displays a list of items. You want to make sure users can navigate the list using the keyboard for better accessibility.

🎯 Goal: Create an Angular standalone component that renders a list of three items. Add keyboard navigation support so users can move focus up and down the list using the arrow keys.

📋 What You'll Learn

Create a standalone Angular component named KeyboardNavComponent.

Use a signal to track the currently focused item index.

Render a list of three items: Item 1, Item 2, and Item 3.

Add keyboard event handling to move focus up and down with arrow keys.

Use the *ngFor directive to render the list items.

Add tabindex attributes to make items focusable.

Ensure the focused item has a visible outline for accessibility.

💡 Why This Matters

🌍 Real World

Keyboard navigation is essential for accessibility in web apps. Users who cannot use a mouse rely on keyboard controls to interact with lists, menus, and other UI elements.

💼 Career

Many frontend developer roles require knowledge of accessibility best practices, including keyboard navigation support in Angular applications.

1

Create the list data

Create a standalone Angular component named KeyboardNavComponent. Inside the component, create a readonly signal called items that holds an array with the strings 'Item 1', 'Item 2', and 'Item 3'.

Angular

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

@Component({
  selector: 'app-keyboard-nav',
  standalone: true,
  template: `
    
  `
})
export class KeyboardNavComponent {
  // Your code here
}

Hint

Use signal from @angular/core to create a reactive array named items.

2

Add focused index signal

Inside the KeyboardNavComponent, add a signal named focusedIndex initialized to 0. This will track which item is currently focused.

Angular

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

@Component({
  selector: 'app-keyboard-nav',
  standalone: true,
  template: `
    
  `
})
export class KeyboardNavComponent {
  readonly items = signal(['Item 1', 'Item 2', 'Item 3']);
  // Your code here
}

Hint

Use signal(0) to create a reactive number named focusedIndex.

3

Render list with keyboard navigation

Update the component template to render a <ul> with a *ngFor directive over items(). For each item, render a <li> with tabindex set to 0 if the index equals focusedIndex(), otherwise -1. Add a (keydown) event handler on the <ul> that calls a method onKeydown($event).

Angular

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

@Component({
  selector: 'app-keyboard-nav',
  standalone: true,
  template: `
    
  `
})
export class KeyboardNavComponent {
  readonly items = signal(['Item 1', 'Item 2', 'Item 3']);
  focusedIndex = signal(0);

  // Your code here
}

Hint

Use *ngFor to loop over items(). Use [attr.tabindex] to set focusable attribute. Add (keydown) event on <ul>.

4

Implement keyboard navigation logic

Complete the onKeydown(event: KeyboardEvent) method to update focusedIndex when the user presses the ArrowDown or ArrowUp keys. Increase focusedIndex by 1 on ArrowDown unless at the last item, and decrease by 1 on ArrowUp unless at the first item. Use event.preventDefault() to stop page scrolling.

Angular

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

@Component({
  selector: 'app-keyboard-nav',
  standalone: true,
  template: `
    
      
        {{ item }}
      
    
  `,
  styles: [
    `.focused { outline: 2px solid blue; }`
  ]
})
export class KeyboardNavComponent {
  readonly items = signal(['Item 1', 'Item 2', 'Item 3']);
  focusedIndex = signal(0);

  onKeydown(event: KeyboardEvent) {
    // Your code here
  }
}

Hint

Check event.key for 'ArrowDown' and 'ArrowUp'. Use this.focusedIndex.set() to update the focused index.

Practice

1. What is the main purpose of adding keyboard navigation support in an Angular app?

easy

A. To allow users to navigate the app using keyboard keys

B. To improve the app's loading speed

C. To change the app's color scheme automatically

D. To add animations when clicking buttons

Solution

1. Step 1: Understand keyboard navigation

   Keyboard navigation lets users move through app elements using keys like arrows or tab.

2. Step 2: Identify the purpose in Angular apps

   Adding keyboard navigation improves accessibility and user experience by enabling key-based movement.

3. Final Answer:

   To allow users to navigate the app using keyboard keys -> Option A

4. Quick Check:

   Keyboard navigation = user key movement [OK]

Hint: Keyboard navigation means moving with keys, not visuals [OK]

Common Mistakes:

• Confusing keyboard navigation with app speed
• Thinking it changes colors or animations
• Assuming it only works with mouse clicks

2. Which Angular syntax correctly listens for the 'ArrowDown' key press on a button?

easy

A. Click

B. Click

C. Click

D. Click

Solution

1. Step 1: Recall Angular event binding syntax

   Angular uses parentheses for events and lowercase event names with dots for key names.

2. Step 2: Match correct key event syntax

   The correct syntax is (keydown.arrowdown) with lowercase and dot notation.

3. Final Answer:

   <button (keydown.arrowdown)="onArrowDown()">Click</button> -> Option B

4. Quick Check:

   Angular key event = (keydown.arrowdown) [OK]

Hint: Use lowercase and dot for key events in Angular [OK]

Common Mistakes:

• Using uppercase letters in event names
• Replacing dot with dash or camelCase
• Missing parentheses around event

3. Given this Angular snippet, what happens when the user presses the 'ArrowDown' key?

<button #btn1 (keydown.arrowdown)="focusNext(1)">One</button>
<button #btn2 (keydown.arrowdown)="focusNext(2)">Two</button>
<button #btn3>Three</button>

Assuming focusNext(index) sets focus to the button at that index, which button gets focused after pressing 'ArrowDown' on button 1?

medium

A. Button One again

B. Button Three

C. Button Two

D. No button gets focused

Solution

1. Step 1: Understand the event binding

   Pressing 'ArrowDown' on button 1 triggers focusNext(1), which focuses button at index 1 (button 2).

2. Step 2: Identify which button is at index 1

   Button Two is the second button, so it receives focus.

3. Final Answer:

   Button Two -> Option C

4. Quick Check:

   ArrowDown on btn1 focuses btn2 [OK]

Hint: Index 1 means second button, so focus moves there [OK]

Common Mistakes:

• Assuming index starts at 0 instead of 1
• Thinking focus stays on the same button
• Confusing button labels with indexes

4. You wrote this Angular code to move focus on 'ArrowDown', but it does not work:

@ViewChildren('btn') buttons: QueryList<ElementRef>;

focusNext(index: number) {
  this.buttons.toArray()[index].nativeElement.focus;
}

What is the error preventing focus from moving?

medium

A. Index should be zero-based, not one-based

B. Wrong decorator used instead of @ViewChild

C. QueryList does not support toArray() method

D. Missing parentheses after focus method call

Solution

1. Step 1: Check method call syntax

   The code uses nativeElement.focus without parentheses, so the focus method is not called.

2. Step 2: Understand method invocation

   To move focus, focus() must be called with parentheses to execute it.

3. Final Answer:

   Missing parentheses after focus method call -> Option D

4. Quick Check:

   Call focus() with () to move focus [OK]

Hint: Remember to call focus() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses on method calls
• Confusing @ViewChild and @ViewChildren usage
• Assuming toArray() is invalid on QueryList

5. You want to create a keyboard navigation system in Angular where pressing 'ArrowDown' moves focus to the next item, and pressing 'ArrowUp' moves focus to the previous item in a list of buttons. Which approach correctly supports this behavior and handles edge cases (start and end of list)?

hard

A. Use @ViewChildren to get buttons, then in keydown handlers call focusNext(index) or focusPrev(index) with checks to wrap focus from last to first and vice versa

B. Use @ViewChild for each button separately and manually set focus without index checks

C. Use (keydown) event without specifying keys and call focus() on the first button always

D. Use native JavaScript event listeners outside Angular to manage focus without Angular bindings

Solution

1. Step 1: Understand Angular focus management

   @ViewChildren collects all buttons, allowing indexed access to manage focus programmatically.

2. Step 2: Handle keydown events with wrapping logic

   Using keydown handlers for ArrowUp and ArrowDown with index checks lets you move focus up/down and wrap from last to first or first to last.

3. Step 3: Compare options for correctness

   Use @ViewChildren to get buttons, then in keydown handlers call focusNext(index) or focusPrev(index) with checks to wrap focus from last to first and vice versa uses Angular patterns and handles edge cases correctly. Others miss index checks or Angular integration.

4. Final Answer:

   Use @ViewChildren to get buttons, then in keydown handlers call focusNext(index) or focusPrev(index) with checks to wrap focus from last to first and vice versa -> Option A

5. Quick Check:

   Indexed focus with wrapping = correct keyboard navigation [OK]

Hint: Use @ViewChildren and wrap focus indexes for smooth navigation [OK]

Common Mistakes:

• Not handling focus wrap at list ends
• Using @ViewChild for multiple elements incorrectly
• Ignoring Angular event bindings and using native listeners