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.

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 });
+  },
 });

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>

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"