[Solved] Analyze this Angular template snippet:<span [attr.aria-checked]="selectionStatus">Item</span>Given selectionStatus can be true, false, or undefined, what is the main issue with this code regarding... | Angular

Angular - Internationalization and Accessibility

Analyze this Angular template snippet:

<span [attr.aria-checked]="selectionStatus">Item</span>

Given selectionStatus can be true, false, or undefined, what is the main issue with this code regarding ARIA compliance?

AThe <code>aria-checked</code> attribute should be bound without brackets

BBoolean values cannot be bound to ARIA attributes

CThe attribute may be set to undefined, which is invalid for ARIA attributes

DThe element should use <code>role="checkbox"</code> for ARIA compliance

Step-by-Step Solution

Solution:

Step 1: Understand ARIA attribute requirements
ARIA attributes expect string values like 'true', 'false', or 'mixed'. Undefined is not valid.
Step 2: Check binding behavior
If selectionStatus is undefined, Angular sets the attribute to the string 'undefined', which is invalid.
Step 3: Identify the issue
Binding directly without handling undefined leads to invalid ARIA attribute values.
Final Answer:
The attribute may be set to undefined, which is invalid for ARIA attributes -> Option C
Quick Check:
Always ensure ARIA attributes have valid string values [OK]

Quick Trick: Avoid undefined values in ARIA attribute bindings [OK]

Common Mistakes:

Master "Internationalization and Accessibility" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Analyze this Angular template snippet: