From 5b73322c412d3a6b82a3b54d269dd28aad36a58e Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 10 Jul 2024 14:15:14 -0400
Subject: [PATCH] A11Y: improve topic entrance aria-label, title (#27842)

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
---
 .../discourse/app/components/topic-entrance.hbs     | 12 ++++++++++--
 .../app/components/topic-list/topic-entrance.gjs    | 13 +++++++++++--
 .../app/components/topic-timeline/container.hbs     |  2 +-
 .../app/components/topic-timeline/container.js      |  2 +-
 config/locales/client.en.yml                        |  6 ++++--
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-entrance.hbs b/app/assets/javascripts/discourse/app/components/topic-entrance.hbs
index fc024c8c7b2..3bc79368744 100644
--- a/app/assets/javascripts/discourse/app/components/topic-entrance.hbs
+++ b/app/assets/javascripts/discourse/app/components/topic-entrance.hbs
@@ -1,6 +1,10 @@
 <DButton
   @action={{action "enterTop"}}
-  @ariaLabel="topic_entrance.sr_jump_top_button"
+  @translatedAriaLabel={{i18n
+    "topic_entrance.sr_jump_top_button"
+    date=this.topDate
+  }}
+  title={{i18n "topic_entrance.jump_top_button_title"}}
   class="btn-default full jump-top"
 >
   {{d-icon "step-backward"}}
@@ -9,7 +13,11 @@
 
 <DButton
   @action={{action "enterBottom"}}
-  @ariaLabel="topic_entrance.sr_jump_bottom_button"
+  @translatedAriaLabel={{i18n
+    "topic_entrance.sr_jump_bottom_button"
+    date=this.bottomDate
+  }}
+  title={{i18n "topic_entrance.jump_bottom_button_title"}}
   class="btn-default full jump-bottom"
 >
   {{html-safe this.bottomDate}}
diff --git a/app/assets/javascripts/discourse/app/components/topic-list/topic-entrance.gjs b/app/assets/javascripts/discourse/app/components/topic-list/topic-entrance.gjs
index af11aa2fb3f..98b51804a10 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list/topic-entrance.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-list/topic-entrance.gjs
@@ -6,6 +6,7 @@ import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import DiscourseURL from "discourse/lib/url";
 import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
 import I18n from "discourse-i18n";
 import DMenu from "float-kit/components/d-menu";
 
@@ -80,7 +81,11 @@ export default class TopicEntrance extends Component {
         <div id="topic-entrance" class="--glimmer">
           <button
             {{on "click" (fn this.jumpTo @topic.url)}}
-            aria-label="topic_entrance.sr_jump_top_button"
+            aria-label={{i18n
+              "topic_entrance.sr_jump_top_button"
+              date=this.topDate
+            }}
+            title={{i18n "topic_entrance.jump_top_button_title"}}
             class="btn btn-default full jump-top"
           >
             {{icon "step-backward"}}
@@ -89,7 +94,11 @@ export default class TopicEntrance extends Component {
 
           <button
             {{on "click" (fn this.jumpTo @topic.lastPostUrl)}}
-            aria-label="topic_entrance.sr_jump_bottom_button"
+            aria-label={{i18n
+              "topic_entrance.sr_jump_bottom_button"
+              date=this.bottomDate
+            }}
+            title={{i18n "topic_entrance.jump_bottom_button_title"}}
             class="btn btn-default full jump-bottom"
           >
             {{htmlSafe this.bottomDate}}
diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs b/app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs
index 0e7be9bd5c3..f400aad3130 100644
--- a/app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs
+++ b/app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs
@@ -74,7 +74,7 @@
       <a
         class="start-date"
         onClick={{this.updatePercentage}}
-        title={{i18n "topic_entrance.sr_jump_top_button"}}
+        title={{i18n "topic_entrance.jump_top_button_title"}}
       >
         <span>
           {{this.startDate}}
diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline/container.js b/app/assets/javascripts/discourse/app/components/topic-timeline/container.js
index d06273d5eb9..abb9c408a7d 100644
--- a/app/assets/javascripts/discourse/app/components/topic-timeline/container.js
+++ b/app/assets/javascripts/discourse/app/components/topic-timeline/container.js
@@ -193,7 +193,7 @@ export default class TopicTimelineScrollArea extends Component {
 
   get nowDateOptions() {
     return {
-      customTitle: I18n.t("topic_entrance.sr_jump_bottom_button"),
+      customTitle: I18n.t("topic_entrance.jump_bottom_button_title"),
       addAgo: true,
       defaultFormat: timelineDate,
     };
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index dac5a61d1e2..c6ec6754924 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -4642,8 +4642,10 @@ en:
     no_group_messages_title: "No group messages found"
 
     topic_entrance:
-      sr_jump_top_button: "Jump to the first post"
-      sr_jump_bottom_button: "Jump to the last post"
+      sr_jump_top_button: "Jump to the first post - %{date}"
+      sr_jump_bottom_button: "Jump to the last post - %{date}"
+      jump_top_button_title: "Jump to the first post"
+      jump_bottom_button_title: "Jump to the last post"
     fullscreen_table:
       expand_btn: "Expand Table"
       view_table: "View Table"