A11Y: Adjust heading rules on topic lists (#13353)

A11Y: Adjust heading rules on topic lists (#13353)

Previously due to “rowheader” role we would read out topic titles twice.

This adjusts it so we apply the heading role only to the topic link. In turn this makes navigation through topic lists more accurate (h) only lands you on topic links. It also reduces the amount of duplicate reading NVDA does.


Topic title link new topic link support link b481 link 19h link 2 button…


Topic title link

This reduces noise, up and down once you land on a topic link can give you more context.

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 8b05472..b029933 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list-item.js
+++ b/app/assets/javascripts/discourse/app/components/topic-list-item.js
@@ -40,8 +40,6 @@ export default Component.extend({
   classNameBindings: [":topic-list-item", "unboundClassNames", "topic.visited"],
   attributeBindings: ["data-topic-id", "role", "ariaLevel:aria-level"],
   "data-topic-id": alias("topic.id"),
-  role: "heading",
-  ariaLevel: "2",
   didReceiveAttrs() {
diff --git a/app/assets/javascripts/discourse/app/helpers/topic-link.js b/app/assets/javascripts/discourse/app/helpers/topic-link.js
index 0bc232a..6dbcb1c 100644
--- a/app/assets/javascripts/discourse/app/helpers/topic-link.js
+++ b/app/assets/javascripts/discourse/app/helpers/topic-link.js
@@ -16,6 +16,8 @@ registerUnbound("topic-link", (topic, args) => {
   return htmlSafe(
     `<a href='${url}'
+        role='heading'
+        level='2'
         class='${classes.join(" ")}'
diff --git a/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr b/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
index 605e192..03ea153 100644
--- a/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
+++ b/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
@@ -13,7 +13,7 @@
   This causes the topic-post-badge to be considered the same word as "text"
   at the end of the link, preventing it from line wrapping onto its own line.
-<td class='main-link clearfix' colspan="1" role="rowheader">
+<td class='main-link clearfix' colspan="1">
   {{~raw-plugin-outlet name="topic-list-before-link"}}
   <span class='link-top-line'>
     {{~raw-plugin-outlet name="topic-list-before-status"}}

GitHub sha: 3fefdb19733c9915475d6fc715666c396b123631

This commit appears in #13353 which was approved by lis2. It was merged by SamSaffron.