From 8800f2ef25d78697a7462046c2711fca54290075 Mon Sep 17 00:00:00 2001
From: Satyapriya Bai <v-satybai@microsoft.com>
Date: Tue, 29 Oct 2024 16:18:45 +0530
Subject: [PATCH] [accessibility-3549715]: [Screen reader - Cosmos DB Query
 Copilot - Query Faster with Copilot>Enable Query Advisor]: Screen reader does
 not announce status information which appears on invoking the 'Send' button.

---
 .../QueryCopilot/QueryCopilotPromptbar.tsx    | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
index a17f52778..abef06942 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -305,7 +305,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     if (isGeneratingQuery === null) {
       return " ";
     } else if (isGeneratingQuery) {
-      return "Content is loading";
+      return "Thinking";
     } else {
       return "Content is updated";
     }
@@ -400,6 +400,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                   <IconButton
                     iconProps={{ iconName: "Send" }}
                     disabled={isGeneratingQuery || !userPrompt.trim()}
+                    allowDisabledFocus={true}
                     style={{ background: "none" }}
                     onClick={() => startGenerateQueryProcess()}
                     aria-label="Send"
@@ -706,32 +707,35 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
               )}
             </Stack>
           )}
+          {(showFeedbackBar || isGeneratingQuery) && (
+            <span role="alert" className="screenReaderOnly" aria-label={getAriaLabel()} />
+          )}
           {isGeneratingQuery && (
-            <ProgressIndicator
-              label="Thinking..."
-              ariaLabel={getAriaLabel()}
-              barHeight={4}
-              styles={{
-                root: {
-                  fontSize: 12,
-                  width: "100%",
-                  bottom: 0,
-                },
-                itemName: {
-                  padding: "0px 8px",
-                },
-                itemProgress: {
-                  borderBottomLeftRadius: 8,
-                  borderBottomRightRadius: 8,
-                  padding: 0,
-                },
-                progressBar: {
-                  backgroundImage:
-                    "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(24, 90, 189) 35%, rgb(71, 207, 250) 70%, rgb(180, 124, 248) 92%, rgba(0, 0, 0, 0))",
-                  animationDuration: "5s",
-                },
-              }}
-            />
+              <ProgressIndicator
+                label="Thinking..."
+                ariaLabel={getAriaLabel()}
+                barHeight={4}
+                styles={{
+                  root: {
+                    fontSize: 12,
+                    width: "100%",
+                    bottom: 0,
+                  },
+                  itemName: {
+                    padding: "0px 8px",
+                  },
+                  itemProgress: {
+                    borderBottomLeftRadius: 8,
+                    borderBottomRightRadius: 8,
+                    padding: 0,
+                  },
+                  progressBar: {
+                    backgroundImage:
+                      "linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(24, 90, 189) 35%, rgb(71, 207, 250) 70%, rgb(180, 124, 248) 92%, rgba(0, 0, 0, 0))",
+                    animationDuration: "5s",
+                  },
+                }}
+              />
           )}
         </Stack>
         <IconButton