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:
Matthew Campbell 2018-10-24 06:58:42 -07:00 committed by Régis Hanol
parent e955a7b49d
commit 05438d99a8
2 changed files with 15 additions and 4 deletions

View File

@ -67,13 +67,18 @@ registerButton("like", attrs => {
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
? "post.controls.undo_like"
: "post.controls.like";
} else if (attrs.liked) {
button.title = "post.controls.has_liked";
button.disabled = true;
}
return button;

View File

@ -206,6 +206,12 @@ widgetTest("anon liking", {
assert.ok(!!this.$(".actions button.like").length);
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");
assert.ok(this.loginShown);
}