From 323305e4851e4cc05eaba829348ffc42ab3a0e7d Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Sat, 20 Jan 2024 09:17:47 +0530
Subject: [PATCH] state of the buttons will now be updated by screen reader
 (#1716)

---
 .../QueryCopilot/QueryCopilotPromptbar.tsx      | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
index acb839623..b4e5c80a0 100644
--- a/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
+++ b/src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
@@ -543,6 +543,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           <Text style={{ fontWeight: 600, fontSize: 12 }}>Provide feedback on the query generated</Text>
           {showCallout && !hideFeedbackModalForLikedQueries && (
             <Callout
+              role="status"
               style={{ padding: 8 }}
               target="#likeBtn"
               onDismiss={() => {
@@ -578,11 +579,19 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           <IconButton
             id="likeBtn"
             style={{ marginLeft: 20 }}
+            aria-label="like"
+            role="toggle"
             iconProps={{ iconName: likeQuery === true ? "LikeSolid" : "Like" }}
             aria-label="Like"
             onClick={() => {
               setShowCallout(!likeQuery);
               setLikeQuery(!likeQuery);
+              if (likeQuery === true) {
+                document.getElementById("likeStatus").innerHTML = "Unpressed";
+              }
+              if (likeQuery === false) {
+                document.getElementById("likeStatus").innerHTML = "Liked";
+              }
               if (dislikeQuery) {
                 setDislikeQuery(!dislikeQuery);
               }
@@ -590,17 +599,25 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
           />
           <IconButton
             style={{ margin: "0 10px" }}
+            role="toggle"
+            aria-label="Dislike"
             iconProps={{ iconName: dislikeQuery === true ? "DislikeSolid" : "Dislike" }}
             onClick={() => {
+              let toggleStatusValue = "Unpressed";
               if (!dislikeQuery) {
                 openFeedbackModal(generatedQuery, false, userPrompt);
                 setLikeQuery(false);
+                toggleStatusValue = "Disliked";
               }
               setDislikeQuery(!dislikeQuery);
               setShowCallout(false);
+              document.getElementById("likeStatus").innerHTML = toggleStatusValue;
             }}
             aria-label="Dislike"
           />
+
+          <span role="status" style={{ position: "absolute", left: "-9999px" }} id="likeStatus"></span>
+
           <Separator vertical style={{ color: "#EDEBE9" }} />
           <CommandBarButton
             onClick={copyGeneratedCode}