Keyboard navigation support in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does this Angular component handle keyboard navigation?

Consider this Angular standalone component that manages focus on a list of buttons using keyboard arrows. What happens when the user presses the 'ArrowDown' key?

Angular

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

@Component({
  selector: 'app-keyboard-nav',
  standalone: true,
  template: `
    <div role="list" tabindex="0" (keydown)="onKeydown($event)">
      <button *ngFor="let item of items; let i = index"
              [attr.aria-selected]="i === focusedIndex()"
              [class.focused]="i === focusedIndex()"
              (click)="select(i)"
              tabindex="-1">
        {{item}}
      </button>
    </div>
  `,
  styles: [`.focused { outline: 2px solid blue; }`]
})
export class KeyboardNavComponent {
  items = ['One', 'Two', 'Three'];
  focusedIndex = signal(0);

  onKeydown(event: KeyboardEvent) {
    const maxIndex = this.items.length - 1;
    switch(event.key) {
      case 'ArrowDown':
        this.focusedIndex.set((this.focusedIndex() < maxIndex) ? this.focusedIndex() + 1 : 0);
        event.preventDefault();
        break;
      case 'ArrowUp':
        this.focusedIndex.set((this.focusedIndex() > 0) ? this.focusedIndex() - 1 : maxIndex);
        event.preventDefault();
        break;
    }
  }

  select(index: number) {
    this.focusedIndex.set(index);
  }
}

A The focus moves to the next button in the list, cycling back to the first after the last.

B The focus moves to the previous button in the list, cycling back to the last after the first.

C The component throws an error because the focusedIndex signal is not updated correctly.

D Nothing happens because the keydown event is not handled.

💡 Hint

Look at how the focusedIndex signal changes when 'ArrowDown' is pressed.

Pressing 'ArrowDown' increases the focusedIndex by 1 unless it is at the last item, then it cycles back to 0. This moves the focus visually to the next button.

📝 Syntax

intermediate

Identify the syntax error in this Angular keyboard event handler

Which option contains a syntax error in this Angular keyboard event handler method?

Angular

onKeydown(event: KeyboardEvent) {
  switch(event.key) {
    case 'ArrowLeft':
      this.moveFocusLeft();
      break;
    case 'ArrowRight':
      this.moveFocusRight();
      break;
    default:
      break;
  }
}

A Missing curly braces around switch cases.

B Incorrect use of parentheses in switch statement.

C Missing semicolon after break in case 'ArrowLeft'.

D Using event.key instead of event.code causes syntax error.

💡 Hint

Check punctuation after each case block.

In TypeScript and JavaScript, each statement should end with a semicolon. The missing semicolon after 'break' in the 'ArrowLeft' case is a syntax error.

❓ state_output

advanced

What is the value of focusedIndex after pressing ArrowUp twice?

Given this Angular component with 3 items and initial focusedIndex 0, what is the focusedIndex value after pressing 'ArrowUp' key two times in a row?

Angular

items = ['A', 'B', 'C'];
focusedIndex = signal(0);

onKeydown(event: KeyboardEvent) {
  const maxIndex = this.items.length - 1;
  switch(event.key) {
    case 'ArrowUp':
      this.focusedIndex.set((this.focusedIndex() > 0) ? this.focusedIndex() - 1 : maxIndex);
      break;
  }
}

A 2

B 0

C Throws an error

D 1

💡 Hint

Remember the index cycles to maxIndex when at 0 and ArrowUp is pressed.

Starting at 0, pressing ArrowUp sets focusedIndex to maxIndex (2). Pressing ArrowUp again decreases it to 1.

🔧 Debug

advanced

Why does this Angular keyboard navigation not update focus visually?

This Angular component updates focusedIndex on ArrowDown key but the focused button does not show the blue outline. What is the likely cause?

Angular

template:
<div role="list" tabindex="0" (keydown)="onKeydown($event)">
  <button *ngFor="let item of items; let i = index"
          [attr.aria-selected]="i === focusedIndex()"
          [class.focused]="i === focusedIndex"
          tabindex="-1">
    {{item}}
  </button>
</div>

component:
focusedIndex = signal(0);

onKeydown(event: KeyboardEvent) {
  if(event.key === 'ArrowDown') {
    this.focusedIndex.set((this.focusedIndex() + 1) % this.items.length);
    event.preventDefault();
  }
}

A The tabindex on buttons should be 0 to receive focus.

B The class binding uses 'focusedIndex' instead of 'focusedIndex()' causing no update.

C The event.preventDefault() is missing, so default scrolling overrides focus.

D The signal focusedIndex is not initialized.

💡 Hint

Check how the signal is accessed in the template.

In Angular signals, you must call the signal as a function (focusedIndex()) to get its current value. Using 'focusedIndex' without parentheses does not update the class binding.

🧠 Conceptual

expert

Which ARIA role and attributes best support keyboard navigation in a custom list component?

You build a custom list component with keyboard navigation support. Which ARIA roles and attributes should you use to ensure accessibility and proper keyboard interaction?

A Use role="list" on the container and role="listitem" on each item, with tabindex="-1" on items and manage focus programmatically.

B Use role="menu" on the container and role="menuitem" on each item, with tabindex="0" on all items.

C Use no ARIA roles and rely on native <ul> and <li> elements only.

D Use role="grid" on the container and role="gridcell" on each item, with tabindex="0" on the container only.

💡 Hint

Think about semantic roles for lists and how focus should be managed on items.

Using role="list" and role="listitem" correctly describes the structure. tabindex="-1" on items allows programmatic focus management without tab stops on all items, improving keyboard navigation.