Keyboard navigation support in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is keyboard navigation support in Angular?

Keyboard navigation support means making your Angular app usable with a keyboard alone, so users can move through interactive elements using keys like Tab, Enter, and arrow keys.

beginner

Which Angular directive helps manage keyboard events easily?

The @HostListener decorator lets you listen to keyboard events like keydown or keyup on components or elements.

beginner

Why should you use tabindex in Angular templates?

tabindex controls the order in which elements receive focus when users press the Tab key, helping create a logical navigation flow.

intermediate

How does Angular's new control flow syntax help with keyboard navigation?

Angular 17+ introduces @if and @for which can dynamically show or hide elements, so you can update keyboard focus targets smoothly as UI changes.

beginner

What role does ARIA play in keyboard navigation support?

ARIA attributes provide extra info to assistive technologies, helping users understand focus states and element roles when navigating with a keyboard.

Which key is commonly used to move focus to the next interactive element?

A Tab

B Enter

C Escape

D Space

The Tab key moves focus forward through interactive elements.

In Angular, which decorator listens to keyboard events on a component?

A @Output

B @Input

C @HostListener

D @Injectable

@HostListener listens to events like keyboard presses on components.

What does setting tabindex="-1" on an element do?

A Makes element focusable by Tab key

B Highlights element visually

C Disables element completely

D Removes element from Tab order but allows programmatic focus

tabindex="-1" removes element from Tab order but lets scripts focus it.

Which ARIA attribute helps indicate the current focused item in a list?

A aria-selected

B aria-hidden

C aria-label

D aria-checked

aria-selected marks the focused or selected item in a list.

What Angular feature helps update focus targets when UI elements change dynamically?

A NgModules

B New control flow syntax (@if/@for)

C Standalone components

D Template-driven forms

The new @if and @for control flow lets you update UI and focus targets smoothly.

Explain how to implement basic keyboard navigation support in an Angular component.

Think about focus order, event listening, and accessibility.

Describe why keyboard navigation is important and how Angular features help improve it.

Consider accessibility and Angular tools.