[Emoji Picker] Improve Keyboard Navigation

- Make emoji-image element keyboard navigatable.
- Handle several key-down events to perform extra logic:
  - `Enter` to trigger GIF insertion.
  - `Tab` / `Shift-Tab` to move focus to the correct position.


Bug: b:281605076
Change-Id: I5234dd4661c3fff1cfcd63922e61029526525d0e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4517567
Reviewed-by: John Palmer <jopalmer@chromium.org>
Commit-Queue: Grey Wang <greywang@google.com>
Cr-Commit-Position: refs/heads/main@{#1150365}

chrome/browser/resources/chromeos/emoji_picker/emoji_image.html

@@ -76,6 +76,7 @@
   on-contextmenu="handleContextMenu"
   on-mouseleave="handleMouseLeave"
   style$="[[getStyles(item)]]">
+
   <img data-index$="[[index]]"
     class$="[[getImageClassName(loading)]]"
     is="cr-auto-img"
@@ -85,7 +86,10 @@
     on-mouseenter="handleMouseEnter"
     on-focus="handleFocus"
     on-click="handleClick"
-    on-load="handleLoad">
+    on-keydown="handleKeydown"
+    on-load="handleLoad"
+    role="button"
+    tabindex="0">
 
   <template is="dom-if" if="[[showClearButton]]">
     <button class="emoji-image-clear" on-click="handleClear">

chrome/browser/resources/chromeos/emoji_picker/emoji_image.ts

@@ -52,6 +52,49 @@ export class EmojiImageComponent extends PolymerElement {
     this.emojiClick(event);
   }
 
+  private findSiblingEmojiImageByIndex(index: number):
+      EmojiImageComponent|null {
+    // The shadow root of emoji-group.
+    const parentShadowRoot = this.shadowRoot!.host.getRootNode() as ShadowRoot;
+
+    for (const emojiImage of parentShadowRoot.querySelectorAll('emoji-image')) {
+      if (emojiImage.index === index) {
+        return emojiImage;
+      }
+    }
+
+    return null;
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    // The img element where the keyboard event is triggered.
+    const target = event.target as HTMLImageElement;
+
+    // Triggers click event to insert the current GIF image.
+    if (event.code === 'Enter') {
+      event.stopPropagation();
+      target.click();
+      return;
+    }
+
+    // Moves focus to the correct sibling.
+    if (event.code === 'Tab') {
+      const siblingIndex = this.index + (event.shiftKey ? -1 : +1);
+      const sibling = this.findSiblingEmojiImageByIndex(siblingIndex);
+
+      if (sibling !== null) {
+        event.preventDefault();
+        event.stopPropagation();
+        sibling.focus();
+        return;
+      }
+    }
+  }
+
+  override focus() {
+    this.shadowRoot?.querySelector('img')?.focus();
+  }
+
   private handleLoad(): void {
     this.loading = false;
   }