From ced2725476bcf82724fa39bd7d9e9eea7d67d27b Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Tue, 11 Mar 2025 12:28:44 +0530
Subject: [PATCH 1/2] Enhance accessibility and focus styles for Notification
 Console component (#2066)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 less/Common/Constants.less                    |  4 ++++
 .../NotificationConsole.less                  |  4 ++++
 .../NotificationConsoleComponent.tsx          | 20 ++++---------------
 ...NotificationConsoleComponent.test.tsx.snap | 14 ++++++-------
 4 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/less/Common/Constants.less b/less/Common/Constants.less
index 222b13c32..f77e82c8b 100644
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -248,6 +248,10 @@
   outline: 1px dashed @FocusColor;
 }
 
+.focusedBorder() {
+  border: 1px dashed @FocusColor;
+}
+
 /************************************************************************************************
                                Common Toggle Switch
 *************************************************************************************************/
diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
index 2e9413020..a03573a72 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
@@ -36,6 +36,10 @@
         &:active {
                 background-color:@NotificationHigh;
         }
+        
+        &:focus {
+            .focusedBorder();
+        }
 
         .statusBar {
             .dataTypeIcons {
diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
index 1821fd14c..e2f63926f 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -81,10 +81,6 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
-  public setElememntRef = (element: HTMLElement): void => {
-    this.consoleHeaderElement = element;
-  };
-
   public render(): JSX.Element {
     const numInProgress = this.state.allConsoleData.filter(
       (data: ConsoleData) => data.type === ConsoleDataType.InProgress,
@@ -101,7 +97,9 @@ export class NotificationConsoleComponent extends React.Component<
         <div
           className="notificationConsoleHeader"
           id="notificationConsoleHeader"
-          ref={this.setElememntRef}
+          role="button"
+          aria-label="Console"
+          aria-expanded={this.props.isConsoleExpanded}
           onClick={() => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
@@ -129,14 +127,7 @@ export class NotificationConsoleComponent extends React.Component<
               </span>
             </span>
           </div>
-          <div
-            className="expandCollapseButton"
-            data-test="NotificationConsole/ExpandCollapseButton"
-            role="button"
-            tabIndex={0}
-            aria-label="Console"
-            aria-expanded={this.props.isConsoleExpanded}
-          >
+          <div className="expandCollapseButton" data-test="NotificationConsole/ExpandCollapseButton">
             <img
               src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
               alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
@@ -259,9 +250,6 @@ export class NotificationConsoleComponent extends React.Component<
   }
 
   private onConsoleWasExpanded = (): void => {
-    if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
-      this.consoleHeaderElement.focus();
-    }
     useNotificationConsole.getState().setConsoleAnimationFinished(true);
   };
 
diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
index 268b110b0..b2672aeec 100644
--- a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
@@ -5,10 +5,13 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
   className="notificationConsoleContainer"
 >
   <div
+    aria-expanded={false}
+    aria-label="Console"
     className="notificationConsoleHeader"
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     tabIndex={0}
   >
     <div
@@ -71,12 +74,8 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
       </span>
     </div>
     <div
-      aria-expanded={false}
-      aria-label="Console"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
-      role="button"
-      tabIndex={0}
     >
       <img
         alt="Expand icon"
@@ -176,10 +175,13 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
   className="notificationConsoleContainer"
 >
   <div
+    aria-expanded={false}
+    aria-label="Console"
     className="notificationConsoleHeader"
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
+    role="button"
     tabIndex={0}
   >
     <div
@@ -244,12 +246,8 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
       </span>
     </div>
     <div
-      aria-expanded={false}
-      aria-label="Console"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
-      role="button"
-      tabIndex={0}
     >
       <img
         alt="Expand icon"

From 4b65760a1dc87fc8930520fc18340c3d16ccbe8d Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Tue, 11 Mar 2025 12:31:51 +0530
Subject: [PATCH 2/2] [accessibility-3554312-3560235]:[Screen reader - Cosmos
 DB Query Copilot - Query Faster with Copilot>Enable Query Advisor]: Screen
 reader does not announce the associated text information when focus lands on
 the 'Like/Dislike' button. (#2067)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Common/Constants.ts                            |  4 ++++
 .../QueryCopilot/QueryCopilotPromptbar.tsx         | 14 ++++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
index 840849904..94ca16c27 100644
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -530,6 +530,10 @@ export class ariaLabelForLearnMoreLink {
   public static readonly AzureSynapseLink = "Learn more about Azure Synapse Link.";
 }
 
+export class FeedbackLabels {
+  public static readonly provideFeedback: string = "Provide feedback";
+}
+
 export const QueryCopilotSampleDatabaseId = "CopilotSampleDB";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 
diff --git a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
index 1582a4335..830eb5196 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -18,7 +18,7 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
-import { HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
+import { FeedbackLabels, HttpStatusCodes, NormalizedEventKey } from "Common/Constants";
 import { handleError } from "Common/ErrorHandlingUtils";
 import QueryError, { QueryErrorSeverity } from "Common/QueryError";
 import { createUri } from "Common/UrlUtility";
@@ -579,7 +579,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 <Stack horizontal verticalAlign="center" style={{ maxHeight: 20 }}>
                   {userContext.feedbackPolicies?.policyAllowFeedback && (
                     <Stack horizontal verticalAlign="center">
-                      <Text style={{ fontSize: 12 }}>Provide feedback</Text>
+                      <Text style={{ fontSize: 12 }}>{FeedbackLabels.provideFeedback}</Text>
                       {showCallout && !hideFeedbackModalForLikedQueries && (
                         <Callout
                           role="status"
@@ -629,8 +629,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       <IconButton
                         id="likeBtn"
                         style={{ marginLeft: 10 }}
-                        aria-label="Like"
-                        role="toggle"
+                        aria-label={FeedbackLabels.provideFeedback}
+                        role="button"
+                        title="Like"
                         iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
                         onClick={() => {
                           setShowCallout(!likeQuery);
@@ -648,8 +649,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                       />
                       <IconButton
                         style={{ margin: "0 4px" }}
-                        role="toggle"
-                        aria-label="Dislike"
+                        role="button"
+                        aria-label={FeedbackLabels.provideFeedback}
+                        title="Dislike"
                         iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
                         onClick={() => {
                           let toggleStatusValue = "Unpressed";