refactor(chat): use key binding controller instead of handling keydown event

Author: teodosiah

src/components/chat/chat-message-list.ts

@@ -4,6 +4,7 @@ import { state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { chatContext } from '../common/context.js';
 import {
+  addKeybindings,
   arrowDown,
   arrowUp,
   endKey,
@@ -63,6 +64,15 @@ export default class IgcChatMessageListComponent extends LitElement {
     registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);
   }
 
+  constructor() {
+    super();
+    addKeybindings(this)
+      .set(homeKey, this.navigateToMessage)
+      .set(endKey, this.navigateToMessage)
+      .set(arrowUp, this.navigateToMessage)
+      .set(arrowDown, this.navigateToMessage);
+  }
+
   /**
    * Formats a date to a human-readable label.
    * Returns 'Today', 'Yesterday', or localized date string.
@@ -168,7 +178,7 @@ export default class IgcChatMessageListComponent extends LitElement {
    * @param e KeyboardEvent from user input
    * @private
    */
-  private handleKeyDown(e: KeyboardEvent) {
+  private navigateToMessage(e: KeyboardEvent) {
     if (!this._chatState?.messages || this._chatState.messages.length === 0) {
       return;
     }
@@ -179,21 +189,21 @@ export default class IgcChatMessageListComponent extends LitElement {
     let activeMessageId = '';
 
     switch (e.key) {
-      case homeKey:
+      case 'home':
         activeMessageId = this._chatState.sortedMessagesIds[0];
         break;
-      case endKey:
+      case 'end':
         activeMessageId =
           this._chatState.sortedMessagesIds[
             this._chatState.sortedMessagesIds.length - 1
           ];
         break;
-      case arrowUp:
+      case 'arrowup':
         if (currentIndex > 0) {
           activeMessageId = this._chatState.sortedMessagesIds[currentIndex - 1];
         }
         break;
-      case arrowDown:
+      case 'arrowdown':
         if (currentIndex < this._chatState?.messages.length - 1) {
           activeMessageId = this._chatState.sortedMessagesIds[currentIndex + 1];
         }
@@ -258,10 +268,8 @@ export default class IgcChatMessageListComponent extends LitElement {
         aria-label="Message list"
         tabindex="0"
         @focusin=${this.handleFocusIn}
-        @focusout=${this.handleFocusOut}
-        @keydown=${this.handleKeyDown}
-      >
-        <div part="message-list">
+        @focusout=${this.handleFocusOut}></div>
+        <div class="message-list">
           ${repeat(
             groupedMessages,
             (group) => group.date,
@@ -286,9 +294,11 @@ export default class IgcChatMessageListComponent extends LitElement {
               )}
             `
           )}
-          ${this._chatState?.options?.isComposing
-            ? this.renderLoadingTemplate()
-            : nothing}
+          ${
+            this._chatState?.options?.isComposing
+              ? this.renderLoadingTemplate()
+              : nothing
+          }
         </div>
       </div>
     `;

src/components/chat/chat.spec.ts

@@ -1232,27 +1232,15 @@ describe('Chat', () => {
         await nextFrame();
 
         // Activates the previous message on `ArrowUp`
-        messageContainer.dispatchEvent(
-          new KeyboardEvent('keydown', {
-            key: arrowUp,
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-        await nextFrame();
+        simulateKeyboard(messageContainer, arrowUp);
+        await elementUpdated(chat);
         expect(messageContainer.getAttribute('aria-activedescendant')).to.equal(
           'message-3'
         );
 
         // Activates the next message on `ArrowDown`
-        messageContainer.dispatchEvent(
-          new KeyboardEvent('keydown', {
-            key: arrowDown,
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-        await nextFrame();
+        simulateKeyboard(messageContainer, arrowDown);
+        await elementUpdated(chat);
         expect(messageContainer.getAttribute('aria-activedescendant')).to.equal(
           'message-4'
         );
@@ -1274,27 +1262,15 @@ describe('Chat', () => {
         await nextFrame();
 
         // Activates the first message on `Home`
-        messageContainer.dispatchEvent(
-          new KeyboardEvent('keydown', {
-            key: homeKey,
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-        await nextFrame();
+        simulateKeyboard(messageContainer, homeKey);
+        await elementUpdated(chat);
         expect(messageContainer.getAttribute('aria-activedescendant')).to.equal(
           'message-1'
         );
 
         // Activates the last message on `End`
-        messageContainer.dispatchEvent(
-          new KeyboardEvent('keydown', {
-            key: endKey,
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-        await nextFrame();
+        simulateKeyboard(messageContainer, endKey);
+        await elementUpdated(chat);
         expect(messageContainer.getAttribute('aria-activedescendant')).to.equal(
           'message-4'
         );