From 84fecd370c2c549772176d79c850e056d27aaa90 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 19 Nov 2024 15:38:03 -0500
Subject: [PATCH] A11Y: convert sortable topic list headers to proper buttons
 (#29808)

---
 .../discourse/app/components/topic-list.js    |  1 +
 .../topic-list/topic-list-header-column.gjs   | 23 ++++++++++---------
 .../topic-list-header-column.hbr              | 16 +++++++++----
 .../stylesheets/common/base/discourse.scss    |  5 ++++
 4 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-list.js b/app/assets/javascripts/discourse/app/components/topic-list.js
index af01cd984f9..3044243f61a 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list.js
+++ b/app/assets/javascripts/discourse/app/components/topic-list.js
@@ -220,6 +220,7 @@ export default class TopicList extends Component.extend(LoadMore) {
       };
 
       onKeyDown("th.sortable", (element) => {
+        e.preventDefault();
         this.changeSort(element.dataset.sortOrder);
         this.rerender();
       });
diff --git a/app/assets/javascripts/discourse/app/components/topic-list/topic-list-header-column.gjs b/app/assets/javascripts/discourse/app/components/topic-list/topic-list-header-column.gjs
index ea65bc19d79..833e1ce71f4 100644
--- a/app/assets/javascripts/discourse/app/components/topic-list/topic-list-header-column.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-list/topic-list-header-column.gjs
@@ -123,20 +123,21 @@ export default class TopicListHeaderColumn extends Component {
             @changeNewListSubset={{@changeNewListSubset}}
           />
         {{else}}
-          <span
-            class={{if @screenreaderOnly "sr-only"}}
-            tabindex={{if @sortable "0"}}
-            role={{if @sortable "button"}}
-            aria-pressed={{this.isSorting}}
-          >
-            {{this.localizedName}}
-          </span>
+          {{#if @sortable}}
+            <button aria-pressed={{this.isSorting}}>
+              {{this.localizedName}}
+              {{#if this.isSorting}}
+                {{icon (if @ascending "chevron-up" "chevron-down")}}
+              {{/if}}
+            </button>
+          {{else}}
+            <span class={{if @screenreaderOnly "sr-only"}}>
+              {{this.localizedName}}
+            </span>
+          {{/if}}
         {{/if}}
       {{/unless}}
 
-      {{#if this.isSorting}}
-        {{icon (if @ascending "chevron-up" "chevron-down")}}
-      {{/if}}
       <PluginOutlet
         @name="topic-list-heading-bottom"
         @outletArgs={{hash name=@name bulkSelectEnabled=@bulkSelectEnabled}}
diff --git a/app/assets/javascripts/discourse/app/raw-templates/topic-list-header-column.hbr b/app/assets/javascripts/discourse/app/raw-templates/topic-list-header-column.hbr
index 5cb151d924e..3dc942f46fd 100644
--- a/app/assets/javascripts/discourse/app/raw-templates/topic-list-header-column.hbr
+++ b/app/assets/javascripts/discourse/app/raw-templates/topic-list-header-column.hbr
@@ -17,11 +17,19 @@
     {{~#if view.showTopicsAndRepliesToggle}}
       {{raw "list/new-list-header-controls" current=newListSubset newRepliesCount=newRepliesCount newTopicsCount=newTopicsCount}}
     {{else}}
-      <span {{#if view.screenreaderOnly}}class="sr-only"{{/if}} {{#if sortable}}tabindex="0" role="button" aria-pressed='{{view.ariaPressed}}'{{/if}}>{{view.localizedName}}</span>
+        {{#if sortable}}
+          <button aria-pressed='{{view.ariaPressed}}'>
+            {{view.localizedName}}
+            {{~#if view.isSorting}}
+              {{d-icon view.sortIcon}}
+            {{/if ~}}
+          </button>
+        {{else}}
+          <span {{#if view.screenreaderOnly}}class="sr-only"{{/if}}>
+            {{view.localizedName}}
+          </span>
+        {{/if}}
     {{/if ~}}
   {{/unless ~}}
-  {{~#if view.isSorting}}
-    {{d-icon view.sortIcon}}
-  {{/if ~}}
   {{~plugin-outlet name="topic-list-heading-bottom"  outletArgs=(raw-hash name=view.name bulkSelectEnabled=bulkSelectEnabled)~}}
 </th>
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index ab8a592eeea..86af3a93392 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -312,6 +312,11 @@ textarea {
   }
   @include unselectable;
   cursor: pointer;
+
+  button {
+    background: none;
+    border: none;
+  }
 }
 
 .radio,