fix(emojis): improve picker keyboard accessibility

- Skin-tone selector: expose it as a proper WAI-ARIA radiogroup — focus moves
  onto the checked tone when it opens, a roving tabindex keeps one tone
  tab-reachable, arrow/Home/End keys move the selection (selection follows
  focus), and Escape collapses back to the toggle without closing the picker.
- Mark the emoji toggle button with aria-haspopup="dialog".

Author: oliverlaz

src/plugins/Emojis/EmojiPicker.tsx

@@ -184,6 +184,7 @@ export const EmojiPicker = (props: EmojiPickerProps) => {
       <Button
         appearance='ghost'
         aria-expanded={displayPicker}
+        aria-haspopup='dialog'
         aria-label={t('aria/Emoji picker')}
         circular
         className={props.buttonClassName ?? defaultButtonClassName}

src/plugins/Emojis/__tests__/EmojiPicker.test.tsx

@@ -1,4 +1,4 @@
-import type { MouseEventHandler, ReactNode } from 'react';
+import type { AriaAttributes, MouseEventHandler, ReactNode } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 // The panel is mounted only while the picker is open, so mock it to a controllable
@@ -51,6 +51,7 @@ vi.mock('../../../components', async () => {
         // Forward only the DOM-valid props the test needs; styling props are dropped.
         return (
           <button
+            aria-haspopup={props['aria-haspopup'] as AriaAttributes['aria-haspopup']}
             aria-label={props['aria-label'] as string | undefined}
             onClick={props.onClick as MouseEventHandler<HTMLButtonElement> | undefined}
             ref={ref}
@@ -121,6 +122,14 @@ describe('EmojiPicker session state', () => {
     fireEvent.click(screen.getByText('select-rocket'));
     expect(screen.getByTestId('frequently-used').textContent).toBe('');
   });
+
+  it('marks the toggle button as opening a dialog popup', () => {
+    render(<EmojiPicker />);
+    expect(screen.getByLabelText('aria/Emoji picker')).toHaveAttribute(
+      'aria-haspopup',
+      'dialog',
+    );
+  });
 });
 
 describe('EmojiPicker pickerProps', () => {

src/plugins/Emojis/components/SkinToneSelector.tsx

@@ -1,39 +1,96 @@
-import { useState } from 'react';
+import { type KeyboardEvent, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { SKIN_TONES } from './skinTones';
+import { MAX_SKIN_TONE_INDEX, SKIN_TONES } from './skinTones';
 import { useTranslationContext } from '../../../context';
 
 export type SkinToneSelectorProps = {
   onSelect: (skinToneIndex: number) => void;
   skinToneIndex: number;
 };
 
+const ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp', 'Home', 'End'];
+
 /**
- * Skin-tone picker rendered in the footer. Collapsed to the active tone; expands to
- * a radiogroup of all tones on activation.
+ * Skin-tone picker rendered in the footer. Collapsed to the active tone; expands to a
+ * WAI-ARIA radiogroup: focus moves onto the checked tone on open, a roving tabindex keeps
+ * one tone tab-reachable, arrow/Home/End keys move the selection (selection follows
+ * focus), and Escape collapses back to the toggle without closing the whole picker.
  */
 export const SkinToneSelector = ({ onSelect, skinToneIndex }: SkinToneSelectorProps) => {
   const { t } = useTranslationContext('EmojiPickerSkinTone');
   const [expanded, setExpanded] = useState(false);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const groupRef = useRef<HTMLDivElement>(null);
+  const returnFocusToToggle = useRef(false);
   const activeTone = SKIN_TONES[skinToneIndex] ?? SKIN_TONES[0];
 
+  const radios = () =>
+    Array.from(
+      groupRef.current?.querySelectorAll<HTMLButtonElement>('[role="radio"]') ?? [],
+    );
+
+  useEffect(() => {
+    if (expanded) {
+      // Move focus into the group, onto the checked tone, when it opens.
+      radios()[skinToneIndex]?.focus();
+    } else if (returnFocusToToggle.current) {
+      returnFocusToToggle.current = false;
+      toggleRef.current?.focus();
+    }
+    // Focus is managed on open/close only; arrow navigation focuses the target directly.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expanded]);
+
   if (!expanded) {
     return (
       <button
         aria-label={t('aria/Choose default skin tone')}
         className='str-chat__emoji-picker__skin-tone-toggle'
         onClick={() => setExpanded(true)}
+        ref={toggleRef}
         type='button'
       >
         <span aria-hidden='true'>{activeTone.glyph}</span>
       </button>
     );
   }
 
+  const collapse = (returnFocus: boolean) => {
+    returnFocusToToggle.current = returnFocus;
+    setExpanded(false);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation(); // collapse the group, not the whole picker
+      collapse(true);
+      return;
+    }
+    if (!ARROW_KEYS.includes(event.key)) return;
+    event.preventDefault();
+
+    let next = skinToneIndex;
+    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+      next = skinToneIndex >= MAX_SKIN_TONE_INDEX ? 0 : skinToneIndex + 1;
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+      next = skinToneIndex <= 0 ? MAX_SKIN_TONE_INDEX : skinToneIndex - 1;
+    } else if (event.key === 'Home') {
+      next = 0;
+    } else if (event.key === 'End') {
+      next = MAX_SKIN_TONE_INDEX;
+    }
+
+    // All tones are mounted, so focus the target now; selection follows focus.
+    radios()[next]?.focus();
+    onSelect(next);
+  };
+
   return (
     <div
       aria-label={t('aria/Choose default skin tone')}
       className='str-chat__emoji-picker__skin-tones'
+      onKeyDown={onKeyDown}
+      ref={groupRef}
       role='radiogroup'
     >
       {SKIN_TONES.map((tone, index) => (
@@ -46,9 +103,10 @@ export const SkinToneSelector = ({ onSelect, skinToneIndex }: SkinToneSelectorPr
           key={tone.labelKey}
           onClick={() => {
             onSelect(index);
-            setExpanded(false);
+            collapse(true);
           }}
           role='radio'
+          tabIndex={index === skinToneIndex ? 0 : -1}
           type='button'
         >
           <span aria-hidden='true'>{tone.glyph}</span>

src/plugins/Emojis/components/__tests__/SkinToneSelector.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('../../../../context', () => ({
+  useTranslationContext: () => ({ t: (key: string) => key }),
+}));
+
+import { SkinToneSelector } from '../SkinToneSelector';
+
+const openGroup = () =>
+  fireEvent.click(screen.getByRole('button', { name: 'aria/Choose default skin tone' }));
+
+describe('SkinToneSelector radiogroup keyboard navigation', () => {
+  it('moves focus to the checked tone when the group opens, with roving tabindex', () => {
+    render(<SkinToneSelector onSelect={vi.fn()} skinToneIndex={2} />);
+    openGroup();
+
+    const radios = screen.getAllByRole('radio');
+    expect(radios[2]).toHaveFocus();
+    expect(radios[2]).toHaveAttribute('tabindex', '0');
+    expect(radios[0]).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('selects the next/previous tone with arrow keys (selection follows focus)', () => {
+    const onSelect = vi.fn();
+    render(<SkinToneSelector onSelect={onSelect} skinToneIndex={0} />);
+    openGroup();
+
+    const group = screen.getByRole('radiogroup');
+    fireEvent.keyDown(group, { key: 'ArrowRight' });
+    expect(onSelect).toHaveBeenLastCalledWith(1);
+    fireEvent.keyDown(group, { key: 'ArrowLeft' });
+    expect(onSelect).toHaveBeenLastCalledWith(5); // wraps from 0 to the last tone
+  });
+
+  it('jumps to the first/last tone with Home/End', () => {
+    const onSelect = vi.fn();
+    render(<SkinToneSelector onSelect={onSelect} skinToneIndex={2} />);
+    openGroup();
+
+    const group = screen.getByRole('radiogroup');
+    fireEvent.keyDown(group, { key: 'End' });
+    expect(onSelect).toHaveBeenLastCalledWith(5);
+    fireEvent.keyDown(group, { key: 'Home' });
+    expect(onSelect).toHaveBeenLastCalledWith(0);
+  });
+
+  it('collapses on Escape without bubbling to close the whole picker', () => {
+    const onOuterKeyDown = vi.fn();
+    render(
+      <div onKeyDown={onOuterKeyDown}>
+        <SkinToneSelector onSelect={vi.fn()} skinToneIndex={0} />
+      </div>,
+    );
+    openGroup();
+
+    fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'Escape' });
+
+    expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'aria/Choose default skin tone' }),
+    ).toBeInTheDocument();
+    // Escape stayed inside the selector — it must not reach the picker's Escape handler.
+    expect(onOuterKeyDown).not.toHaveBeenCalled();
+  });
+});