From 400e62b21ca5fe2f453af9bb33f1b9101f7eb34b Mon Sep 17 00:00:00 2001 From: SleeplessOne1917 <abias1122@gmail.com> Date: Mon, 5 Jun 2023 15:49:03 +0000 Subject: [PATCH] Add aria attribute to track toggle status of up/down votes. (#1074) --- src/shared/components/comment/comment-node.tsx | 6 ++++-- src/shared/components/post/post-listing.tsx | 12 ++++++++---- 2 files changed, 12 insertions(+), 6 deletions(-) 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() && ( -- 2.44.1