Bird
0
0

You want to support keyboard navigation in a custom Angular dropdown. Which combination is best practice?

hard📝 component behavior Q9 of 15
Angular - Internationalization and Accessibility
You want to support keyboard navigation in a custom Angular dropdown. Which combination is best practice?
AUse tabindex="0" on dropdown items and handle (keydown.ArrowDown) and (keydown.ArrowUp) to move focus.
BUse only mouse events; keyboard support is optional.
CSet tabindex="-1" on all items to prevent focus.
DReload the page on any key press to reset dropdown.
Step-by-Step Solution
Solution:

  1. Step 1: Enable focus on dropdown items

    tabindex="0" allows keyboard users to focus each item.

  2. Step 2: Handle arrow keys for navigation

    Listening to (keydown.ArrowDown) and (keydown.ArrowUp) moves focus through items.

  3. Final Answer:

    Use tabindex="0" on dropdown items and handle (keydown.ArrowDown) and (keydown.ArrowUp) to move focus. -> Option A

  4. Quick Check:

    Dropdown keyboard navigation best practice = D [OK]
Quick Trick: Combine tabindex and arrow key handlers for dropdowns [OK]
Common Mistakes:
  • Ignoring keyboard users
  • Using tabindex="-1" disables focus
  • Reloading page on key press

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes
Animations - Animate method for timing - Quiz 15hard Internationalization and Accessibility - Locale switching - Quiz 4medium Performance Optimization - Lazy loading routes and modules - Quiz 11easy Performance Optimization - Bundle size analysis - Quiz 12easy Server-Side Rendering - Why SSR matters for Angular - Quiz 3easy State Management - Signals as modern state primitive - Quiz 3easy State Management - Effects for side effects - Quiz 5medium State Management - When NgRx is overkill - Quiz 4medium State Management - NgRx store concept - Quiz 13medium Testing - Why testing Angular apps matters - Quiz 4medium