Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
SleeplessOne1917 2023-06-05 15:49:03 +00:00 committed by GitHub
parent 8755489876
commit 400e62b21c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/shared/components/comment/comment-node.tsx
View file

@ -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() &&

12
src/shared/components/post/post-listing.tsx
View file

@ -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() && (