From 53cd7778bd499a1e963827fb422847daa1ade8e6 Mon Sep 17 00:00:00 2001 From: amitjoshi Date: Fri, 17 Jan 2025 15:07:56 +0530 Subject: [PATCH 1/2] Enhance accessibility by improving focus styles and adding ARIA attributes in notification panel --- l10n/bundle.l10n.json | 4 +- .../vscode-powerplatform.xlf | 10 +++- src/common/copilot/assets/scripts/copilot.js | 49 +++++++++--------- src/common/copilot/assets/styles/copilot.css | 4 +- .../CopilotNotificationPanel.ts | 51 ++++++++++--------- 5 files changed, 66 insertions(+), 52 deletions(-) diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json index 02f57d61b..1eb1fcaf9 100644 --- a/l10n/bundle.l10n.json +++ b/l10n/bundle.l10n.json @@ -65,8 +65,10 @@ "Try @powerpages with GitHub Copilot": "Try @powerpages with GitHub Copilot", "Get GitHub Copilot to try @powerpages": "Get GitHub Copilot to try @powerpages", "Let Copilot help you code": "Let Copilot help you code", - "Whether it’s HTML, CSS, JS, or Liquid code, just describe what you need and let AI build it for you. ": "Whether it’s HTML, CSS, JS, or Liquid code, just describe what you need and let AI build it for you. ", + "Whether it’s HTML, CSS, JS, or Liquid code, just describe what you need and let AI build it for you.": "Whether it’s HTML, CSS, JS, or Liquid code, just describe what you need and let AI build it for you.", "Continue with Copilot for Power Pages": "Continue with Copilot for Power Pages", + "Arrow icon": "Arrow icon", + "Copilot illustration": "Copilot illustration", "Do not show again": "Do not show again", "Like something? Tell us more.": "Like something? Tell us more.", "Dislike something? Tell us more.": "Dislike something? Tell us more.", diff --git a/loc/translations-export/vscode-powerplatform.xlf b/loc/translations-export/vscode-powerplatform.xlf index ca709b390..381ddb030 100644 --- a/loc/translations-export/vscode-powerplatform.xlf +++ b/loc/translations-export/vscode-powerplatform.xlf @@ -42,6 +42,9 @@ Are you sure you want to delete the Auth Profile {0}-{1}? {0} is the user name, {1} is the URL of environment of the auth profile + + Arrow icon + Authentication failed. Please try again. @@ -94,6 +97,9 @@ Copied to clipboard! + + Copilot illustration + Copy to clipboard @@ -473,8 +479,8 @@ The {3} represents Dataverse Environment's Organization ID (GUID) What do you need help with? - - Whether it’s HTML, CSS, JS, or Liquid code, just describe what you need and let AI build it for you. + + Whether it’s HTML, CSS, JS, or Liquid code, just describe what you need and let AI build it for you. Working on it... diff --git a/src/common/copilot/assets/scripts/copilot.js b/src/common/copilot/assets/scripts/copilot.js index e34028ebb..07ca7c4e7 100644 --- a/src/common/copilot/assets/scripts/copilot.js +++ b/src/common/copilot/assets/scripts/copilot.js @@ -34,22 +34,23 @@ let messageIndex = 1; - const clipboardSvg = ` - + const clipboardSvg = ` + Clipboard Icon + `; - - const insertSvg = ` - - - - - - - - - - + const insertSvg = ` + Insert Icon + + + + + + + + + + `; const copilotSvg = ' ' @@ -203,7 +204,7 @@ profileIcon.innerHTML = copilotSvg; profileIcon.classList.add('profile-icon'); - const usernameSpan = document.createElement('span'); + const usernameSpan = document.createElement('h4'); usernameSpan.classList.add('username'); usernameSpan.textContent = 'Copilot'; @@ -221,13 +222,13 @@ } feedback.innerHTML = `