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 7ed5e8f4691afd337390a8e3d0828b51d706117a..95fb7d608696f9f37e68857c0cecbd52c7eb4807 100644 (file)
--- 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 4d8e1094a420bb24e1fca0b00d5808e9d6863f9e..5ede0eda67e60ff286c0883c2ae9d632a22b4729 100644 (file)
--- 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() && (