From 759abb3206aed9468e22297c811586b0ea8eacc2 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
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);