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 <DButton
@action={{action "enterTop"}} @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" class="btn-default full jump-top"
> >
{{d-icon "step-backward"}} {{d-icon "step-backward"}}
@ -9,7 +13,11 @@
<DButton <DButton
@action={{action "enterBottom"}} @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" class="btn-default full jump-bottom"
> >
{{html-safe this.bottomDate}} {{html-safe this.bottomDate}}

View File

@ -6,6 +6,7 @@ import { service } from "@ember/service";
import { htmlSafe } from "@ember/template"; import { htmlSafe } from "@ember/template";
import DiscourseURL from "discourse/lib/url"; import DiscourseURL from "discourse/lib/url";
import icon from "discourse-common/helpers/d-icon"; import icon from "discourse-common/helpers/d-icon";
import i18n from "discourse-common/helpers/i18n";
import I18n from "discourse-i18n"; import I18n from "discourse-i18n";
import DMenu from "float-kit/components/d-menu"; import DMenu from "float-kit/components/d-menu";
@ -80,7 +81,11 @@ export default class TopicEntrance extends Component {
<div id="topic-entrance" class="--glimmer"> <div id="topic-entrance" class="--glimmer">
<button <button
{{on "click" (fn this.jumpTo @topic.url)}} {{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" class="btn btn-default full jump-top"
> >
{{icon "step-backward"}} {{icon "step-backward"}}
@ -89,7 +94,11 @@ export default class TopicEntrance extends Component {
<button <button
{{on "click" (fn this.jumpTo @topic.lastPostUrl)}} {{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" class="btn btn-default full jump-bottom"
> >
{{htmlSafe this.bottomDate}} {{htmlSafe this.bottomDate}}

View File

@ -74,7 +74,7 @@
<a <a
class="start-date" class="start-date"
onClick={{this.updatePercentage}} onClick={{this.updatePercentage}}
title={{i18n "topic_entrance.sr_jump_top_button"}} title={{i18n "topic_entrance.jump_top_button_title"}}
> >
<span> <span>
{{this.startDate}} {{this.startDate}}

View File

@ -193,7 +193,7 @@ export default class TopicTimelineScrollArea extends Component {
get nowDateOptions() { get nowDateOptions() {
return { return {
customTitle: I18n.t("topic_entrance.sr_jump_bottom_button"), customTitle: I18n.t("topic_entrance.jump_bottom_button_title"),
addAgo: true, addAgo: true,
defaultFormat: timelineDate, defaultFormat: timelineDate,
}; };

View File

@ -4642,8 +4642,10 @@ en:
no_group_messages_title: "No group messages found" no_group_messages_title: "No group messages found"
topic_entrance: topic_entrance:
sr_jump_top_button: "Jump to the first post" sr_jump_top_button: "Jump to the first post - %{date}"
sr_jump_bottom_button: "Jump to the last post" 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: fullscreen_table:
expand_btn: "Expand Table" expand_btn: "Expand Table"
view_table: "View Table" view_table: "View Table"