From 3f569f118545daf039c072e73037095d53be43b4 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 9 Jun 2022 15:05:01 +0000
Subject: [PATCH] A11Y: Add keyboard support for do-not-disturb modal (#17043)

---
 .../discourse/app/components/tap-tile.js      | 12 +++----
 .../app/templates/modal/do-not-disturb.hbs    |  8 +++--
 .../tests/acceptance/do-not-disturb-test.js   | 36 ++++++++++++++++---
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/tap-tile.js b/app/assets/javascripts/discourse/app/components/tap-tile.js
index 8671cc1ad2e..18a01cfd60b 100644
--- a/app/assets/javascripts/discourse/app/components/tap-tile.js
+++ b/app/assets/javascripts/discourse/app/components/tap-tile.js
@@ -5,25 +5,25 @@ import { propertyEqual } from "discourse/lib/computed";
 export default Component.extend({
   init() {
     this._super(...arguments);
-
     this.set("elementId", `tap_tile_${this.tileId}`);
   },
 
   classNames: ["tap-tile"],
-
   classNameBindings: ["active"],
-
   attributeBindings: ["role", "ariaPressed", "tabIndex"],
-
   role: "button",
-
   tabIndex: 0,
-
   ariaPressed: reads("active"),
 
   click() {
     this.onChange(this.tileId);
   },
 
+  keyDown(e) {
+    if (e.key === "Enter") {
+      this.onChange(this.tileId);
+    }
+  },
+
   active: propertyEqual("activeTile", "tileId"),
 });
diff --git a/app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs b/app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs
index 6a31d7d5596..fd0d43cc8cf 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/do-not-disturb.hbs
@@ -14,7 +14,9 @@
     {{/tap-tile}}
   {{/tap-tile-grid}}
 
-  <a href {{ action navigateToNotificationSchedule }}>
-    {{i18n "do_not_disturb.set_schedule"}}
-  </a>
+  {{d-button
+    action=(action "navigateToNotificationSchedule")
+    label="do_not_disturb.set_schedule"
+  }}
+
 {{/d-modal-body}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js b/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
index 2e27ca50425..e2e368d27d3 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
@@ -5,7 +5,7 @@ import {
   queryAll,
   updateCurrentUser,
 } from "discourse/tests/helpers/qunit-helpers";
-import { click, visit } from "@ember/test-helpers";
+import { click, triggerKeyEvent, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 
 acceptance("Do not disturb", function (needs) {
@@ -37,14 +37,40 @@ acceptance("Do not disturb", function (needs) {
 
     await click(tiles[0]);
 
+    assert.ok(query(".do-not-disturb-modal.hidden"), "modal is hidden");
+
     assert.ok(
-      query(".do-not-disturb-modal").style.display === "none",
-      "modal is hidden"
+      exists(".header-dropdown-toggle .do-not-disturb-background .d-icon-moon"),
+      "moon icon is present in header"
+    );
+  });
+
+  test("Can be invoked via keyboard", async function (assert) {
+    updateCurrentUser({ do_not_disturb_until: null });
+
+    await visit("/");
+    await click(".header-dropdown-toggle.current-user");
+    await click(".menu-links-row .user-preferences-link");
+    await click(".do-not-disturb");
+
+    assert.ok(exists(".do-not-disturb-modal"), "DND modal is displayed");
+
+    assert.strictEqual(
+      queryAll(".do-not-disturb-tile").length,
+      4,
+      "There are 4 duration choices"
+    );
+
+    await triggerKeyEvent(".do-not-disturb-tile:nth-child(1)", "keydown", 13);
+
+    assert.ok(
+      query(".do-not-disturb-modal.hidden"),
+      "DND modal is hidden after making a choice"
     );
 
     assert.ok(
-      exists(".header-dropdown-toggle .do-not-disturb-background"),
-      "moon icon is present in header"
+      exists(".header-dropdown-toggle .do-not-disturb-background .d-icon-moon"),
+      "moon icon is shown in header avatar"
     );
   });