From 7e91bf5c0a1c8795cddc16397f41e904b20a9d64 Mon Sep 17 00:00:00 2001
From: Satyapriya Bai <v-satybai@microsoft.com>
Date: Tue, 4 Mar 2025 11:53:59 +0530
Subject: [PATCH] [accessibility-3560183]:[Screen reader - Cosmos DB Query
 Copilot - Query Faster with Copilot>Enable Query Advisor]: Screen reader does
 not announce the dialog information on invoking 'Clear editor' button.

---
 src/Explorer/QueryCopilot/Popup/DeletePopup.tsx       | 11 ++++++++---
 .../Popup/__snapshots__/DeletePopup.test.tsx.snap     |  8 ++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/QueryCopilot/Popup/DeletePopup.tsx b/src/Explorer/QueryCopilot/Popup/DeletePopup.tsx
index 2a4e29641..6e2fbed54 100644
--- a/src/Explorer/QueryCopilot/Popup/DeletePopup.tsx
+++ b/src/Explorer/QueryCopilot/Popup/DeletePopup.tsx
@@ -22,12 +22,17 @@ export const DeletePopup = ({
   };
 
   return (
-    <Modal isOpen={showDeletePopup} styles={{ main: { minHeight: "122px", minWidth: "880px" } }}>
+    <Modal
+      isOpen={showDeletePopup}
+      styles={{ main: { minHeight: "122px", minWidth: "880px" } }}
+      titleAriaId="deleteDialogTitle"
+      subtitleAriaId="deleteDialogSubTitle"
+    >
       <Stack style={{ padding: "16px 24px", height: "auto" }}>
-        <Text style={{ height: 24, fontSize: "18px" }}>
+        <Text id="deleteDialogTitle" style={{ height: 24, fontSize: "18px" }}>
           <b>Delete code?</b>
         </Text>
-        <Text style={{ marginTop: 10, marginBottom: 20 }}>
+        <Text id="deleteDialogSubTitle" style={{ marginTop: 10, marginBottom: 20 }}>
           This will clear the query from the query builder pane along with all comments and also reset the prompt pane
         </Text>
         <Stack horizontal tokens={{ childrenGap: 10 }} horizontalAlign="start">
diff --git a/src/Explorer/QueryCopilot/Popup/__snapshots__/DeletePopup.test.tsx.snap b/src/Explorer/QueryCopilot/Popup/__snapshots__/DeletePopup.test.tsx.snap
index 698138f5a..988fd88db 100644
--- a/src/Explorer/QueryCopilot/Popup/__snapshots__/DeletePopup.test.tsx.snap
+++ b/src/Explorer/QueryCopilot/Popup/__snapshots__/DeletePopup.test.tsx.snap
@@ -11,6 +11,8 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
       },
     }
   }
+  subtitleAriaId="deleteDialogSubTitle"
+  titleAriaId="deleteDialogTitle"
 >
   <Stack
     style={
@@ -21,6 +23,7 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
     }
   >
     <Text
+      id="deleteDialogTitle"
       style={
         {
           "fontSize": "18px",
@@ -33,6 +36,7 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
       </b>
     </Text>
     <Text
+      id="deleteDialogSubTitle"
       style={
         {
           "marginBottom": 20,
@@ -89,6 +93,8 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
       },
     }
   }
+  subtitleAriaId="deleteDialogSubTitle"
+  titleAriaId="deleteDialogTitle"
 >
   <Stack
     style={
@@ -99,6 +105,7 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
     }
   >
     <Text
+      id="deleteDialogTitle"
       style={
         {
           "fontSize": "18px",
@@ -111,6 +118,7 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
       </b>
     </Text>
     <Text
+      id="deleteDialogSubTitle"
       style={
         {
           "marginBottom": 20,