From fd2dbdccdce7abca088d98b228c660f85e013f5b Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 8 Jun 2022 17:54:31 +0000
Subject: [PATCH] A11Y: Keyboard access for `/u` table headings (#17041)

---
 .../app/components/table-header-toggle.js        |  5 +++++
 .../templates/components/table-header-toggle.hbs |  6 +++++-
 .../discourse/tests/acceptance/users-test.js     | 16 +++++++++++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/table-header-toggle.js b/app/assets/javascripts/discourse/app/components/table-header-toggle.js
index 9f59b8b44e9..514a14d452b 100644
--- a/app/assets/javascripts/discourse/app/components/table-header-toggle.js
+++ b/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) {
diff --git a/app/assets/javascripts/discourse/app/templates/components/table-header-toggle.hbs b/app/assets/javascripts/discourse/app/templates/components/table-header-toggle.hbs
index 408a2c79649..edd9dd3b3e7 100644
--- a/app/assets/javascripts/discourse/app/templates/components/table-header-toggle.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/tests/acceptance/users-test.js b/app/assets/javascripts/discourse/tests/acceptance/users-test.js
index 0e5850eee4f..14b7b438a28 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/users-test.js
+++ b/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) {