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

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.

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 3019433..8b05472 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() {

GitHub sha: 759abb32

This commit appears in #13153 which was approved by awesomerobot. It was merged by SamSaffron.