[Solved] Find the accessibility issue in this Angular template snippet:<div role="button" (click)="doAction()">Click me</div> | Angular

Angular - Internationalization and Accessibility

Find the accessibility issue in this Angular template snippet:

<div role="button" (click)="doAction()">Click me</div>

AThe div should not contain text.

BMissing keyboard event handlers for accessibility.

CThe click event should be replaced with a submit event.

Drole="button" is invalid on div elements.

Step-by-Step Solution

Solution:

Step 1: Understand role="button" usage
Assigning role="button" to a div makes it behave like a button for screen readers.
Step 2: Check for keyboard accessibility
Without keyboard event handlers (like keydown for Enter/Space), keyboard users cannot activate it.
Final Answer:
Missing keyboard event handlers for accessibility. -> Option B
Quick Check:
role=button needs keyboard handlers [OK]

Quick Trick: Add keyboard handlers when using role="button" on div [OK]

Common Mistakes:

Master "Internationalization and Accessibility" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Find the accessibility issue in this Angular template snippet: