From: SleeplessOne1917 <abias1122@gmail.com>
Date: Mon, 5 Jun 2023 15:49:03 +0000 (+0000)
Subject: Add aria attribute to track toggle status of up/down votes. (#1074)
X-Git-Url: http://these/git/%7B%24%7B%60data:application/%22%7Burl%7D/readmes/static/%7BrepoUrl%7D?a=commitdiff_plain;h=400e62b21ca5fe2f453af9bb33f1b9101f7eb34b;p=lemmy-ui.git

Add aria attribute to track toggle status of up/down votes. (#1074)
---

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 7ed5e8f..95fb7d6 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -380,11 +380,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     <>
                       <button
                         className={`btn btn-link btn-animate ${
-                          this.state.my_vote == 1 ? "text-info" : "text-muted"
+                          this.state.my_vote === 1 ? "text-info" : "text-muted"
                         }`}
                         onClick={this.handleCommentUpvote}
                         data-tippy-content={i18n.t("upvote")}
                         aria-label={i18n.t("upvote")}
+                        aria-pressed={this.state.my_vote === 1}
                       >
                         <Icon icon="arrow-up1" classes="icon-inline" />
                         {showScores() &&
@@ -397,13 +398,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       {this.props.enableDownvotes && (
                         <button
                           className={`btn btn-link btn-animate ${
-                            this.state.my_vote == -1
+                            this.state.my_vote === -1
                               ? "text-danger"
                               : "text-muted"
                           }`}
                           onClick={this.handleCommentDownvote}
                           data-tippy-content={i18n.t("downvote")}
                           aria-label={i18n.t("downvote")}
+                          aria-pressed={this.state.my_vote === -1}
                         >
                           <Icon icon="arrow-down1" classes="icon-inline" />
                           {showScores() &&
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 4d8e109..5ede0ed 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -401,11 +401,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <div className={`vote-bar col-1 pr-0 small text-center`}>
         <button
           className={`btn-animate btn btn-link p-0 ${
-            this.state.my_vote == 1 ? "text-info" : "text-muted"
+            this.state.my_vote === 1 ? "text-info" : "text-muted"
           }`}
           onClick={this.handlePostLike}
           data-tippy-content={i18n.t("upvote")}
           aria-label={i18n.t("upvote")}
+          aria-pressed={this.state.my_vote === 1}
         >
           <Icon icon="arrow-up1" classes="upvote" />
         </button>
@@ -422,11 +423,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         {this.props.enableDownvotes && (
           <button
             className={`btn-animate btn btn-link p-0 ${
-              this.state.my_vote == -1 ? "text-danger" : "text-muted"
+              this.state.my_vote === -1 ? "text-danger" : "text-muted"
             }`}
             onClick={this.handlePostDisLike}
             data-tippy-content={i18n.t("downvote")}
             aria-label={i18n.t("downvote")}
+            aria-pressed={this.state.my_vote === -1}
           >
             <Icon icon="arrow-down1" classes="downvote" />
           </button>
@@ -688,11 +690,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <div>
           <button
             className={`btn-animate btn py-0 px-1 ${
-              this.state.my_vote == 1 ? "text-info" : "text-muted"
+              this.state.my_vote === 1 ? "text-info" : "text-muted"
             }`}
             {...tippy}
             onClick={this.handlePostLike}
             aria-label={i18n.t("upvote")}
+            aria-pressed={this.state.my_vote === 1}
           >
             <Icon icon="arrow-up1" classes="icon-inline small" />
             {showScores() && (
@@ -702,11 +705,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           {this.props.enableDownvotes && (
             <button
               className={`ml-2 btn-animate btn py-0 px-1 ${
-                this.state.my_vote == -1 ? "text-danger" : "text-muted"
+                this.state.my_vote === -1 ? "text-danger" : "text-muted"
               }`}
               onClick={this.handlePostDisLike}
               {...tippy}
               aria-label={i18n.t("downvote")}
+              aria-pressed={this.state.my_vote === -1}
             >
               <Icon icon="arrow-down1" classes="icon-inline small" />
               {showScores() && (