A11Y: improve topic entrance aria-label, title (#27842)

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
This commit is contained in:
Kris 2024-07-10 14:15:14 -04:00 committed by GitHub
parent 0e3ed7ea2a
commit 5b73322c41
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 27 additions and 8 deletions

View File

@ -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}}

View File

@ -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}}

View File

@ -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}}

View File

@ -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,
};

View File

@ -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"