diff --git a/src/common/copilot/assets/scripts/copilot.js b/src/common/copilot/assets/scripts/copilot.js index 328119ef..e34028eb 100644 --- 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 = `

${copilotStrings.SUGGESTIONS_MESSAGE}

- + ${starIconSvg} ${formPrompt}
- + ${starIconSvg} ${webApiPrompt}
- + ${starIconSvg} @@ -287,7 +287,7 @@ const walkthrough = document.createElement("div"); walkthrough.classList.add("walkthrough-div"); walkthrough.innerHTML = `

${copilotStrings.GETTING_STARTED_MESSAGE}

-
+ ${bookIconSvg} ${copilotStrings.LEARN_MORE_MESSAGE} `; @@ -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 = `

${copilotStrings.LOGIN_MESSAGE}

- `; + `; messageElement.appendChild(notLoggedIn); @@ -403,13 +405,18 @@ 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(); @@ -417,7 +424,12 @@ 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 @@

${copilotStrings.DOCUMENTATION_LINK}

`; messageElement.appendChild(notAvailabel); - } // Handle messages sent from the extension to the webview