A11Y: Improve accessibility of embedded replies below post

The changes are:

* Add an aria-label for the button that embeds/expand the replies of a
post below it
* Add an aria-label for the button that collapses the embedded replies
* Add an aria-label to describe the embedded replies section when
expanded and an aria-label for each embedded reply

app/assets/javascripts/discourse/app/widgets/embedded-post.js

@@ -21,24 +21,34 @@ createWidget("post-link-arrow", {
 });
 
 export default createWidget("embedded-post", {
+  tagName: "div.reply",
   buildKey: (attrs) => `embedded-post-${attrs.id}`,
 
+  buildAttributes(attrs) {
+    const attributes = { "data-post-id": attrs.id };
+    if (this.state.role) {
+      attributes.role = this.state.role;
+    }
+    if (this.state["aria-label"]) {
+      attributes["aria-label"] = this.state["aria-label"];
+    }
+    return attributes;
+  },
+
   html(attrs, state) {
     attrs.embeddedPost = true;
     return [
-      h("div.reply", { attributes: { "data-post-id": attrs.id } }, [
+      h("div.row", [
-        h("div.row", [
+        this.attach("post-avatar", attrs),
-          this.attach("post-avatar", attrs),
+        h("div.topic-body", [
-          h("div.topic-body", [
+          h("div.topic-meta-data.embedded-reply", [
-            h("div.topic-meta-data.embedded-reply", [
+            this.attach("poster-name", attrs),
-              this.attach("poster-name", attrs),
+            this.attach("post-link-arrow", {
-              this.attach("post-link-arrow", {
+              above: state.above,
-                above: state.above,
+              shareUrl: attrs.customShare,
-                shareUrl: attrs.customShare,
+            }),
-              }),
-            ]),
-            new PostCooked(attrs, new DecoratorHelper(this), this.currentUser),
           ]),
+          new PostCooked(attrs, new DecoratorHelper(this), this.currentUser),
         ]),
       ]),
     ];

app/assets/javascripts/discourse/app/widgets/post-menu.js

@@ -270,6 +270,10 @@ registerButton("replies", (attrs, state, siteSettings) => {
     return;
   }
 
+  let ariaPressed;
+  if (!siteSettings.enable_filtered_replies_view) {
+    ariaPressed = state.repliesShown ? "true" : "false";
+  }
   return {
     action,
     icon,
@@ -284,6 +288,10 @@ registerButton("replies", (attrs, state, siteSettings) => {
     label: attrs.mobileView ? "post.has_replies_count" : "post.has_replies",
     iconRight: !siteSettings.enable_filtered_replies_view || attrs.mobileView,
     disabled: !!attrs.deleted,
+    translatedAriaLabel: I18n.t("post.sr_expand_replies", {
+      count: replyCount,
+    }),
+    ariaPressed,
   };
 });
 

app/assets/javascripts/discourse/app/widgets/post.js

@@ -464,7 +464,16 @@ createWidget("post-contents", {
       result.push(
         h("section.embedded-posts.bottom", [
           repliesBelow.map((p) => {
-            return this.attach("embedded-post", p, { model: p.asPost });
+            return this.attach("embedded-post", p, {
+              model: p.asPost,
+              state: {
+                role: "region",
+                "aria-label": I18n.t("post.sr_embedded_reply_description", {
+                  post_number: attrs.post_number,
+                  username: p.username,
+                }),
+              },
+            });
           }),
           this.attach("button", {
             title: "post.collapse",
@@ -472,6 +481,7 @@ createWidget("post-contents", {
             action: "toggleRepliesBelow",
             actionParam: "true",
             className: "btn collapse-up",
+            translatedAriaLabel: I18n.t("post.sr_collapse_replies"),
           }),
         ])
       );

config/locales/client.en.yml

@@ -3065,7 +3065,13 @@ en:
       show_hidden: "View ignored content."
       deleted_by_author_simple: "(post deleted by author)"
       collapse: "collapse"
+      sr_collapse_replies: "Collapse embedded replies"
+      sr_expand_replies:
+        one: "This post has %{count} reply. Click to expand"
+        other: "This post has %{count} replies. Click to expand"
       expand_collapse: "expand/collapse"
+      sr_below_embedded_posts_description: "post #%{post_number} replies"
+      sr_embedded_reply_description: "reply by @%{username} to post #%{post_number}"
       locked: "a staff member has locked this post from being edited"
       gap:
         one: "view %{count} hidden reply"