feat(curriculum): update aria-live lesson with interactive code examples (#63591)

Co-authored-by: Srimukh <vsreemukh4@gmail.com>

curriculum/challenges/english/blocks/lecture-understanding-aria-expanded-aria-live-and-common-aria-states/672a54dff9dc439089f1a219.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-aria-live-attribute
 ---
 
-# --description--
+# --interactive--
 
 The `aria-live` attribute creates a live region on your page which can be used to notify screen reader users of dynamic content changes in the live region as they occur.
 
@@ -19,22 +19,134 @@ If you set `aria-live` to the value `assertive` that means that the update is ve
 
 This means that the screen reader will interrupt any announcement it is currently making to announce the content change in the live region. Such interruptions can be extremely disruptive, so the `assertive` value should only be used for time-sensitive or critical notifications.
 
+:::interactive_editor
+
 ```html
-<div aria-live="assertive">
+<link rel="stylesheet" href="styles.css">
+
+<div class="session-warning" aria-live="assertive">
   <p>Your session will expire in 30 seconds.</p>
 </div>
+
+<script src="index.js"></script>
+
 ```
 
+```css
+.session-warning {
+  background-color: #ffcc00;
+  color: #000;
+  font-family: system-ui, sans-serif;
+  font-weight: 500;
+  padding: 1em 1.5em;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.session-warning.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.session-warning.fade-out {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+```
+
+```js
+document.addEventListener("DOMContentLoaded", () => {
+  const warning = document.querySelector(".session-warning");
+
+  setTimeout(() => {
+    warning.classList.add("visible");
+  }, 100);
+
+  setTimeout(() => {
+    warning.classList.add("fade-out");
+  }, 8000);
+
+  warning.addEventListener("transitionend", () => {
+    if (warning.classList.contains("fade-out")) {
+      warning.remove();
+    }
+  });
+});
+
+```
+
+:::
+
 The next value in order of priority is `polite`.
 
 This value means that the update is not urgent, so the screen reader can wait until any current announcement is finished or until the user stops typing before announcing the update. Most live regions will use the `polite` value.
 
+:::interactive_editor
+
 ```html
-<div aria-live="polite">
+<link rel="stylesheet" href="styles.css">
+
+<div class="upload-success" aria-live="polite">
   <p>File successfully uploaded</p>
 </div>
+
+<script src="index.js"></script>
+
 ```
 
+```css
+.upload-success {
+  background-color: #4caf50;
+  color: #fff;
+  font-family: system-ui, sans-serif;
+  font-weight: 500;
+  padding: 1em 1.5em;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.upload-success.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.upload-success.fade-out {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+```
+
+```js
+document.addEventListener("DOMContentLoaded", () => {
+  const success = document.querySelector(".upload-success");
+
+  setTimeout(() => {
+    success.classList.add("visible");
+  }, 100);
+
+  setTimeout(() => {
+    success.classList.add("fade-out");
+  }, 8000);
+
+  success.addEventListener("transitionend", () => {
+    if (success.classList.contains("fade-out")) {
+      success.remove();
+    }
+  });
+});
+
+```
+
+:::
+
 The lowest priority value for `aria-live` is `off` which means that the update will not be announced unless the content is in an element that currently has keyboard focus. Realistically, this value is almost never used as the use case is very narrow and it is not implemented consistently (if at all) across screen readers. If you need live regions, plan on using `polite` for everything except critical messages that need `assertive`.
 
 It's also important to note that the `aria-live` attribute is not required if the updated information is contained in an element with an ARIA role of `alert`, `log`, `marquee`, `status`, or `timer`, as these roles already have default `aria-live` values. But the default value can be changed by explicitly setting `aria-live` on the element.