improvement: arrow-key nav in sticker picker

CHANGELOG.md

@@ -3,7 +3,7 @@
 ## [Unreleased][unreleased]
 
 ## Added
-- accessibility: arrow-key navigation for gallery #4376
+- accessibility: arrow-key navigation for gallery and sticker picker #4376, #4372
 - accessibility: arrow-key navigation: handle "End" and "Home" keys to go to last / first item #4438
 
 ## Changed

packages/frontend/scss/composer/_emoji-sticker-picker.scss

@@ -61,13 +61,20 @@ $emojimart-search-height: 31px + 6px;
     overflow: auto;
     flex-direction: column;
 
+    $pack-title-vertical-padding: 8px;
+    $pack-title-font-size: 16px;
+    $pack-title-line-height: 1.15;
     .sticker-container {
       display: flex;
       flex-direction: column;
       flex: 1;
       padding: 0px 12px 12px;
       overflow-y: auto;
 
+      // To account for the `position: sticky` title.
+      scroll-padding-top: $pack-title-font-size * $pack-title-line-height +
+        $pack-title-vertical-padding * 2;
+
       .no-stickers {
         display: flex;
         flex-direction: column;
@@ -83,13 +90,14 @@ $emojimart-search-height: 31px + 6px;
 
       .sticker-pack {
         & > .title {
-          padding: 8px 0px;
+          padding: $pack-title-vertical-padding 0px;
           color: grey;
           font-size: large;
           font-weight: 500;
           text-transform: capitalize;
           font-family: var(--font-family);
-          font-size: 16px;
+          font-size: $pack-title-font-size;
+          line-height: $pack-title-line-height;
           font-weight: 500;
           position: sticky;
           top: -1px;

packages/frontend/src/components/composer/EmojiAndStickerPicker.tsx

@@ -3,6 +3,7 @@ import React, {
   useEffect,
   forwardRef,
   PropsWithChildren,
+  useRef,
 } from 'react'
 import classNames from 'classnames'
 
@@ -17,6 +18,10 @@ import useMessage from '../../hooks/chat/useMessage'
 import styles from './styles.module.scss'
 
 import type { EmojiData } from 'emoji-mart/index'
+import {
+  RovingTabindexProvider,
+  useRovingTabindex,
+} from '../../contexts/RovingTabindex'
 
 type Props = {
   stickerPackName: string
@@ -34,6 +39,8 @@ const DisplayedStickerPack = ({
   const { jumpToMessage } = useMessage()
   const accountId = selectedAccountId()
 
+  const listRef = useRef<HTMLDivElement>(null)
+
   const onClickSticker = (fileName: string) => {
     const stickerPath = fileName.replace('file://', '')
     BackendRemote.rpc
@@ -47,21 +54,45 @@ const DisplayedStickerPack = ({
   return (
     <div className='sticker-pack'>
       <div className='title'>{stickerPackName}</div>
-      <div className='container'>
-        {stickerPackImages.map((filePath, index) => (
-          <button
-            className='sticker'
-            key={index}
-            onClick={() => onClickSticker(filePath)}
-          >
-            <img src={filePath} />
-          </button>
-        ))}
+      <div ref={listRef} className='container'>
+        {/* Yes, we have separate `RovingTabindexProvider` for each
+        sticker pack, instead of having one for all stickers.
+        Users probably want to switch between sticker packs with Tab. */}
+        <RovingTabindexProvider
+          wrapperElementRef={listRef}
+          direction='horizontal'
+        >
+          {stickerPackImages.map((filePath, index) => (
+            <StickersListItem
+              key={index}
+              filePath={filePath}
+              onClick={() => onClickSticker(filePath)}
+            />
+          ))}
+        </RovingTabindexProvider>
       </div>
     </div>
   )
 }
 
+function StickersListItem(props: { filePath: string; onClick: () => void }) {
+  const { filePath, onClick } = props
+  const ref = useRef<HTMLButtonElement>(null)
+  const rovingTabindex = useRovingTabindex(ref)
+  return (
+    <button
+      ref={ref}
+      className={'sticker ' + rovingTabindex.className}
+      onClick={onClick}
+      tabIndex={rovingTabindex.tabIndex}
+      onKeyDown={rovingTabindex.onKeydown}
+      onFocus={rovingTabindex.setAsActiveElement}
+    >
+      <img src={filePath} />
+    </button>
+  )
+}
+
 export const StickerPicker = ({
   stickers,
   chatId,