Enhance accessibility by adding ARIA attributes and making thinking m…

…essage focusable (#1087) Co-authored-by: amitjoshi <[email protected]>
microsoft · Jan 2, 2025 · 8c7d844 · 8c7d844
1 parent b9db334
commit 8c7d844
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/common/copilot/assets/scripts/copilot.js b/src/common/copilot/assets/scripts/copilot.js
@@ -317,7 +317,9 @@
                 const thinking = document.createElement("div");
                 thinking.classList.add("thinking");
                 thinking.innerText = thinkingMessage;
-                thinking.setAttribute("aria-live", "assertive"); // Add aria-live attribute
+                thinking.setAttribute("tabindex", "0"); // Make the element focusable
+                thinking.setAttribute("role", "status"); // Add ARIA role
+                thinking.setAttribute("aria-live", "polite"); // Ensure screen readers announce updates
 
                 messageElement.appendChild(thinking);
                 chatMessages.scrollTop = chatMessages.scrollHeight - chatMessages.clientHeight;