UX: makes chat-channel-row tabbable and respond to Enter key (#517)

UX: makes chat-channel-row tabbable and respond to Enter key (#517)

diff --git a/assets/javascripts/discourse/components/chat-channel-row.js b/assets/javascripts/discourse/components/chat-channel-row.js
index a7f9508..3220319 100644
--- a/assets/javascripts/discourse/components/chat-channel-row.js
+++ b/assets/javascripts/discourse/components/chat-channel-row.js
@@ -42,14 +42,28 @@ export default Component.extend({
 
   @action
   handleSwitchChannel(event) {
+    if (this.switchChannel) {
+      this.switchChannel(this.channel);
+      event.preventDefault();
+    }
+  },
+
+  @action
+  handleClick(event) {
     if (event.target.classList.contains("chat-channel-leave-btn")) {
       return;
     }
 
-    if (this.switchChannel) {
-      this.switchChannel(this.channel);
-      event.preventDefault();
+    this.handleSwitchChannel(event);
+  },
+
+  @action
+  handleKeydown(event) {
+    if (event.key !== "Enter") {
+      return;
     }
+
+    this.handleSwitchChannel(event);
   },
 
   @action
diff --git a/assets/javascripts/discourse/templates/components/chat-channel-row.hbs b/assets/javascripts/discourse/templates/components/chat-channel-row.hbs
index 3a3e2ca..d6d830d 100644
--- a/assets/javascripts/discourse/templates/components/chat-channel-row.hbs
+++ b/assets/javascripts/discourse/templates/components/chat-channel-row.hbs
@@ -1,9 +1,11 @@
 <div
   id="chat-channel-row-{{channel.id}}"
   class="{{rowClassNames}} {{if isUnfollowing "unfollowing"}}"
-  {{on "click" (fn this.handleSwitchChannel)}}
+  {{on "click" (fn this.handleClick)}}
+  {{on "keydown" (fn this.handleKeydown)}}
   {{on "mousedown" (fn this.handleNewWindow)}}
   role="button"
+  tabindex="0"
 >
   {{chat-channel-title channel=channel}}
   {{chat-channel-unread-indicator channel=channel}}
diff --git a/test/javascripts/components/chat-channel-row-test.js b/test/javascripts/components/chat-channel-row-test.js
index 650a5be..b5f8a7d 100644
--- a/test/javascripts/components/chat-channel-row-test.js
+++ b/test/javascripts/components/chat-channel-row-test.js
@@ -4,6 +4,7 @@ import componentTest, {
 import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers";
 import hbs from "htmlbars-inline-precompile";
 import fabricate from "../helpers/fabricators";
+import { click, triggerKeyEvent } from "@ember/test-helpers";
 
 discourseModule(
   "Discourse Chat | Component | chat-channel-row",
@@ -33,5 +34,53 @@ discourseModule(
         assert.notOk(exists(".chat-channel-leave-btn"));
       },
     });
+
+    componentTest("receives click", {
+      template: hbs`{{chat-channel-row switchChannel=switchChannel channel=channel}}`,
+
+      beforeEach() {
+        this.set("switchedChannel", null);
+        this.set("channel", fabricate("chat-channel"));
+        this.set("switchChannel", (channel) =>
+          this.set("switchedChannel", channel.id)
+        );
+      },
+
+      async test(assert) {
+        await click(".chat-channel-row");
+
+        assert.strictEqual(this.switchedChannel, this.channel.id);
+      },
+    });
+
+    componentTest("receives Enter keydown", {
+      template: hbs`{{chat-channel-row switchChannel=switchChannel channel=channel}}`,
+
+      beforeEach() {
+        this.set("switchedChannel", null);
+        this.set("channel", fabricate("chat-channel"));
+        this.set("switchChannel", (channel) =>
+          this.set("switchedChannel", channel.id)
+        );
+      },
+
+      async test(assert) {
+        await triggerKeyEvent(".chat-channel-row", "keydown", 13);
+
+        assert.strictEqual(this.switchedChannel, this.channel.id);
+      },
+    });
+
+    componentTest("can receive a tab event", {
+      template: hbs`{{chat-channel-row channel=channel}}`,
+
+      beforeEach() {
+        this.set("channel", fabricate("chat-channel"));
+      },
+
+      async test(assert) {
+        assert.ok(exists(".chat-channel-row[tabindex=0]"));
+      },
+    });
   }
 );

GitHub sha: 70111b03acc05a669af49c450b3a5a74025098ed

This commit appears in #517 which was approved by ZogStriP. It was merged by jjaffeux.