From 6cb6302a344b6e2458687d1846fc8318fa2f8850 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 2 Oct 2023 13:55:54 -0400
Subject: [PATCH] A11Y: Improve small-post markup for screen readers (#23732)

---
 .../discourse/app/widgets/post-small-action.js    | 13 ++++++++++++-
 .../javascripts/discourse/app/widgets/post.js     | 15 +++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/post-small-action.js b/app/assets/javascripts/discourse/app/widgets/post-small-action.js
index ddc56a676a7..235eee010fc 100644
--- a/app/assets/javascripts/discourse/app/widgets/post-small-action.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-small-action.js
@@ -94,7 +94,17 @@ export function resetPostSmallActionClassesCallbacks() {
 
 export default createWidget("post-small-action", {
   buildKey: (attrs) => `post-small-act-${attrs.id}`,
-  tagName: "div.small-action.onscreen-post",
+  tagName: "article.small-action.onscreen-post",
+
+  buildAttributes(attrs) {
+    return {
+      "aria-label": I18n.t("share.post", {
+        postNumber: attrs.post_number,
+        username: attrs.username,
+      }),
+      role: "region",
+    };
+  },
 
   buildId(attrs) {
     return `post_${attrs.post_number}`;
@@ -130,6 +140,7 @@ export default createWidget("post-small-action", {
         template: attrs.avatar_template,
         username: attrs.username,
         url: attrs.usernameUrl,
+        ariaHidden: false,
       })
     );
 
diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js
index f5c18be008a..222239e3f58 100644
--- a/app/assets/javascripts/discourse/app/widgets/post.js
+++ b/app/assets/javascripts/discourse/app/widgets/post.js
@@ -59,7 +59,7 @@ export function avatarImg(wanted, attrs) {
       height: size,
       src: getURLWithCDN(url),
       title,
-      "aria-label": title,
+      "aria-hidden": true,
       loading: "lazy",
       tabindex: "-1",
     },
@@ -73,8 +73,19 @@ export function avatarFor(wanted, attrs, linkAttrs) {
   const attributes = {
     href: attrs.url,
     "data-user-card": attrs.username,
-    "aria-hidden": true,
   };
+
+  // often avatars are paired with usernames,
+  // making them redundant for screen readers
+  // so we hide the avatar from screen readers by default
+  if (attrs.ariaHidden === false) {
+    attributes["aria-label"] = I18n.t("user.profile_possessive", {
+      username: attrs.username,
+    });
+  } else {
+    attributes["aria-hidden"] = true;
+  }
+
   if (linkAttrs) {
     Object.assign(attributes, linkAttrs);
   }