A11Y: Keyboard access for /u table headings (#17041)

app/assets/javascripts/discourse/app/components/table-header-toggle.js

@@ -31,6 +31,11 @@ export default Component.extend({
   click() {
     this.toggleProperties();
   },
+  keyPress(e) {
+    if (e.which === 13) {
+      this.toggleProperties();
+    }
+  },
   didReceiveAttrs() {
     this._super(...arguments);
     if (!this.automatic && !this.translated) {

app/assets/javascripts/discourse/app/templates/components/table-header-toggle.hbs

@@ -1,4 +1,8 @@
-<span class="header-contents" id={{id}}>
+<span
+  class="header-contents"
+  id={{id}}
+  role="button"
+  tabindex="0">
   {{directory-table-header-title field=field labelKey=labelKey icon=icon translated=translated}}
   {{chevronIcon}}
 </span>

app/assets/javascripts/discourse/tests/acceptance/users-test.js

@@ -5,7 +5,7 @@ import {
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import { test } from "qunit";
-import { click, visit } from "@ember/test-helpers";
+import { click, triggerKeyEvent, visit } from "@ember/test-helpers";
 
 acceptance("User Directory", function () {
   test("Visit Page", async function (assert) {
@@ -43,6 +43,20 @@ acceptance("User Directory", function () {
       "Blue"
     );
   });
+
+  test("Can sort table via keyboard", async function (assert) {
+    await visit("/u");
+
+    const secondHeading =
+      ".users-directory table th:nth-child(2) .header-contents";
+
+    await triggerKeyEvent(secondHeading, "keypress", 13);
+
+    assert.ok(
+      query(`${secondHeading} .d-icon-chevron-up`),
+      "list has been sorted"
+    );
+  });
 });
 
 acceptance("User directory - Editing columns", function (needs) {