diff --git a/app/assets/javascripts/discourse/app/widgets/actions-summary.js b/app/assets/javascripts/discourse/app/widgets/actions-summary.js index 73c8a88ad2d..5ff7fdc2fb8 100644 --- a/app/assets/javascripts/discourse/app/widgets/actions-summary.js +++ b/app/assets/javascripts/discourse/app/widgets/actions-summary.js @@ -46,7 +46,7 @@ createWidget("small-user-list", { if (atts.description) { description = h( - "span", + "span.list-description", { attributes: { "aria-hidden": true } }, I18n.t(atts.description, { count: atts.count }) ); diff --git a/app/assets/javascripts/discourse/tests/acceptance/post-controls-test.js b/app/assets/javascripts/discourse/tests/acceptance/post-controls-test.js new file mode 100644 index 00000000000..8acc304c605 --- /dev/null +++ b/app/assets/javascripts/discourse/tests/acceptance/post-controls-test.js @@ -0,0 +1,116 @@ +import { + acceptance, + query, + queryAll, +} from "discourse/tests/helpers/qunit-helpers"; +import { click, visit } from "@ember/test-helpers"; +import { test } from "qunit"; +import I18n from "I18n"; + +acceptance("Post controls", function () { + test("accessibility of the likes list below the post", async function (assert) { + await visit("/t/internationalization-localization/280"); + + const showLikesButton = query("#post_2 button.like-count"); + assert.equal( + showLikesButton.getAttribute("aria-pressed"), + "false", + "show likes button isn't pressed" + ); + assert.equal( + showLikesButton.getAttribute("aria-label"), + I18n.t("post.sr_post_like_count_button", { count: 4 }), + "show likes button has aria-label" + ); + + await click(showLikesButton); + assert.equal( + showLikesButton.getAttribute("aria-pressed"), + "true", + "show likes button is now pressed" + ); + + const likesContainer = query("#post_2 .small-user-list.who-liked"); + assert.equal( + likesContainer.getAttribute("role"), + "list", + "likes container has list role" + ); + assert.equal( + likesContainer.getAttribute("aria-label"), + I18n.t("post.actions.people.sr_post_likers_list_description"), + "likes container has aria-label" + ); + const likesAvatars = Array.from( + likesContainer.querySelectorAll("a.trigger-user-card") + ); + assert.ok(likesAvatars.length > 0, "avatars are rendered"); + likesAvatars.forEach((avatar) => { + assert.equal( + avatar.getAttribute("aria-hidden"), + "false", + "avatars are not aria-hidden" + ); + assert.equal( + avatar.getAttribute("role"), + "listitem", + "avatars have listitem role" + ); + }); + assert.equal( + likesContainer + .querySelector(".list-description") + .getAttribute("aria-hidden"), + "true", + "list description is aria-hidden" + ); + }); + + test("accessibility of the embedded replies below the post", async function (assert) { + await visit("/t/internationalization-localization/280"); + + const showRepliesButton = query("#post_1 button.show-replies"); + assert.equal( + showRepliesButton.getAttribute("aria-pressed"), + "false", + "show replies button isn't pressed" + ); + assert.equal( + showRepliesButton.getAttribute("aria-label"), + I18n.t("post.sr_expand_replies", { count: 1 }), + "show replies button has aria-label" + ); + + await click(showRepliesButton); + assert.equal( + showRepliesButton.getAttribute("aria-pressed"), + "true", + "show replies button is now pressed" + ); + + const replies = Array.from(queryAll("#post_1 .embedded-posts .reply")); + assert.equal(replies.length, 1, "replies are rendered"); + replies.forEach((reply) => { + assert.equal( + reply.getAttribute("role"), + "region", + "replies have region role" + ); + assert.equal( + reply.getAttribute("aria-label"), + I18n.t("post.sr_embedded_reply_description", { + post_number: 1, + username: "somebody", + }), + "replies have aria-label" + ); + }); + assert.equal( + query("#post_1 .embedded-posts .btn.collapse-up").getAttribute( + "aria-label" + ), + I18n.t("post.sr_collapse_replies"), + "collapse button has aria-label" + ); + }); +}); diff --git a/app/assets/javascripts/discourse/tests/helpers/create-pretender.js b/app/assets/javascripts/discourse/tests/helpers/create-pretender.js index 00beaebec5d..e362f54a620 100644 --- a/app/assets/javascripts/discourse/tests/helpers/create-pretender.js +++ b/app/assets/javascripts/discourse/tests/helpers/create-pretender.js @@ -327,7 +327,7 @@ export function applyDefaultHandlers(pretender) { }); pretender.get("/posts/:id/replies", () => { - return response([{ id: 1234, cooked: "wat" }]); + return response([{ id: 1234, cooked: "wat", username: "somebody" }]); }); // TODO: Remove this old path when no longer using old ember