A11Y: embedded posts need disclosure widget attributes (#20048)

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

@@ -292,7 +292,7 @@ registerButton("replies", (attrs, state, siteSettings) => {
       ? state.filteredRepliesShown
         ? "post.view_all_posts"
         : "post.filtered_replies_hint"
-      : "post.has_replies",
+      : "",
     labelOptions: { count: replyCount },
     label: attrs.mobileView ? "post.has_replies_count" : "post.has_replies",
     iconRight: !siteSettings.enable_filtered_replies_view || attrs.mobileView,
@@ -300,7 +300,12 @@ registerButton("replies", (attrs, state, siteSettings) => {
     translatedAriaLabel: I18n.t("post.sr_expand_replies", {
       count: replyCount,
     }),
+    ariaExpanded:
+      !siteSettings.enable_filtered_replies_view && state.repliesShown
+        ? "true"
+        : "false",
     ariaPressed,
+    ariaControls: `embedded-posts__bottom--${attrs.post_number}`,
   };
 });
 

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

@@ -142,10 +142,19 @@ createWidget("reply-to-tab", {
     return { loading: false };
   },
 
-  buildAttributes() {
-    return {
+  buildAttributes(attrs) {
+    let result = {
       tabindex: "0",
     };
+
+    if (!this.attrs.mobileView) {
+      result["aria-controls"] = `embedded-posts__top--${attrs.post_number}`;
+      result["aria-expanded"] = this.attrs.repliesAbove.length
+        ? "true"
+        : "false";
+    }
+
+    return result;
   },
 
   html(attrs, state) {
@@ -505,28 +514,31 @@ createWidget("post-contents", {
     const repliesBelow = state.repliesBelow;
     if (repliesBelow.length) {
       result.push(
-        h("section.embedded-posts.bottom", [
-          repliesBelow.map((p) => {
-            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",
-            icon: "chevron-up",
-            action: "toggleRepliesBelow",
-            actionParam: "true",
-            className: "btn collapse-up",
-            translatedAriaLabel: I18n.t("post.sr_collapse_replies"),
-          }),
-        ])
+        h(
+          `section.embedded-posts.bottom#embedded-posts__bottom--${this.attrs.post_number}`,
+          [
+            repliesBelow.map((p) => {
+              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",
+              icon: "chevron-up",
+              action: "toggleRepliesBelow",
+              actionParam: "true",
+              className: "btn collapse-up",
+              translatedAriaLabel: I18n.t("post.sr_collapse_replies"),
+            }),
+          ]
+        )
       );
     }
 
@@ -739,16 +751,19 @@ createWidget("post-article", {
       rows.push(
         h(
           "div.row",
-          h("section.embedded-posts.top.topic-body", [
-            this.attach("button", {
-              title: "post.collapse",
-              icon: "chevron-down",
-              action: "toggleReplyAbove",
-              actionParam: "true",
-              className: "btn collapse-down",
-            }),
-            replies,
-          ])
+          h(
+            `section.embedded-posts.top.topic-body#embedded-posts__top--${attrs.post_number}`,
+            [
+              this.attach("button", {
+                title: "post.collapse",
+                icon: "chevron-down",
+                action: "toggleReplyAbove",
+                actionParam: "true",
+                className: "btn collapse-down",
+              }),
+              replies,
+            ]
+          )
         )
       );
     }
@@ -760,7 +775,10 @@ createWidget("post-article", {
     rows.push(
       h("div.row", [
         this.attach("post-avatar", attrs),
-        this.attach("post-body", attrs),
+        this.attach("post-body", {
+          ...attrs,
+          repliesAbove: state.repliesAbove,
+        }),
       ])
     );
     return rows;

config/locales/client.en.yml

@@ -3373,8 +3373,8 @@ en:
       sr_collapse_replies: "Collapse embedded replies"
       sr_date: "Post date"
       sr_expand_replies:
-        one: "This post has %{count} reply. Click to expand"
-        other: "This post has %{count} replies. Click to expand"
+        one: "This post has %{count} reply"
+        other: "This post has %{count} replies"
       expand_collapse: "expand/collapse"
       sr_below_embedded_posts_description: "post #%{post_number} replies"
       sr_embedded_reply_description: "reply by @%{username} to post #%{post_number}"