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

UX: Improve navigation on topic lists for screen readers (#13153) 

Previously we had no role set for various topic links, nor did we have any
headers.

This teaches screen readers that topic links in topic lists are to be treated
as H2. We opted for this less radical change cause a change of the element
type would probably result in many broken themes.

Confirmed on NVDA you can very quickly breeze through topic lists now. Minor
edge case is pinned topics which can be a bit annoying due to multiple links.
This commit is contained in:
Sam 2021-05-26 12:53:14 +10:00 committed by GitHub
parent 293877237d
commit 759abb3206
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/components/topic-list-item.js
View File

@ -38,8 +38,10 @@ export function navigateToTopic(topic, href) {
export default Component.extend({ export default Component.extend({
tagName: "tr", tagName: "tr",
classNameBindings: [":topic-list-item", "unboundClassNames", "topic.visited"], classNameBindings: [":topic-list-item", "unboundClassNames", "topic.visited"],
attributeBindings: ["data-topic-id"], attributeBindings: ["data-topic-id", "role", "ariaLevel:aria-level"],
"data-topic-id": alias("topic.id"), "data-topic-id": alias("topic.id"),
role: "heading",
ariaLevel: "2",
didReceiveAttrs() { didReceiveAttrs() {
this._super(...arguments); this._super(...arguments);