Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: Add `aria-label`s to topics list column headers 

Topics lists like /latest are ordered by last activity date by default,
but the order can be changed (and reversed) to something else such as
replies count and views count by clicking on the corresponding column
header in the topics list. These column headers are tabbable, but screen
readers announce them as, using the replies column as example, `Replies
toggle button`. This doesn't communicate very well that this the button
changes the order, so this commit adds `aria-label`s to all column
headers to make it clear that they change order. The current copy for
the `aria-label` is `Sort by replies`.
This commit is contained in:
OsamaSayegh 2022-03-22 00:17:44 +03:00 committed by Osama Sayegh
parent 0d6bb64c0f
commit 0d4fad67db
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
View File

@ -10,13 +10,13 @@
{{#if showPosters}}
{{raw "topic-list-header-column" order='posters' ariaLabel=(i18n "category.sort_options.posters")}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies' ariaLabel=(i18n "sr_replies")}}
{{#if showLikes}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes' ariaLabel=(i18n "sr_likes")}}
{{/if}}
{{#if showOpLikes}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes' ariaLabel=(i18n "sr_op_likes")}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views' ariaLabel=(i18n "sr_views")}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity' ariaLabel=(i18n "sr_activity")}}
{{~raw-plugin-outlet name="topic-list-header-after"~}}

5
config/locales/client.en.yml
View File

@ -3542,15 +3542,20 @@ en:
other {}}
original_post: "Original Post"
views: "Views"
sr_views: "Sort by views"
views_lowercase:
one: "view"
other: "views"
replies: "Replies"
sr_replies: "Sort by replies"
views_long:
one: "this topic has been viewed %{count} time"
other: "this topic has been viewed %{number} times"
activity: "Activity"
sr_activity: "Sort by activity"
likes: "Likes"
sr_likes: "Sort by likes"
sr_op_likes: "Sort by original post likes"
likes_lowercase:
one: "like"
other: "likes"