FIX: Allow keyboard navigation when searching emojis in chat (#20157)

plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs

@@ -116,34 +116,36 @@
       <div
         class="chat-emoji-picker__sections"
         {{on "click" this.didSelectEmoji}}
-        {{on "keydown" this.didSelectEmoji}}
+        {{on "keydown" this.onSectionsKeyDown}}
         role="button"
       >
         {{#if (gte this.filteredEmojis.length 0)}}
-          {{#each this.filteredEmojis as |emoji|}}
-            <img
-              width="32"
-              height="32"
-              class="emoji"
-              src={{tonable-emoji-url
-                emoji
-                this.chatEmojiReactionStore.diversity
-              }}
-              tabindex="0"
-              data-emoji={{emoji.name}}
-              data-tonable={{if emoji.tonable "true"}}
-              alt={{emoji.name}}
-              title={{tonable-emoji-title
-                emoji
-                this.chatEmojiReactionStore.diversity
-              }}
-              loading="lazy"
-            />
-          {{else}}
-            <p class="chat-emoji-picker__no-reults">
-              {{i18n "chat.emoji_picker.no_results"}}
-            </p>
-          {{/each}}
+          <div class="chat-emoji-picker__section filtered">
+            {{#each this.filteredEmojis as |emoji|}}
+              <img
+                width="32"
+                height="32"
+                class="emoji"
+                src={{tonable-emoji-url
+                  emoji
+                  this.chatEmojiReactionStore.diversity
+                }}
+                tabindex="0"
+                data-emoji={{emoji.name}}
+                data-tonable={{if emoji.tonable "true"}}
+                alt={{emoji.name}}
+                title={{tonable-emoji-title
+                  emoji
+                  this.chatEmojiReactionStore.diversity
+                }}
+                loading="lazy"
+              />
+            {{else}}
+              <p class="chat-emoji-picker__no-reults">
+                {{i18n "chat.emoji_picker.no_results"}}
+              </p>
+            {{/each}}
+          </div>
         {{/if}}
 
         {{#each-in this.groups as |section emojis|}}
@@ -158,7 +160,6 @@
               (concat "chat.emoji_picker." section)
               translatedFallback=section
             }}
-            {{on "keydown" this.didNavigateSection}}
           >
             <h2 class="chat-emoji-picker__section-title">
               {{i18n

plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js

@@ -231,6 +231,15 @@ export default class ChatEmojiPicker extends Component {
     });
   }
 
+  @action
+  onSectionsKeyDown(event) {
+    if (event.key === "Enter") {
+      this.didSelectEmoji(event);
+    } else {
+      this.didNavigateSection(event);
+    }
+  }
+
   @action
   didNavigateSection(event) {
     const sectionsEmojis = (section) => [...section.querySelectorAll(".emoji")];
@@ -247,7 +256,7 @@ export default class ChatEmojiPicker extends Component {
     };
     const allEmojis = () => [
       ...document.querySelectorAll(
-        ".chat-emoji-picker__scrollable-content .emoji"
+        ".chat-emoji-picker__section:not(.hidden) .emoji"
       ),
     ];
 

plugins/chat/assets/stylesheets/common/chat-emoji-picker.scss

@@ -98,7 +98,8 @@
     }
   }
 
-  &__section-emojis {
+  &__section-emojis,
+  &__section.filtered {
     padding: 0.5rem;
   }
 
@@ -164,18 +165,23 @@
     &.t1 {
       background: #ffcc4d;
     }
+
     &.t2 {
       background: #f7dece;
     }
+
     &.t3 {
       background: #f3d2a2;
     }
+
     &.t4 {
       background: #d5ab88;
     }
+
     &.t5 {
       background: #af7e57;
     }
+
     &.t6 {
       background: #7c533e;
     }

plugins/chat/test/javascripts/components/chat-emoji-picker-test.js

@@ -3,7 +3,7 @@ import { exists, query, queryAll } from "discourse/tests/helpers/qunit-helpers";
 import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import pretender from "discourse/tests/helpers/create-pretender";
-import { click, fillIn, render } from "@ember/test-helpers";
+import { click, fillIn, render, triggerKeyEvent } from "@ember/test-helpers";
 
 function emojisResponse() {
   return {
@@ -138,26 +138,26 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
     await fillIn(".dc-filter-input", "grinning");
 
     assert.strictEqual(
-      queryAll(".chat-emoji-picker__sections > img").length,
+      queryAll(".chat-emoji-picker__section.filtered > img").length,
       1,
       "it filters the emojis list"
     );
     assert.true(
-      exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
+      exists('.chat-emoji-picker__section.filtered > img[alt="grinning"]'),
       "it filters the correct emoji"
     );
 
     await fillIn(".dc-filter-input", "Grinning");
 
     assert.true(
-      exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
+      exists('.chat-emoji-picker__section.filtered > img[alt="grinning"]'),
       "it is case insensitive"
     );
 
     await fillIn(".dc-filter-input", "smiley_cat");
 
     assert.true(
-      exists('.chat-emoji-picker__sections > img[alt="grinning"]'),
+      exists('.chat-emoji-picker__section.filtered > img[alt="grinning"]'),
       "it filters the correct emoji using search alias"
     );
   });
@@ -173,6 +173,72 @@ module("Discourse Chat | Component | chat-emoji-picker", function (hooks) {
     assert.strictEqual(selection, "grinning");
   });
 
+  test("When navigating sections", async function (assert) {
+    await render(hbs`<ChatEmojiPicker />`);
+
+    await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown");
+    assert.strictEqual(
+      document.activeElement.dataset.emoji,
+      "grinning",
+      "ArrowDown focuses on the first favorite emoji"
+    );
+
+    await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown");
+    await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown");
+    assert.strictEqual(
+      document.activeElement.dataset.emoji,
+      "raised_hands",
+      "ArrowDown focuses on the first emoji form the third section"
+    );
+
+    await triggerKeyEvent(document.activeElement, "keydown", "ArrowRight");
+    assert.strictEqual(
+      document.activeElement.dataset.emoji,
+      "man_rowing_boat",
+      "ArrowRight focuses on the emoji at the right"
+    );
+
+    await triggerKeyEvent(document.activeElement, "keydown", "ArrowLeft");
+    assert.strictEqual(
+      document.activeElement.dataset.emoji,
+      "raised_hands",
+      "ArrowLeft focuses on the emoji at the left"
+    );
+
+    await triggerKeyEvent(document.activeElement, "keydown", "ArrowUp");
+    assert.strictEqual(
+      document.activeElement.dataset.emoji,
+      "grinning",
+      "ArrowUp focuses on the first emoji form the second section"
+    );
+  });
+
+  test("When navigating filtered emojis", async function (assert) {
+    await render(hbs`<ChatEmojiPicker />`);
+    await fillIn(".dc-filter-input", "man");
+
+    await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown");
+    assert.strictEqual(
+      document.activeElement.dataset.emoji,
+      "man_rowing_boat",
+      "ArrowDown focuses on the first filtered emoji"
+    );
+
+    await triggerKeyEvent(document.activeElement, "keydown", "ArrowRight");
+    assert.strictEqual(
+      document.activeElement.dataset.emoji,
+      "womans_clothes",
+      "ArrowRight focuses on the emoji at the right"
+    );
+
+    await triggerKeyEvent(document.activeElement, "keydown", "ArrowLeft");
+    assert.strictEqual(
+      document.activeElement.dataset.emoji,
+      "man_rowing_boat",
+      "ArrowLeft focuses on the emoji at the left"
+    );
+  });
+
   test("When selecting a toned an emoji", async function (assert) {
     let selection;
     this.chatEmojiPickerManager.didSelectEmoji = (emoji) => {