From 759abb3206aed9468e22297c811586b0ea8eacc2 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 26 May 2021 12:53:14 +1000 Subject: [PATCH] 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. --- .../javascripts/discourse/app/components/topic-list-item.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/discourse/app/components/topic-list-item.js b/app/assets/javascripts/discourse/app/components/topic-list-item.js index 30194330786..8b05472b1d1 100644 --- a/app/assets/javascripts/discourse/app/components/topic-list-item.js +++ b/app/assets/javascripts/discourse/app/components/topic-list-item.js @@ -38,8 +38,10 @@ export function navigateToTopic(topic, href) { export default Component.extend({ tagName: "tr", 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"), + role: "heading", + ariaLevel: "2", didReceiveAttrs() { this._super(...arguments);