From a2596fb3064add3c4728d0527d5a02b0694d5e39 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 18 Oct 2022 13:58:26 -0400
Subject: [PATCH] A11Y: Add aria labels for posts in group activity (#18601)

This view can show multiple posts from the same topic and the aria labels
will now include the post number to more easily differentiate posts in
screen readers.
---
 .../javascripts/discourse/app/components/group-post.js      | 6 ++++++
 .../discourse/app/templates/components/group-post.hbs       | 4 +++-
 config/locales/client.en.yml                                | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/group-post.js b/app/assets/javascripts/discourse/app/components/group-post.js
index 074f856b407..a233bc12cc0 100644
--- a/app/assets/javascripts/discourse/app/components/group-post.js
+++ b/app/assets/javascripts/discourse/app/components/group-post.js
@@ -4,6 +4,7 @@ import getURL from "discourse-common/lib/get-url";
 import { prioritizeNameInUx } from "discourse/lib/settings";
 import { propertyEqual } from "discourse/lib/computed";
 import { userPath } from "discourse/lib/url";
+import I18n from "I18n";
 
 export default Component.extend({
   classNameBindings: [
@@ -41,4 +42,9 @@ export default Component.extend({
   userUrl(username) {
     return userPath(username.toLowerCase());
   },
+
+  @discourseComputed("post.topic.title", "post.post_number")
+  titleAriaLabel(title, postNumber) {
+    return I18n.t("groups.aria_post_number", { postNumber, title });
+  },
 });
diff --git a/app/assets/javascripts/discourse/app/templates/components/group-post.hbs b/app/assets/javascripts/discourse/app/templates/components/group-post.hbs
index a442d7f0775..901ebeb9360 100644
--- a/app/assets/javascripts/discourse/app/templates/components/group-post.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/group-post.hbs
@@ -6,7 +6,9 @@
   <div class="user-stream-item__details">
     <div class="stream-topic-title">
       <span class="title">
-        <a href={{this.postUrl}}>{{html-safe this.post.topic.fancyTitle}}</a>
+        <a href={{this.postUrl}} aria-label={{this.titleAriaLabel}}>
+          {{html-safe this.post.topic.fancyTitle}}
+        </a>
       </span>
     </div>
     <div class="group-post-category">{{category-link this.post.category}}</div>
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index bb55ec4f1d7..b13e39725ae 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -922,6 +922,7 @@ en:
         no_filter_matches: "No members match that search."
       topics: "Topics"
       posts: "Posts"
+      aria_post_number: "%{title} - post #%{postNumber}"
       mentions: "Mentions"
       messages: "Messages"
       notification_level: "Default notification level for group messages"