mirror of
https://github.com/discourse/discourse.git
synced 2025-05-29 11:34:05 +08:00
FIX: Ensure the like button always has a title, for accessibility (#6525)
The like button previously didn't have a title for anonymous users, because the `canToggleLike` flag wasn't set, but the `liked` flag wasn't set either. This made the button inaccessible to blind users.
This commit is contained in:

committed by
Régis Hanol

parent
e955a7b49d
commit
05438d99a8
@ -67,13 +67,18 @@ registerButton("like", attrs => {
|
|||||||
className
|
className
|
||||||
};
|
};
|
||||||
|
|
||||||
if (attrs.canToggleLike) {
|
// If the user has already liked the post and doesn't have permission
|
||||||
|
// to undo that operation, then indicate via the title that they've liked it
|
||||||
|
// and disable the button. Otherwise, set the title even if the user
|
||||||
|
// is anonymous (meaning they don't currently have permission to like);
|
||||||
|
// this is important for accessibility.
|
||||||
|
if (attrs.liked && !attrs.canToggleLike) {
|
||||||
|
button.title = "post.controls.has_liked";
|
||||||
|
button.disabled = true;
|
||||||
|
} else {
|
||||||
button.title = attrs.liked
|
button.title = attrs.liked
|
||||||
? "post.controls.undo_like"
|
? "post.controls.undo_like"
|
||||||
: "post.controls.like";
|
: "post.controls.like";
|
||||||
} else if (attrs.liked) {
|
|
||||||
button.title = "post.controls.has_liked";
|
|
||||||
button.disabled = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return button;
|
return button;
|
||||||
|
@ -206,6 +206,12 @@ widgetTest("anon liking", {
|
|||||||
assert.ok(!!this.$(".actions button.like").length);
|
assert.ok(!!this.$(".actions button.like").length);
|
||||||
assert.ok(this.$(".actions button.like-count").length === 0);
|
assert.ok(this.$(".actions button.like-count").length === 0);
|
||||||
|
|
||||||
|
assert.equal(
|
||||||
|
this.$("button.like").attr("title"),
|
||||||
|
I18n.t("post.controls.like"),
|
||||||
|
`shows the right button title for anonymous users`
|
||||||
|
);
|
||||||
|
|
||||||
await click(".actions button.like");
|
await click(".actions button.like");
|
||||||
assert.ok(this.loginShown);
|
assert.ok(this.loginShown);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user