Enhance accessibility by adding ARIA attributes and keyboard navigati…

…on support (#1085) Co-authored-by: amitjoshi <[email protected]>
microsoft · Dec 23, 2024 · b9db334 · b9db334
1 parent ebbb521
commit b9db334
Showing 1 changed file with 21 additions and 10 deletions.
diff --git a/src/common/copilot/assets/scripts/copilot.js b/src/common/copilot/assets/scripts/copilot.js
@@ -134,6 +134,7 @@
         copyButton.classList.add("action-button");
         copyButton.classList.add("copy-button");
         copyButton.title = copilotStrings.COPY_TO_CLIPBOARD_MESSAGE;
+        copyButton.setAttribute("aria-label", copilotStrings.COPY_TO_CLIPBOARD_MESSAGE);
         copyButton.addEventListener("click", () => {
             copyCodeToClipboard(code);
         });
@@ -144,12 +145,12 @@
         insertButton.classList.add("action-button");
         insertButton.classList.add("insert-button");
         insertButton.title = copilotStrings.INSERT_CODE_MESSAGE;
+        insertButton.setAttribute("aria-label", copilotStrings.INSERT_CODE_MESSAGE);
         insertButton.addEventListener("click", () => {
             insertCode(code);
         });
         actionWrapper.appendChild(insertButton);
 
-
         return actionWrapper;
     }
 
@@ -160,7 +161,6 @@
         return truncatedInitials.join("").toUpperCase();
     }
 
-
     function handleUserMessage(message) {
         const messageWrapper = document.createElement("div");
         messageWrapper.classList.add("message-wrapper");
@@ -259,21 +259,21 @@
         const listPrompt = copilotStrings.LIST_PROMPT;
 
         suggestedPrompt.innerHTML = `<p class="suggested-title">${copilotStrings.SUGGESTIONS_MESSAGE}</p>
-                                <a href='#' class="suggested-prompt">
+                                <a href='#' class="suggested-prompt" tabindex="0" aria-label="${formPrompt}">
                                 <span class="icon-container">
                                     ${starIconSvg}
                                 </span>
                                     ${formPrompt}
                                 </a>
                                 <br>
-                                <a href='#' class="suggested-prompt">
+                                <a href='#' class="suggested-prompt" tabindex="0" aria-label="${webApiPrompt}">
                                 <span class="icon-container">
                                     ${starIconSvg}
                                 </span>
                                     ${webApiPrompt}
                                 </a>
                                 <br>
-                                <a href='#' class="suggested-prompt">
+                                <a href='#' class="suggested-prompt" tabindex="0" aria-label="${listPrompt}">
                                 <span class="icon-container">
                                     ${starIconSvg}
                                 </span>
@@ -287,7 +287,7 @@
         const walkthrough = document.createElement("div");
         walkthrough.classList.add("walkthrough-div");
         walkthrough.innerHTML = `<p class="walkthrough-title">${copilotStrings.GETTING_STARTED_MESSAGE}</p>
-                            <a href="#" class="walkthrough-content">
+                            <a href="#" class="walkthrough-content" tabindex="0" aria-label="${copilotStrings.LEARN_MORE_MESSAGE}">
                                 ${bookIconSvg}
                                 <span id="walk-text">${copilotStrings.LEARN_MORE_MESSAGE}</span>
                             </a>`;
@@ -317,6 +317,7 @@
                 const thinking = document.createElement("div");
                 thinking.classList.add("thinking");
                 thinking.innerText = thinkingMessage;
+                thinking.setAttribute("aria-live", "assertive"); // Add aria-live attribute
 
                 messageElement.appendChild(thinking);
                 chatMessages.scrollTop = chatMessages.scrollHeight - chatMessages.clientHeight;
@@ -341,6 +342,7 @@
                 messageIndex++;
 
                 const apiResponseElement = parseCodeBlocks(apiResponse);
+                apiResponseElement.setAttribute("aria-live", "assertive"); // Add aria-live attribute to response
                 messageElement.appendChild(apiResponseElement);
 
                 messageWrapper.dataset.id = message.id;
@@ -375,7 +377,7 @@
                 notLoggedIn.classList.add("not-loggedIn");
                 notLoggedIn.innerHTML = `<p id="greeting"></p>
         <p>${copilotStrings.LOGIN_MESSAGE}</p>
-        <button id="loginButton" >${copilotStrings.LOGIN_BUTTON}</button>`;
+        <button id="loginButton" aria-label="${copilotStrings.LOGIN_BUTTON}">${copilotStrings.LOGIN_BUTTON}</button>`;
 
                 messageElement.appendChild(notLoggedIn);
 
@@ -403,21 +405,31 @@
                     vscode.postMessage({ type: "openGitHubCopilotLink" });
                 });
 
-
                 const suggestedPromptDiv = createSuggestedPromptDiv();
                 messageElement.appendChild(suggestedPromptDiv);
 
                 const suggestedPrompts = document.querySelectorAll(".suggested-prompt");
                 suggestedPrompts.forEach((suggestedPrompt) => {
                     suggestedPrompt.addEventListener("click", handleSuggestionsClick);
+                    suggestedPrompt.addEventListener("keydown", (event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            handleSuggestionsClick.call(suggestedPrompt);
+                        }
+                    });
                 });
 
                 const walkthroughDiv = createWalkthroughDiv();
                 messageElement.appendChild(walkthroughDiv);
 
                 const walkthroughContent = document.getElementById("walk-text");
                 walkthroughContent.addEventListener("click", handleWalkthroughClick);
-
+                walkthroughContent.addEventListener("keydown", (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        handleWalkthroughClick.call(walkthroughContent);
+                    }
+                });
             }
         };
     }
@@ -443,7 +455,6 @@
     <p>${copilotStrings.DOCUMENTATION_LINK}<a></p>`;
 
         messageElement.appendChild(notAvailabel);
-
     }
 
     // Handle messages sent from the extension to the webview