From e3fc2b0e2a35ee0053f9c87c7410bf4f0bbb3865 Mon Sep 17 00:00:00 2001
From: NagallaThanvi <2410030063@klh.edu.in>
Date: Sat, 15 Nov 2025 18:31:51 +0530
Subject: [PATCH] fix(curriculum): add interactive examples to aria-label
 lecture (#63862)

Co-authored-by: Nagalla Thanvi <nagallathanvi@gmail.com>
---
 .../672a54a6675c168faa84252d.md                      | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md
index c32d34450f6..9f6ade44bf2 100644
--- a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md
+++ b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54a6675c168faa84252d.md
@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-the-roles-of-the-aria-label-and-aria-labelledby-attributes
 ---
 
-# --description--
+# --interactive--
 
 It is important to make sure that all users, including those living with disabilities, can access websites without issues.
 
@@ -21,7 +21,7 @@ Here is an example:
 
 ```html
 <button aria-label="Search">
-  <i class="fas fa-search"></i>
+  <i class="fa-solid fa-magnifying-glass"></i>
 </button>
 ```
 
@@ -35,14 +35,20 @@ The `aria-labelledby` attribute does the exact same thing as the `aria-label` at
 
 Here's an example:
 
+:::interactive_editor
+
 ```html
 <input type="text" aria-labelledby="search-btn">
 <button type="button" id="search-btn">Search</button>
 ```
 
+:::
+
 In this case, the text for the button is being used as the label for the search input. Screen readers will announce the input as something like `Search, edit`. If you later decide you want to change the button text to `Find`, the label for the input will automatically be updated to the new text since it is referencing the button text.
 Combining multiple `id` values into a single `aria-labelledby` attribute value is also possible. Here's how that works:
 
+:::interactive_editor
+
 ```html
 <div>
   <span id="volume-label">Volume</span>
@@ -56,6 +62,8 @@ Combining multiple `id` values into a single `aria-labelledby` attribute value i
 </div>
 ```
 
+:::
+
 For the slider, the screen reader will look out for the content of the `volume-label` and `volume-details` elements and announce `Volume Adjust the volume level`.
 
 You've seen that both `aria-label` and `aria-labelledby` attributes help screen readers understand what elements do. So, which one should you use? Since they both provide the same functionality, either can be used, but there may be a few advantages to using `aria-labelledby` over `aria-label`: