Keyboard navigation support in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a keyboard event listener for the Enter key.

Angular

onKeydown(event: KeyboardEvent) {
  if (event.key === [1]) {
    console.log('Enter pressed');
  }
}

Drag options to blanks, or click blank then click option'

A'Escape'

B'Enter'

C'Space'

D'Tab'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'enter' instead of 'Enter' (case sensitive).

Using keyCode instead of key property.

The Enter key is identified by the string 'Enter' in the KeyboardEvent.key property.

2fill in blank

medium

Complete the template code to make a button focusable and respond to keyboard events.

Angular

<button (keydown)="onKeydown($event)" [1]>Click me</button>

Drag options to blanks, or click blank then click option'

Atabindex="0"

Bdisabled

Caria-hidden="true"

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using disabled attribute which prevents focus.

Using aria-hidden which hides element from assistive tech.

Setting tabindex="0" makes the button focusable by keyboard navigation.

3fill in blank

hard

Fix the error in the keyboard event handler to prevent default scrolling on Space key press.

Angular

onKeydown(event: KeyboardEvent) {
  if (event.key === [1]) {
    event.preventDefault();
    this.activate();
  }
}

Drag options to blanks, or click blank then click option'

A'Space'

B'Spacebar'

C' '

D'Enter'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Spacebar' which is deprecated.

Using a single space character ' ' which is incorrect.

The correct key string for the Space key is 'Space' in modern browsers.

4fill in blank

hard

Fill both blanks to add ARIA roles and keyboard support for a custom toggle component.

Angular

<div role=[1] tabindex=[2] (keydown)="onToggleKeydown($event)">
  Toggle</div>

Drag options to blanks, or click blank then click option'

A"switch"

B"button"

C"0"

D"-1"

Attempts:

3 left

💡 Hint

Common Mistakes

Using role="switch" which is for toggle switches, not buttons.

Using tabindex="-1" which removes element from tab order.

Use role="button" to indicate a clickable element and tabindex="0" to make it keyboard focusable.

5fill in blank

hard

Fill all three blanks to implement keyboard navigation between list items.

Angular

onKeydown(event: KeyboardEvent, index: number) {
  const maxIndex = this.items.length - 1;
  switch(event.key) {
    case [1]:
      this.focusItem(index - 1 < 0 ? maxIndex : index - 1);
      break;
    case [2]:
      this.focusItem(index + 1 > maxIndex ? 0 : index + 1);
      break;
    case [3]:
      this.selectItem(index);
      break;
  }
}

Drag options to blanks, or click blank then click option'

A'ArrowUp'

B'ArrowDown'

C'Enter'

D'Escape'

Attempts:

3 left

💡 Hint

Common Mistakes

Using Escape instead of Enter for selection.

Mixing up ArrowUp and ArrowDown keys.

ArrowUp moves focus up, ArrowDown moves focus down, and Enter selects the item.