A11Y: add aria-label to reply count link in topic list (#32402)

At the moment the reply count is labelled by the topic list's header
column, which is good — but we don't actually describe what the link
does, so it's a little ambiguous.

This adds an aria-label to describe the behavior "jump to first post" so
it will be read as:

"n replies, jump to first post" 

This provides better coverage for link-to-link navigation because it
both describes the number and the function.
This commit is contained in:
Kris
2025-04-22 15:22:52 -04:00
committed by GitHub
parent e887a389fe
commit f9273ddcb7
2 changed files with 15 additions and 6 deletions

View File

@ -4,7 +4,7 @@ import { service } from "@ember/service";
import PluginOutlet from "discourse/components/plugin-outlet";
import element from "discourse/helpers/element";
import number from "discourse/helpers/number";
import I18n from "discourse-i18n";
import { i18n } from "discourse-i18n";
export default class RepliesCell extends Component {
@service siteSettings;
@ -21,10 +21,12 @@ export default class RepliesCell extends Component {
}
get title() {
return I18n.messageFormat("posts_likes_MF", {
return i18n
.messageFormat("posts_likes_MF", {
count: this.args.topic.replyCount,
ratio: this.ratioText,
}).trim();
})
.trim();
}
get ratioText() {
@ -54,7 +56,11 @@ export default class RepliesCell extends Component {
<this.wrapperElement
class="num posts-map posts {{this.likesHeat}} topic-list-data"
>
<a href={{@topic.firstPostUrl}} class="badge-posts">
<a
href={{@topic.firstPostUrl}}
class="badge-posts"
aria-label={{i18n "topic.reply_count_link" count=@topic.replyCount}}
>
<PluginOutlet
@name="topic-list-before-reply-count"
@outletArgs={{hash topic=@topic}}

View File

@ -3430,6 +3430,9 @@ en:
other {}
}
reply_count_link:
one: "%{count} reply, jump to first post"
other: "%{count} replies, jump to first post"
created_at: "Created: %{date}"
bumped_at: "Latest: %{date}"