random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-28 08:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

state of the buttons will now be updated by screen reader (#1716)

Browse Source
This commit is contained in:
MokireddySampath 2024-01-20 09:17:47 +05:30 committed by GitHub
parent 70635e426f
commit 323305e485
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
View File

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