A11Y: make th keyboard accessible + aria attribs (#11895)

app/assets/javascripts/discourse/app/components/topic-list.js

@@ -192,4 +192,21 @@ export default Component.extend(LoadMore, {
       this.rerender();
     });
   },
+
+  keyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      let onKeyDown = (sel, callback) => {
+        let target = $(e.target).closest(sel);
+
+        if (target.length === 1) {
+          callback.apply(this, [target]);
+        }
+      };
+
+      onKeyDown("th.sortable", (e2) => {
+        this.changeSort(e2.data("sort-order"));
+        this.rerender();
+      });
+    }
+  },
 });

app/assets/javascripts/discourse/app/raw-views/topic-list-header-column.js

@@ -1,8 +1,12 @@
 import EmberObject from "@ember/object";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
+import { and } from "@ember/object/computed";
 
 export default EmberObject.extend({
+  sortable: null,
+  ariaPressed: and("sortable", "isSorting"),
+
   @discourseComputed
   localizedName() {
     if (this.forceName) {
@@ -45,4 +49,13 @@ export default EmberObject.extend({
 
     return name.join(" ");
   },
+
+  @discourseComputed
+  ariaSort() {
+    if (this.isSorting) {
+      return this.parent.ascending ? "ascending" : "descending";
+    } else {
+      return "none";
+    }
+  },
 });

app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr

@@ -1,4 +1,4 @@
-<th data-sort-order='{{order}}' class='{{view.className}}' {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}}>
+<th data-sort-order='{{order}}' class='{{view.className}}' scope="col" {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}} {{#if sortable}}tabindex="0" role="button" aria-pressed='{{view.ariaPressed}}' {{#if view.ariaSort}}aria-sort='{{view.ariaSort}}'{{/if}} {{/if}}>
   {{~#if canBulkSelect}}
     {{~#if showBulkToggle}}
       {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}

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

@@ -308,7 +308,8 @@ table {
   white-space: nowrap;
   cursor: pointer;
   .discourse-no-touch & {
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: var(--primary-low);
     }
   }