Bug 2819239:Screen reader does not announce the loading information which appears on invoking the 'Send' button. (#1703)

* Alert has been added and content also added accordign to the loader state

* Snapshot of tests have been updated

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -303,6 +303,16 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
     resetButtonState();
   };
 
+  const getAriaLabel = () => {
+    if (isGeneratingQuery === null) {
+      return " ";
+    } else if (isGeneratingQuery) {
+      return "Content is loading";
+    } else {
+      return "Content is updated";
+    }
+  };
+
   React.useEffect(() => {
     showTeachingBubble();
     useTabs.getState().setIsQueryErrorThrown(false);
@@ -379,7 +389,9 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           onClick={() => startGenerateQueryProcess()}
           aria-label="Send"
         />
-        {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
+        <div role="alert" aria-label={getAriaLabel()}>
+          {isGeneratingQuery && <Spinner style={{ marginLeft: 8 }} />}
+        </div>
         {showSamplePrompts && (
           <Callout
             styles={{ root: { minWidth: 400, maxWidth: "70vw" } }}

src/Explorer/QueryCopilot/V2/Footer/__snapshots__/Footer.test.tsx.snap

@@ -49,7 +49,7 @@ exports[`Footer snapshot test should not pass if no text 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={false}
+    disabled={null}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -74,7 +74,7 @@ exports[`Footer snapshot test should not pass if no text 1`] = `
     value=""
   />
   <CustomizedIconButton
-    disabled={false}
+    disabled={null}
     iconProps={
       Object {
         "iconName": "Send",
@@ -134,7 +134,7 @@ exports[`Footer snapshot test should not pass text with non enter key 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={false}
+    disabled={null}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -159,7 +159,7 @@ exports[`Footer snapshot test should not pass text with non enter key 1`] = `
     value=""
   />
   <CustomizedIconButton
-    disabled={false}
+    disabled={null}
     iconProps={
       Object {
         "iconName": "Send",
@@ -219,7 +219,7 @@ exports[`Footer snapshot test should open sample prompts on button click 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={false}
+    disabled={null}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -244,7 +244,7 @@ exports[`Footer snapshot test should open sample prompts on button click 1`] = `
     value=""
   />
   <CustomizedIconButton
-    disabled={false}
+    disabled={null}
     iconProps={
       Object {
         "iconName": "Send",
@@ -304,7 +304,7 @@ exports[`Footer snapshot test should pass text with enter key 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={false}
+    disabled={null}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -329,7 +329,7 @@ exports[`Footer snapshot test should pass text with enter key 1`] = `
     value="test message"
   />
   <CustomizedIconButton
-    disabled={false}
+    disabled={null}
     iconProps={
       Object {
         "iconName": "Send",
@@ -389,7 +389,7 @@ exports[`Footer snapshot test should pass text with icon button 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={false}
+    disabled={null}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -414,7 +414,7 @@ exports[`Footer snapshot test should pass text with icon button 1`] = `
     value="test message"
   />
   <CustomizedIconButton
-    disabled={false}
+    disabled={null}
     iconProps={
       Object {
         "iconName": "Send",
@@ -474,7 +474,7 @@ exports[`Footer snapshot test should update user input 1`] = `
     />
   </Stack>
   <StyledTextFieldBase
-    disabled={false}
+    disabled={null}
     multiline={true}
     onChange={[Function]}
     onKeyDown={[Function]}
@@ -499,7 +499,7 @@ exports[`Footer snapshot test should update user input 1`] = `
     value=""
   />
   <CustomizedIconButton
-    disabled={false}
+    disabled={null}
     iconProps={
       Object {
         "iconName": "Send",

src/hooks/useQueryCopilot.ts

@@ -104,7 +104,7 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
   correlationId: "",
   query: "SELECT * FROM c",
   selectedQuery: "",
-  isGeneratingQuery: false,
+  isGeneratingQuery: null,
   isGeneratingExplanation: false,
   isExecuting: false,
   dislikeQuery: undefined,