From adf098f21b4bcdcad733e37a75e9b74723d98936 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 15 Jan 2025 12:53:05 -0500
Subject: [PATCH] A11Y: move heading role to parent tag to fix voice control
 (#30796)

The heading role on topic lists is desirable for screenreader users
because they can easily navigate from heading to heading.

Having this role on the link tag directly becomes problematic for Voice
Control users on Apple devices because unfortunately Voice Control
assumes that when given the role of a heading, it is not a link. This
makes it difficult to click.

This PR moves the heading role to the link's wrapper. This change allows
for heading-to-heading navigation for screenreaders, and also makes it
easier to click using Voice Control. The end result is that topic lists
are both navigable for screenreaders and Voice Control users.
---
 .../discourse/app/components/topic-list/item/topic-cell.gjs     | 2 +-
 .../discourse/app/components/topic-list/topic-link.gjs          | 2 --
 app/assets/javascripts/discourse/app/helpers/topic-link.js      | 2 --
 .../discourse/app/raw-templates/list/topic-list-item.hbr        | 2 +-
 4 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-list/item/topic-cell.gjs b/app/assets/javascripts/discourse/app/components/topic-list/item/topic-cell.gjs
index 3881ba0e494..140f389f886 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list/item/topic-cell.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-list/item/topic-cell.gjs
@@ -55,7 +55,7 @@ export default class TopicCell extends Component {
         @outletArgs={{hash topic=@topic}}
       />
 
-      <span class="link-top-line">
+      <span class="link-top-line" role="heading" aria-level="2">
         {{~! no whitespace ~}}
         <PluginOutlet
           @name="topic-list-before-status"
diff --git a/app/assets/javascripts/discourse/app/components/topic-list/topic-link.gjs b/app/assets/javascripts/discourse/app/components/topic-list/topic-link.gjs
index 581e1edf9db..7bddfcba829 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list/topic-link.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-list/topic-link.gjs
@@ -17,8 +17,6 @@ export default class TopicLink extends Component {
       <a
         href={{this.url}}
         data-topic-id={{@topic.id}}
-        role="heading"
-        aria-level="2"
         class="title"
         ...attributes
       >{{htmlSafe @topic.fancyTitle}}</a>
diff --git a/app/assets/javascripts/discourse/app/helpers/topic-link.js b/app/assets/javascripts/discourse/app/helpers/topic-link.js
index 18e9178ccc7..217e0e27676 100644
--- a/app/assets/javascripts/discourse/app/helpers/topic-link.js
+++ b/app/assets/javascripts/discourse/app/helpers/topic-link.js
@@ -17,8 +17,6 @@ export default function topicLink(topic, args = {}) {
 
   return htmlSafe(
     `<a href='${url}'
-        role='heading'
-        aria-level='2'
         class='${classes.join(" ")}'
         data-topic-id='${topic.id}'>${title}</a>`
   );
diff --git a/app/assets/javascripts/discourse/app/raw-templates/list/topic-list-item.hbr b/app/assets/javascripts/discourse/app/raw-templates/list/topic-list-item.hbr
index 0cdb6e8a453..fc86f729043 100644
--- a/app/assets/javascripts/discourse/app/raw-templates/list/topic-list-item.hbr
+++ b/app/assets/javascripts/discourse/app/raw-templates/list/topic-list-item.hbr
@@ -18,7 +18,7 @@
 <td class='main-link clearfix topic-list-data' colspan="1">
   {{~raw-plugin-outlet name="topic-list-before-link"}}
   {{~plugin-outlet name="topic-list-before-link" outletArgs=(raw-hash topic=topic)}}
-  <span class='link-top-line'>
+  <span class="link-top-line" role="heading" aria-level="2">
     {{~raw-plugin-outlet name="topic-list-before-status"}}
     {{~plugin-outlet name="topic-list-before-status" outletArgs=(raw-hash topic=topic)}}
     {{~raw "topic-status" topic=topic}}