LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2025-01-10 20:15:50 +00:00
Code Issues Projects Releases 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 <button
className={`btn btn-link btn-animate ${ 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} onClick={this.handleCommentUpvote}
data-tippy-content={i18n.t("upvote")} data-tippy-content={i18n.t("upvote")}
aria-label={i18n.t("upvote")} aria-label={i18n.t("upvote")}
aria-pressed={this.state.my_vote === 1}
> >
<Icon icon="arrow-up1" classes="icon-inline" /> <Icon icon="arrow-up1" classes="icon-inline" />
{showScores() && {showScores() &&
@ -397,13 +398,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{this.props.enableDownvotes && ( {this.props.enableDownvotes && (
<button <button
className={`btn btn-link btn-animate ${ className={`btn btn-link btn-animate ${
this.state.my_vote == -1 this.state.my_vote === -1
? "text-danger" ? "text-danger"
: "text-muted" : "text-muted"
}`} }`}
onClick={this.handleCommentDownvote} onClick={this.handleCommentDownvote}
data-tippy-content={i18n.t("downvote")} data-tippy-content={i18n.t("downvote")}
aria-label={i18n.t("downvote")} aria-label={i18n.t("downvote")}
aria-pressed={this.state.my_vote === -1}
> >
<Icon icon="arrow-down1" classes="icon-inline" /> <Icon icon="arrow-down1" classes="icon-inline" />
{showScores() && {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`}> <div className={`vote-bar col-1 pr-0 small text-center`}>
<button <button
className={`btn-animate btn btn-link p-0 ${ 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} onClick={this.handlePostLike}
data-tippy-content={i18n.t("upvote")} data-tippy-content={i18n.t("upvote")}
aria-label={i18n.t("upvote")} aria-label={i18n.t("upvote")}
aria-pressed={this.state.my_vote === 1}
> >
<Icon icon="arrow-up1" classes="upvote" /> <Icon icon="arrow-up1" classes="upvote" />
</button> </button>
@ -422,11 +423,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.props.enableDownvotes && ( {this.props.enableDownvotes && (
<button <button
className={`btn-animate btn btn-link p-0 ${ 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} onClick={this.handlePostDisLike}
data-tippy-content={i18n.t("downvote")} data-tippy-content={i18n.t("downvote")}
aria-label={i18n.t("downvote")} aria-label={i18n.t("downvote")}
aria-pressed={this.state.my_vote === -1}
> >
<Icon icon="arrow-down1" classes="downvote" /> <Icon icon="arrow-down1" classes="downvote" />
</button> </button>
@ -688,11 +690,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<div> <div>
<button <button
className={`btn-animate btn py-0 px-1 ${ 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} {...tippy}
onClick={this.handlePostLike} onClick={this.handlePostLike}
aria-label={i18n.t("upvote")} aria-label={i18n.t("upvote")}
aria-pressed={this.state.my_vote === 1}
> >
<Icon icon="arrow-up1" classes="icon-inline small" /> <Icon icon="arrow-up1" classes="icon-inline small" />
{showScores() && ( {showScores() && (
@ -702,11 +705,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.props.enableDownvotes && ( {this.props.enableDownvotes && (
<button <button
className={`ml-2 btn-animate btn py-0 px-1 ${ 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} onClick={this.handlePostDisLike}
{...tippy} {...tippy}
aria-label={i18n.t("downvote")} aria-label={i18n.t("downvote")}
aria-pressed={this.state.my_vote === -1}
> >
<Icon icon="arrow-down1" classes="icon-inline small" /> <Icon icon="arrow-down1" classes="icon-inline small" />
{showScores() && ( {showScores() && (