emoji-picker-react 4.20.4 → 4.20.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.20.4",
+  "version": "4.20.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/DomUtils/elementPositionInRow.ts

@@ -11,6 +11,17 @@ export function elementCountInRow(
     return 0;
   }
 
+  // The virtualized layout positions emojis with a fixed per-row count that
+  // is rendered onto the category content element. That count is the single
+  // source of truth: deriving it again from fractional rect widths can be
+  // off by one (e.g. category padding shrinking the content box), which
+  // makes arrow-up/arrow-down drift sideways by a column.
+  // https://github.com/ealush/emoji-picker-react/issues/502
+  const declared = Number(parent.dataset?.emojisPerRow);
+  if (Number.isInteger(declared) && declared > 0) {
+    return declared;
+  }
+
   const parentWidth = parent.getBoundingClientRect().width;
   const elementWidth = element.getBoundingClientRect().width;
   return Math.floor(parentWidth / elementWidth);

package/src/components/Reactions/Reactions.tsx

@@ -52,6 +52,7 @@ export function Reactions() {
               unified={reaction}
               showVariations={false}
               className={cx(styles.emojiButton)}
+              buttonClassName={cx(styles.reactionButton)}
               noBackground
               getEmojiUrl={getEmojiUrl}
             />
@@ -77,6 +78,25 @@ const styles = stylesheet.create({
     alignItems: 'center',
     height: '100%',
   },
+  reactionButton: {
+    // Every picker button sets outline: none, and reaction buttons also
+    // suppress the focus background, so keyboard focus was invisible.
+    // Focus mirrors the hover treatment (scale plus a soft circular
+    // wash, no outline ring): the scale transform on the inner image
+    // alone is clipped by the button's overflow: hidden, and does
+    // nothing on inline native emoji, so the button itself carries the
+    // effect. Scoped to the reactions bar so grid focus treatment is
+    // untouched.
+    // https://github.com/ealush/emoji-picker-react/issues/473
+    ':focus-visible': {
+      transform: 'scale(1.2)',
+      transition:
+        'background-color 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)',
+      backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
+      borderRadius: '50%',
+      outline: 'none',
+    },
+  },
   emojiButton: {
     ':hover': {
       transform: 'scale(1.2)',

package/src/components/body/EmojiCategory.tsx

@@ -19,6 +19,7 @@ type Props = Readonly<{
   hidden?: boolean;
   hiddenOnSearch?: boolean;
   height?: number;
+  emojisPerRow?: number;
 }>;
 
 export function EmojiCategory({
@@ -27,6 +28,7 @@ export function EmojiCategory({
   hidden,
   hiddenOnSearch,
   height,
+  emojisPerRow,
 }: Props) {
   const category = categoryFromCategoryConfig(categoryConfig);
   const categoryName = categoryNameFromCategoryConfig(categoryConfig);
@@ -39,10 +41,16 @@ export function EmojiCategory({
         hiddenOnSearch && commonInteractionStyles.hiddenOnSearch,
       )}
       data-name={category}
+      role="rowgroup"
       aria-label={categoryName}
     >
       <h2 className={cx(styles.label)}>{categoryName}</h2>
-      <div className={cx(styles.categoryContent)} style={{ height }}>
+      <div
+        className={cx(styles.categoryContent)}
+        style={{ height }}
+        role="row"
+        data-emojis-per-row={emojisPerRow}
+      >
         {children}
       </div>
     </li>

package/src/components/body/EmojiList.tsx

@@ -27,10 +27,19 @@ export function EmojiList({ scrollTop }: { scrollTop: number }) {
   const labelHeight = getLabelHeight(EmojiListRef.current);
 
   let topOffset = 0;
+  // role="grid" makes screen readers switch out of virtual-cursor mode so
+  // arrow keys reach the picker's keyboard handler. Each category is one
+  // rowgroup: visual rows shift under virtualization, so the category is
+  // the only stable row unit. Emoji buttons intentionally keep their
+  // native button role for activation semantics.
+  // https://github.com/ealush/emoji-picker-react/issues/508
+  // The list markup is kept for a backwards-compatible DOM structure;
+  // the grid role override is intentional.
   return (
-    <ul className={cx(styles.emojiList)} ref={EmojiListRef}>
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+    <ul className={cx(styles.emojiList)} ref={EmojiListRef} role="grid">
       <MeasureEmoji />
-      {categories.map((categoryConfig) => {
+      {categories.map((categoryConfig, index) => {
         const category = categoryFromCategoryConfig(categoryConfig);
 
         const currentOffset = topOffset;
@@ -45,6 +54,7 @@ export function EmojiList({ scrollTop }: { scrollTop: number }) {
             categoryEmojis={getEmojisByCategory(category)}
             categoryConfig={categoryConfig}
             topOffset={currentOffset}
+            isFirstCategory={index === 0}
             onHeightReady={(height) => {
               if (categoryHeights[category] !== height) {
                 setCategoryHeights((prev) => ({
@@ -67,27 +77,39 @@ function RenderCategory({
   topOffset,
   onHeightReady,
   scrollTop,
+  isFirstCategory,
 }: {
   categoryEmojis: DataEmojis;
   categoryConfig: CategoryConfig;
   topOffset: number;
   onHeightReady: (height: number) => void;
   scrollTop: number;
+  isFirstCategory: boolean;
 }) {
   const [visibleCategories] = useVisibleCategoriesState();
 
+  // The observer is the only writer of visibleCategories. When it never
+  // fires (zero-height container at mount, hidden modal), no category
+  // would ever render. The first category paints optimistically to break
+  // the deadlock; the observer takes over from there.
+  // https://github.com/ealush/emoji-picker-react/issues/469
+  // https://github.com/ealush/emoji-picker-react/issues/475
+  const isCategoryVisible =
+    isFirstCategory || visibleCategories.includes(categoryConfig.category);
+
   const { virtualizedCounter, emojis, dimensions } = useEmojiVirtualization({
     categoryEmojis,
     topOffset,
     onHeightReady,
     scrollTop,
-    isCategoryVisible: visibleCategories.includes(categoryConfig.category),
+    isCategoryVisible,
   });
 
   return (
     <EmojiCategory
       categoryConfig={categoryConfig}
       height={dimensions?.categoryHeight}
+      emojisPerRow={dimensions?.emojisPerRow}
       // Indicates that there are no visible emojis
       // Hence, the category should be hidden
       hidden={!emojis.length && virtualizedCounter === 0}

package/src/components/emoji/Emoji.tsx

@@ -14,6 +14,7 @@ type ClickableEmojiProps = Readonly<
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
     className?: string;
+    buttonClassName?: string;
     noBackground?: boolean;
     style?: React.CSSProperties;
   }
@@ -30,6 +31,7 @@ export function ClickableEmoji({
   lazyLoad,
   getEmojiUrl,
   className,
+  buttonClassName,
   noBackground = false,
   style,
 }: ClickableEmojiProps) {
@@ -45,6 +47,7 @@ export function ClickableEmoji({
       unified={unified}
       noBackground={noBackground}
       style={style}
+      className={buttonClassName}
     >
       <ViewOnlyEmoji
         unified={unified}

package/src/components/header/SkinTonePicker/BtnSkinToneVariation.tsx

@@ -12,6 +12,7 @@ type Props = {
   isActive: boolean;
   skinToneVariation: SkinTones;
   style?: React.CSSProperties;
+  tabIndex?: number;
 };
 
 // eslint-disable-next-line complexity
@@ -21,11 +22,13 @@ export function BtnSkinToneVariation({
   isActive,
   skinToneVariation,
   style,
+  tabIndex,
 }: Props) {
   return (
     <Button
       style={style}
       onClick={onClick}
+      tabIndex={tabIndex}
       className={cx(
         `epr-tone-${skinToneVariation}`,
         styles.tone,

package/src/components/header/SkinTonePicker/SkinTonePicker.tsx

@@ -81,6 +81,12 @@ export function SkinTonePicker({
               key={skinToneVariation}
               skinToneVariation={skinToneVariation}
               isOpen={isOpen}
+              // Roving tabindex: when the fan is closed the inactive tones
+              // are invisible (opacity: 0, stacked), so they must not be
+              // reachable via Tab. The active tone stays tabbable to open
+              // the fan from the keyboard.
+              // https://github.com/ealush/emoji-picker-react/issues/492
+              tabIndex={isOpen || active ? 0 : -1}
               style={{
                 transform: cx(
                   vertical

package/src/hooks/useKeyboardNavigation.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 
 import { hasNextElementSibling } from '../DomUtils/elementPositionInRow';
 import {
+  focusElement,
   focusNextElementSibling,
   focusPrevElementSibling,
 } from '../DomUtils/focusElement';
@@ -20,10 +21,14 @@ import {
   useBodyRef,
   useCategoryNavigationRef,
   usePickerMainRef,
+  useReactionsRef,
   useSearchInputRef,
   useSkinTonePickerRef,
 } from '../components/context/ElementRefContext';
-import { useSkinToneFanOpenState } from '../components/context/PickerContext';
+import {
+  useReactionsModeState,
+  useSkinToneFanOpenState,
+} from '../components/context/PickerContext';
 import { useSearchDisabledConfig } from '../config/useConfig';
 
 import {
@@ -59,6 +64,7 @@ export function useKeyboardNavigation() {
   useSearchInputKeyboardEvents();
   useSkinTonePickerKeyboardEvents();
   useCategoryNavigationKeyboardEvents();
+  useReactionsKeyboardEvents();
   useBodyKeyboardEvents();
 }
 
@@ -319,6 +325,80 @@ function useCategoryNavigationKeyboardEvents() {
   }, [CategoryNavigationRef, BodyRef, onKeyDown]);
 }
 
+// Arrow keys move between reaction buttons (and the expand button)
+// while the reactions bar has focus. The bar lives outside the scroll
+// body, so the body handler never sees these events.
+// https://github.com/ealush/emoji-picker-react/issues/411
+function useReactionsKeyboardEvents() {
+  const ReactionsRef = useReactionsRef();
+  // The reactions bar mounts late when the user collapses the full
+  // picker, so the listener effect must rerun when it opens.
+  const [reactionsOpen] = useReactionsModeState();
+
+  const onKeyDown = useMemo(
+    () =>
+      function onKeyDown(event: KeyboardEvent) {
+        const { key } = event;
+        const current = ReactionsRef.current;
+
+        if (!current) {
+          return;
+        }
+
+        const delta = reactionFocusDelta(key);
+
+        if (delta !== 0 && focusReactionSibling(current, delta)) {
+          event.preventDefault();
+        }
+      },
+    // reactionsOpen: the bar mounts late on collapse, and the new
+    // callback identity reinstalls the listener effect below.
+    [ReactionsRef, reactionsOpen],
+  );
+
+  useEffect(() => {
+    const current = ReactionsRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [ReactionsRef, onKeyDown]);
+}
+
+function reactionFocusDelta(key: string): number {
+  switch (key) {
+    case KeyboardEvents.ArrowRight:
+    case KeyboardEvents.ArrowDown:
+      return 1;
+    case KeyboardEvents.ArrowLeft:
+    case KeyboardEvents.ArrowUp:
+      return -1;
+    default:
+      return 0;
+  }
+}
+
+function focusReactionSibling(root: HTMLElement, delta: number): boolean {
+  const buttons = Array.from(root.querySelectorAll('button'));
+  const activeIndex = buttons.indexOf(
+    getActiveElement() as HTMLButtonElement,
+  );
+  const sibling = activeIndex === -1 ? null : buttons[activeIndex + delta];
+
+  if (!sibling) {
+    return false;
+  }
+
+  focusElement(sibling);
+  return true;
+}
+
 function useBodyKeyboardEvents() {
   const BodyRef = useBodyRef();
   const goUpFromBody = useGoUpFromBody();