@atlaskit/emoji 67.0.7 → 67.2.0

package/dist/es2019/components/common/ResourcedEmojiComponent.js

@@ -101,6 +101,10 @@ export const ResourcedEmojiComponent = props => {
     }
     fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
   }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+
+  /**
+   * Setting resolved emoji provider for optimistic rendering
+   */
   useEffect(() => {
     Promise.resolve(emojiProvider).then(emojiProvider => {
       setResolvedEmojiProvider(emojiProvider);

package/dist/es2019/components/common/RetryableButton.js

@@ -21,20 +21,24 @@ const RetryButton = props => {
     css: uploadRetryButton,
     appearance: "warning",
     onClick: onSubmit,
-    testId: retryUploadButtonTestId
+    testId: retryUploadButtonTestId,
+    autoFocus: true
   }, retryLabel));
 };
 const UploadButton = props => {
   const {
     appearance,
     onSubmit,
-    label
+    label,
+    ariaDescribedby
   } = props;
   return jsx(AkButton, {
     css: uploadEmojiButton,
     appearance: appearance,
     onClick: onSubmit,
-    testId: uploadEmojiButtonTestId
+    testId: uploadEmojiButtonTestId,
+    "aria-describedby": ariaDescribedby,
+    autoFocus: true
   }, label);
 };
 const RetryableButton = props => {

package/dist/es2019/components/common/TonePreviewButton.js

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { jsx } from '@emotion/react';
+import { emojiButton, hidden } from './styles';
+import Emoji from './Emoji';
+export const tonePreviewTestId = 'tone-preview';
+export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    emoji,
+    selectOnHover,
+    ariaLabelText,
+    ariaExpanded,
+    onSelected,
+    isVisible = true
+  } = props;
+  return jsx("button", {
+    ref: ref,
+    css: [emojiButton, !isVisible && hidden],
+    onClick: onSelected,
+    "aria-label": ariaLabelText,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": "emoji-picker-tone-selector",
+    style: {
+      overflow: 'hidden'
+    },
+    "data-testid": tonePreviewTestId
+  }, jsx(Emoji, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
+});
+export default /*#__PURE__*/memo(TonePreviewButton);

package/dist/es2019/components/common/ToneSelector.js

@@ -1,8 +1,14 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import EmojiButton from './EmojiButton';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../util/analytics';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+import EmojiRadioButton from './EmojiRadioButton';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../i18n';
+import { hidden } from './styles';
+export const toneSelectorTestId = 'tone-selector';
 const extractAllTones = emoji => {
   if (emoji.skinVariations) {
     return [emoji, ...emoji.skinVariations];
@@ -13,30 +19,52 @@ export const ToneSelectorInternal = props => {
   const {
     createAnalyticsEvent,
     emoji,
-    previewEmojiId,
-    onToneSelected
+    onToneSelected,
+    onToneClose,
+    selectedTone,
+    isVisible
   } = props;
   const isMounted = useRef(false);
-  const firstToneButtonRef = useRef(null);
+  const selectedToneRadioRef = useRef(null);
+  const {
+    formatMessage
+  } = useIntl();
   const emojiToneCollection = useMemo(() => {
-    return extractAllTones(emoji).map((tone, index) => ({
-      ...tone,
-      focused: tone.id !== previewEmojiId,
-      label: setSkinToneAriaLabelText(tone.name),
-      toneId: index
-    }));
-  }, [emoji, previewEmojiId]);
+    var selectedToneIndex = -1;
+    const toneColletion = extractAllTones(emoji).map((tone, index) => {
+      const isSelected = index === selectedTone;
+      if (isSelected) {
+        selectedToneIndex = index;
+      }
+      return {
+        ...tone,
+        isSelected: isSelected,
+        label: setSkinToneAriaLabelText(tone.name),
+        toneIndex: index
+      };
+    });
+
+    // push description of selected tone to the end of the array
+    // so that it gets rendered last/rightmost
+    toneColletion.push(toneColletion.splice(selectedToneIndex, 1)[0]);
+    return toneColletion;
+  }, [emoji, selectedTone]);
   useEffect(() => {
-    if (firstToneButtonRef.current) {
-      firstToneButtonRef.current.focus();
+    if (isVisible) {
+      var _selectedToneRadioRef;
+      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 ? void 0 : _selectedToneRadioRef.focus();
     }
-  }, [firstToneButtonRef]);
+  }, [isVisible, selectedToneRadioRef]);
   const fireAnalyticsEvent = event => {
     if (createAnalyticsEvent) {
       createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
     }
   };
   const onToneSelectedHandler = toneValue => () => {
+    if (selectedTone === toneValue && onToneClose) {
+      onToneClose();
+      return;
+    }
     onToneSelected(toneValue);
     const toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
     fireAnalyticsEvent(toneSelectedEvent({
@@ -47,17 +75,23 @@ export const ToneSelectorInternal = props => {
     fireAnalyticsEvent(toneSelectorOpenedEvent({}));
   }
   isMounted.current = true;
-  return /*#__PURE__*/React.createElement("div", null, emojiToneCollection.map(tone => {
-    return /*#__PURE__*/React.createElement(EmojiButton, {
-      ref: tone.focused ? firstToneButtonRef : null,
-      shouldHideButton: tone.id === previewEmojiId,
+  return jsx("div", {
+    role: "radiogroup",
+    "data-testid": toneSelectorTestId,
+    id: "emoji-picker-tone-selector",
+    "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
+    css: !isVisible && hidden
+  }, emojiToneCollection.map(tone => {
+    return jsx(EmojiRadioButton, {
+      ref: tone.isSelected ? selectedToneRadioRef : null,
+      defaultChecked: tone.isSelected,
       ariaLabelText: tone.label,
       key: `${tone.id}`,
-      onSelected: onToneSelectedHandler(tone.toneId),
       emoji: tone,
+      onSelected: onToneSelectedHandler(tone.toneIndex),
       selectOnHover: true
     });
   }));
 };
 const ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
-export default ToneSelector;
+export default /*#__PURE__*/memo(ToneSelector);

package/dist/es2019/components/common/styles.js

@@ -1,8 +1,7 @@
 import { css, keyframes } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
-import { N20, N200, N20A, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
+import { B100, N20, N200, N20A, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
 export const commonSelectedStyles = 'emoji-common-selected';
 export const selectOnHoverStyles = 'emoji-common-select-on-hover';
 export const emojiSprite = 'emoji-common-emoji-sprite';
@@ -30,7 +29,7 @@ export const emojiToneSelectorContainer = css({
   padding: '10px 10px 11px 0'
 });
 export const emojiStyles = css({
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-radius-100, 3px)",
   backgroundColor: 'transparent',
   display: 'inline-block',
   verticalAlign: 'middle',
@@ -47,6 +46,11 @@ export const emojiStyles = css({
   },
   img: {
     display: 'block'
+  },
+  '&:focus': {
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
+    transitionDuration: '0s, 0.2s',
+    outline: 'none'
   }
 });
 export const emojiContainer = css({
@@ -62,6 +66,11 @@ export const emojiContainer = css({
     minHeight: `${defaultEmojiHeight}px`,
     minWidth: `${defaultEmojiHeight}px`,
     verticalAlign: 'middle'
+  },
+  '&:focus': {
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
+    transitionDuration: '0s, 0.2s',
+    outline: 'none'
   }
 });
 export const placeholder = 'emoji-common-placeholder';
@@ -70,7 +79,7 @@ export const placeholderContainer = css({
   margin: '-1px 0',
   display: 'inline-block',
   background: "var(--ds-border, #f7f7f7)",
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-radius-100, 3px)",
   overflow: 'hidden',
   verticalAlign: 'middle',
   whiteSpace: 'nowrap',
@@ -95,18 +104,25 @@ export const placeholderContainerAnimated = css({
     animation: `${easeSweep} 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite`
   }
 });
+export const hidden = css({
+  opacity: 0,
+  visibility: 'hidden',
+  display: 'none'
+});
 export const emojiButton = css({
   backgroundColor: 'transparent',
   border: '0',
+  borderRadius: "var(--ds-radius-100, 3px)",
   cursor: 'pointer',
   padding: 0,
+  position: 'relative',
+  display: 'inline-block',
   /* Firefox */
   ['&::-moz-focus-inner']: {
     border: '0 none',
     padding: 0
   },
   '&>span': {
-    borderRadius: `${borderRadius()}px`,
     padding: '6px',
     // Scale sprite to fit regardless of default emoji size
     [`&>.${emojiSprite}`]: {
@@ -118,11 +134,26 @@ export const emojiButton = css({
       height: '24px',
       width: '24px'
     }
+  },
+  '&:focus': {
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
+    transitionDuration: '0s, 0.2s',
+    outline: 'none'
   }
 });
-export const hiddenToneButton = css({
-  // Hide currently selected tone that rendered in the ToneSelector to avoid duplication
-  display: 'none'
+export const emojiRadio = css({
+  opacity: 0,
+  position: 'absolute',
+  top: '-10px',
+  left: '-10px',
+  '+span': {
+    borderRadius: "var(--ds-radius-100, 3px)"
+  },
+  '&:focus + span': {
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
+    transitionDuration: '0s, 0.2s',
+    outline: 'none'
+  }
 });
 
 // Emoji Preview
@@ -197,7 +228,7 @@ export const previewImg = css({
 
 export const emojiScrollable = css({
   border: `1px solid ${"var(--ds-border, #fff)"}`,
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-radius-100, 3px)",
   display: 'block',
   margin: '0',
   overflowX: 'hidden',
@@ -264,7 +295,7 @@ export const uploadPreview = css({
   justifyContent: 'space-between',
   alignItems: 'center',
   background: `var(--ds-background-neutral, ${N20})`,
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-radius-100, 3px)",
   padding: '10px'
 });
 export const uploadPreviewText = css({

package/dist/es2019/components/i18n.js

@@ -22,8 +22,8 @@ export const messages = defineMessages({
   },
   emojiPlaceholder: {
     id: 'fabric.emoji.placeholder',
-    defaultMessage: 'Emoji name',
-    description: 'Placeholder for emoji'
+    defaultMessage: 'e.g. hello',
+    description: 'Placeholder for emoji that provides an example for emoji name'
   },
   emojiNameAriaLabel: {
     id: 'fabric.emoji.name.ariaLabel',
@@ -42,9 +42,14 @@ export const messages = defineMessages({
   },
   emojiSelectSkinToneButtonAriaLabelText: {
     id: 'fabric.emoji.select.skin.tone.ariaLabel',
-    defaultMessage: 'Select skin tone, {selectedTone}',
+    defaultMessage: 'Choose your skin tone, {selectedTone} selected',
     description: 'Message indicating the purpose of the skin tone selection button and the selected tone'
   },
+  emojiSelectSkinToneListAriaLabelText: {
+    id: 'fabric.emoji.select.skin.list.ariaLabel',
+    defaultMessage: 'Skin tone selector',
+    description: 'Message indicating the purpose of the skin tone list and make user to choose one tone'
+  },
   emojiImageRequirements: {
     id: 'fabric.emoji.image.requirements',
     defaultMessage: 'JPG, PNG or GIF. Max size 1 MB.',
@@ -82,9 +87,24 @@ export const messages = defineMessages({
   },
   searchLabel: {
     id: 'fabric.emoji.search.label',
-    defaultMessage: 'Search emoji',
+    defaultMessage: 'Emoji name',
     description: 'verb - button label to search'
   },
+  searchResultsStatus: {
+    id: 'fabric.emoji.search.status',
+    defaultMessage: 'Found {count} emojis',
+    description: 'search results status for screenreader to read out'
+  },
+  searchResultsStatusSeeAll: {
+    id: 'fabric.emoji.search.status',
+    defaultMessage: 'Seeing all emojis',
+    description: 'search results status when no search query for screenreader to read out'
+  },
+  categoriesSelectorLabel: {
+    id: 'fabric.emoji.categories.label',
+    defaultMessage: 'Choose a emoji category',
+    description: 'Aria label for Emoji categories selector at the top of emoji picker'
+  },
   categoriesSearchResults: {
     id: 'fabric.emoji.categories.search.results',
     defaultMessage: 'Search results',
@@ -169,5 +189,25 @@ export const messages = defineMessages({
     id: 'fabric.emoji.error.image.too.big',
     defaultMessage: 'Selected image is more than 1 MB',
     description: 'Error message for image too big, beyond the size limit'
+  },
+  emojiPickerTitle: {
+    id: 'fabric.emoji.picker',
+    defaultMessage: 'Emoji picker',
+    description: 'Aria label for emoji picker'
+  },
+  emojiPickerListPanel: {
+    id: 'fabric.emoji.pickerlist.tabpanel',
+    defaultMessage: 'Emojis actions and list panel',
+    description: 'Aria lable for tabpanel of emoji picker, which shows emojis actions and list'
+  },
+  emojiPickerGrid: {
+    id: 'fabric.emoji.pickerlist.grid',
+    defaultMessage: '{showSearchResults, select, true{Search results} other{Emojis}}',
+    description: `Aria label for emoji picker grid, showSearchResults is a boolean variable, message will be "Entering Emojis table", or "Leaving Emojis"`
+  },
+  emojiButtonRoleDescription: {
+    id: 'fabric.emoji.emojipicker.emoi.roledescription',
+    defaultMessage: 'emoji button',
+    description: `Aria roledescription for emoji button, used in emoji picker.`
   }
 });

package/dist/es2019/components/picker/CategorySelector.js

@@ -1,13 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
-import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl-next';
-import { defaultCategories } from '../../util/constants';
+import { useIntl } from 'react-intl-next';
+import Tooltip from '@atlaskit/tooltip';
+import { CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED, defaultCategories, KeyboardKeys } from '../../util/constants';
 import { messages } from '../i18n';
 import { CategoryDescriptionMap } from './categories';
-import { active, categorySelector, disable, categoryStyles } from './styles';
+import { active, categorySelector, disable, categoryStyles, categorySelectorTablist } from './styles';
+import { usePrevious } from '../../hooks/usePrevious';
+import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
 export const sortCategories = (c1, c2) => CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
 const addNewCategories = (oldCategories, newCategories) => {
   if (!newCategories) {
@@ -17,90 +18,114 @@ const addNewCategories = (oldCategories, newCategories) => {
 };
 export const categorySelectorComponentTestId = 'category-selector-component';
 export const categorySelectorCategoryTestId = categoryId => `category-selector-${categoryId}`;
-class CategorySelector extends PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "onClick", event => {
-      const {
-        onCategorySelected,
-        disableCategories
-      } = this.props;
-      if (disableCategories) {
-        event.preventDefault();
-        return;
-      }
-      const categoryId = event.currentTarget.getAttribute('data-category-id');
-      if (onCategorySelected) {
-        onCategorySelected(categoryId);
-      }
-    });
-    const {
-      dynamicCategories
-    } = props;
-    let categories = defaultCategories;
-    if (dynamicCategories) {
-      categories = addNewCategories(categories, dynamicCategories);
+const CategorySelector = props => {
+  const {
+    disableCategories,
+    dynamicCategories,
+    activeCategoryId,
+    onCategorySelected
+  } = props;
+  const [categories, setCategories] = useState(addNewCategories(defaultCategories, dynamicCategories));
+  const [currentFocus, setCurrentFocus] = useState(0);
+  const categoryRef = useRef(null);
+  const prevDynamicCategories = usePrevious(dynamicCategories);
+  const {
+    formatMessage
+  } = useIntl();
+  const updateCategories = useCallback(() => {
+    const newCategories = addNewCategories(defaultCategories, dynamicCategories);
+    setCategories(newCategories);
+  }, [dynamicCategories]);
+  useEffect(() => {
+    if (prevDynamicCategories !== dynamicCategories) {
+      updateCategories();
     }
-    this.state = {
-      categories
-    };
-  }
-  UNSAFE_componentWillUpdate(nextProps) {
-    if (this.props.dynamicCategories !== nextProps.dynamicCategories) {
-      this.setState({
-        categories: addNewCategories(defaultCategories, nextProps.dynamicCategories)
-      });
+  }, [prevDynamicCategories, dynamicCategories, updateCategories]);
+  const focusCategory = useCallback(index => {
+    var _categoryRef$current;
+    const categoryToFocus = (_categoryRef$current = categoryRef.current) === null || _categoryRef$current === void 0 ? void 0 : _categoryRef$current.querySelector(`[data-focus-index="${index}"]`);
+    categoryToFocus && categoryToFocus.focus();
+    setCurrentFocus(index);
+  }, [categoryRef, setCurrentFocus]);
+  const handleKeyDown = e => {
+    if (!CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
+      return;
     }
-  }
-  render() {
-    const {
-      disableCategories,
-      intl
-    } = this.props;
-    const {
-      categories
-    } = this.state;
-    let categoriesSection;
-    if (categories) {
-      const {
-        formatMessage
-      } = intl;
-      categoriesSection = jsx("ul", {
-        "data-testid": categorySelectorComponentTestId
-      }, categories.map(categoryId => {
-        const category = CategoryDescriptionMap[categoryId];
-        const categoryClasses = [categoryStyles];
-        if (categoryId === this.props.activeCategoryId) {
-          categoryClasses.push(active);
-        }
-        if (disableCategories) {
-          categoryClasses.push(disable);
-        }
-        const Icon = category.icon;
-        const categoryName = formatMessage(messages[category.name]);
-        return jsx("li", {
-          key: category.id
-        }, jsx("button", {
-          "aria-label": categoryName,
-          "data-category-id": category.id,
-          disabled: disableCategories,
-          css: categoryClasses,
-          onClick: this.onClick,
-          title: categoryName,
-          type: "button",
-          "data-testid": categorySelectorCategoryTestId(categoryId)
-        }, jsx(Icon, {
-          label: categoryName
-        })));
-      }));
+    e.preventDefault();
+    const lastCategoryIndex = categories.length - 1;
+    switch (e.key) {
+      // navigate to the right category
+      case KeyboardKeys.ArrowRight:
+        focusCategory(currentFocus === lastCategoryIndex ? 0 : currentFocus + 1);
+        break;
+      // navigate to the left category
+      case KeyboardKeys.ArrowLeft:
+        focusCategory(currentFocus === 0 ? lastCategoryIndex : currentFocus - 1);
+        break;
+      // navigate to the first category
+      case KeyboardKeys.Home:
+        focusCategory(0);
+        break;
+      // navigate to the last category
+      case KeyboardKeys.End:
+        focusCategory(lastCategoryIndex);
+        break;
+    }
+  };
+  const handleClick = (categoryId, index) => event => {
+    if (disableCategories) {
+      event.preventDefault();
+      return;
     }
-    return jsx("div", {
-      css: categorySelector
-    }, categoriesSection);
+    if (onCategorySelected) {
+      onCategorySelected(categoryId);
+    }
+    setCurrentFocus(index);
+  };
+  let categoriesSection;
+  if (categories) {
+    categoriesSection = jsx("div", {
+      role: "tablist",
+      "aria-label": formatMessage(messages.categoriesSelectorLabel),
+      "data-testid": categorySelectorComponentTestId,
+      ref: categoryRef,
+      css: categorySelectorTablist
+    }, categories.map((categoryId, index) => {
+      const category = CategoryDescriptionMap[categoryId];
+      const categoryClasses = [categoryStyles];
+      if (categoryId === activeCategoryId) {
+        categoryClasses.push(active);
+      }
+      if (disableCategories) {
+        categoryClasses.push(disable);
+      }
+      const Icon = category.icon;
+      const categoryName = formatMessage(messages[category.name]);
+      return jsx(Tooltip, {
+        content: categoryName,
+        position: "bottom",
+        key: category.id
+      }, jsx("button", {
+        type: "button",
+        id: `category-selector-${category.id}`,
+        "data-focus-index": index,
+        "aria-label": categoryName,
+        "aria-controls": currentFocus === index ? RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
+        "aria-selected": currentFocus === index ? true : false,
+        css: categoryClasses,
+        disabled: disableCategories,
+        onClick: handleClick(categoryId, index),
+        "data-testid": categorySelectorCategoryTestId(categoryId),
+        tabIndex: currentFocus === index ? 0 : -1,
+        onKeyDown: handleKeyDown,
+        role: "tab"
+      }, jsx(Icon, {
+        label: categoryName
+      })));
+    }));
   }
-}
-_defineProperty(CategorySelector, "defaultProps", {
-  onCategorySelected: () => {},
-  dynamicCategories: []
-});
-export default injectIntl(CategorySelector);
+  return jsx("div", {
+    css: categorySelector
+  }, categoriesSection);
+};
+export default CategorySelector;

package/dist/es2019/components/picker/CategoryTracker.js

@@ -21,28 +21,4 @@ export default class CategoryTracker {
   getRow(category) {
     return this.categoryToRow.get(category);
   }
-  findNearestCategoryAbove(startIndex, list) {
-    const rows = Array.from(this.rowToCategory.keys()).sort((a, b) => a - b);
-    if (rows.length === 0) {
-      return;
-    }
-
-    // Return first category if list not yet rendered
-    // or the top row is above the first category
-    if (!list || rows[0] > startIndex) {
-      return this.rowToCategory.get(rows[0]);
-    }
-    let bounds = [0, rows.length - 1];
-    let index = Math.floor(rows.length / 2);
-    while (rows[index] !== startIndex && bounds[0] < bounds[1]) {
-      if (rows[index] > startIndex) {
-        bounds[1] = Math.max(index - 1, 0);
-      } else {
-        bounds[0] = index + 1;
-      }
-      index = Math.floor((bounds[0] + bounds[1]) / 2);
-    }
-    const headerRow = rows[rows[index] > startIndex ? Math.max(index - 1, 0) : index];
-    return this.rowToCategory.get(headerRow);
-  }
 }

package/dist/es2019/components/picker/EmojiPickerCategoryHeading.js

@@ -5,7 +5,6 @@ import { FormattedMessage } from 'react-intl-next';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
 import { emojiCategoryTitle } from './styles';
-
 /**
  * Test id for wrapper Emoji Picker List div
  */
@@ -18,7 +17,8 @@ const EmojiPickerCategoryHeading = ({
   id: id,
   "data-category-id": id,
   className: className,
-  "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID
+  "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
+  role: "rowheader"
 }, jsx("div", {
   css: emojiCategoryTitle
 }, isMessagesKey(title) ? jsx(FormattedMessage, messages[title]) : title));