From ba509a93c228a04c0b14c8b0ba96f8d6a3a5bbec Mon Sep 17 00:00:00 2001
From: OsamaSayegh <asooomaasoooma90@gmail.com>
Date: Thu, 31 Mar 2022 14:36:18 +0300
Subject: [PATCH] DEV: Add tests for accessibility changes

Follow-up to the previous 5 commits (aka PR #16328).
---
 .../discourse/app/widgets/actions-summary.js  |   2 +-
 .../tests/acceptance/post-controls-test.js    | 116 ++++++++++++++++++
 .../tests/helpers/create-pretender.js         |   2 +-
 3 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/tests/acceptance/post-controls-test.js

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