A11Y: convert sortable topic list headers to proper buttons (#29808)

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();
       });

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}}

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>

app/assets/stylesheets/common/base/discourse.scss

@@ -312,6 +312,11 @@ textarea {
   }
   @include unselectable;
   cursor: pointer;
+
+  button {
+    background: none;
+    border: none;
+  }
 }
 
 .radio,