From 8c7d844166d8c1f0a1a89aa6df2899d55df76b39 Mon Sep 17 00:00:00 2001 From: amitjoshi438 <54068463+amitjoshi438@users.noreply.github.com> Date: Thu, 2 Jan 2025 16:02:38 +0530 Subject: [PATCH] Enhance accessibility by adding ARIA attributes and making thinking message focusable (#1087) Co-authored-by: amitjoshi --- src/common/copilot/assets/scripts/copilot.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/common/copilot/assets/scripts/copilot.js b/src/common/copilot/assets/scripts/copilot.js index e34028eb..4a10703d 100644 --- 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;