[Solved] Identify the error in this Angular template snippet:<div role="button" [aria-checked]="isChecked">Click me</div>Assuming isChecked is a boolean in the component. | Angular

Angular - Internationalization and Accessibility

Identify the error in this Angular template snippet:

<div role="button" [aria-checked]="isChecked">Click me</div>

Assuming isChecked is a boolean in the component.

ARole attribute cannot be 'button' on a div

BBoolean cannot be bound to ARIA attributes

CIncorrect binding syntax; should use [attr.aria-checked]

DMissing closing tag for div

Step-by-Step Solution

Solution:

Step 1: Check ARIA attribute binding syntax
ARIA attributes are not DOM properties, so binding must use [attr.aria-checked] instead of [aria-checked].
Step 2: Verify role and HTML correctness
Using role="button" on a div is valid for accessibility. The div tag is properly closed.
Final Answer:
Incorrect binding syntax; should use [attr.aria-checked] -> Option C
Quick Check:
Use [attr.aria-...] for ARIA binding [OK]

Quick Trick: Always use [attr.aria-...] for ARIA bindings, not direct property [OK]

Common Mistakes:

Master "Internationalization and Accessibility" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Identify the error in this Angular template snippet: