[ally] Add a11y controls (ymatsakova) (#368)

Author: ymatsakova

package.json

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

src/components/body/EmojiCategory.css

@@ -18,6 +18,8 @@
   display: flex;
   align-items: center;
   font-weight: bold;
+  font-size: 16px;
+  margin: 0;
   text-transform: capitalize;
   backdrop-filter: blur(3px);
   padding: var(--epr-category-label-padding);

src/components/body/EmojiCategory.tsx

@@ -33,7 +33,7 @@ export function EmojiCategory({
       data-name={category}
       aria-label={categoryName}
     >
-      <div className={ClassNames.label}>{categoryName}</div>
+      <h2 className={ClassNames.label}>{categoryName}</h2>
       <div className={ClassNames.categoryContent}>{children}</div>
     </li>
   );

src/components/header/Search.css

@@ -4,6 +4,16 @@
   min-width: 0;
 }
 
+.EmojiPickerReact .epr-search-container .epr-status-visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .EmojiPickerReact .epr-search-container input.epr-search {
   outline: none;
   transition: all 0.2s ease-in-out;

src/components/header/Search.tsx

@@ -47,7 +47,7 @@ export function Search() {
   const clearSearch = useClearSearch();
   const placeholder = useSearchPlaceHolderConfig();
   const autoFocus = useAutoFocusSearchConfig();
-  const { onChange } = useFilter();
+  const { statusSearchResults, searchTerm, onChange } = useFilter();
 
   const input = SearchInputRef?.current;
   const value = input?.value;
@@ -62,6 +62,7 @@ export function Search() {
         onFocus={closeAllOpenToggles}
         className="epr-search"
         type="text"
+        aria-controls='epr-search-id'
         placeholder={placeholder}
         onChange={event => {
           setInc(inc + 1);
@@ -71,6 +72,17 @@ export function Search() {
         }}
         ref={SearchInputRef}
       />
+      {searchTerm ? (
+        <div
+          role='status'
+          className={clsx('epr-status-search-results', 'epr-status-visually-hidden')}
+          aria-live='polite'
+          id='epr-search-id'
+          aria-atomic='true'
+        >
+          {statusSearchResults}
+        </div>
+      ) : null}
       <div className="epr-icn-search" />
       <Button
         className={clsx('epr-btn-clear-search', 'epr-visible-on-search-only')}

src/components/navigation/CategoryNavigation.tsx

@@ -27,26 +27,36 @@ export function CategoryNavigation() {
   const hideCustomCategory = useShouldHideCustomEmojis();
 
   return (
-    <div className="epr-category-nav" ref={CategoryNavigationRef}>
+      <div
+        className='epr-category-nav'
+        role='tablist'
+        aria-label='Category navigation'
+        id='epr-category-nav-id'
+        ref={CategoryNavigationRef}
+      >
       {categoriesConfig.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
+        const isActiveCategory = category === activeCategory;
 
         if (isCustomCategory(categoryConfig) && hideCustomCategory) {
           return null;
         }
 
         return (
           <Button
-            tabIndex={isSearchMode ? -1 : 0}
+            tabIndex={(isSearchMode || isActiveCategory) ? -1 : 0}
             className={clsx('epr-cat-btn', `epr-icn-${category}`, {
-              [ClassNames.active]: category === activeCategory
+              [ClassNames.active]: isActiveCategory
             })}
             key={category}
             onClick={() => {
               setActiveCategory(category);
               scrollCategoryIntoView(category);
             }}
             aria-label={categoryNameFromCategoryConfig(categoryConfig)}
+            aria-selected={isActiveCategory}
+            role='tab'
+            aria-controls='epr-category-nav-id'
           />
         );
       })}

src/config/config.ts

@@ -22,6 +22,13 @@ import { CustomEmoji } from './customEmojiConfig';
 const KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
 
 export const DEFAULT_SEARCH_PLACEHOLDER = 'Search';
+export const SEARCH_RESULTS_NO_RESULTS_FOUND = 'No results found';
+export const SEARCH_RESULTS_SUFFIX =
+  ' found. Use up and down arrow keys to navigate.';
+export const SEARCH_RESULTS_ONE_RESULT_FOUND =
+  '1 result' + SEARCH_RESULTS_SUFFIX;
+export const SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND =
+  '%n results' + SEARCH_RESULTS_SUFFIX;
 
 export function mergeConfig(
   userConfig: PickerConfig = {}

src/config/useConfig.ts

@@ -11,6 +11,9 @@ import {
 import { CategoriesConfig } from './categoryConfig';
 import {
   DEFAULT_SEARCH_PLACEHOLDER,
+  SEARCH_RESULTS_NO_RESULTS_FOUND,
+  SEARCH_RESULTS_ONE_RESULT_FOUND,
+  SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND,
   PickerDimensions,
   PreviewConfig
 } from './config';
@@ -126,3 +129,16 @@ function getDimension(dimensionConfig: PickerDimensions): PickerDimensions {
     ? `${dimensionConfig}px`
     : dimensionConfig;
 }
+
+export function useSearchResultsConfig(searchResultsCount: number): string {
+  const hasResults = searchResultsCount > 0;
+  const isPlural = searchResultsCount > 1;
+
+  if (hasResults) {
+    return isPlural ?
+      SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace('%n', searchResultsCount.toString())
+        : SEARCH_RESULTS_ONE_RESULT_FOUND;
+  }
+
+  return SEARCH_RESULTS_NO_RESULTS_FOUND;
+}

src/hooks/useFilter.ts

@@ -12,6 +12,7 @@ import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
 
 import { useFocusSearchInput } from './useFocus';
+import { useSearchResultsConfig } from '../config/useConfig';
 
 function useSetFilterRef() {
   const filterRef = useFilterRef();
@@ -63,11 +64,13 @@ export function useFilter() {
   const applySearch = useApplySearch();
 
   const [searchTerm] = useSearchTermState();
+  const statusSearchResults = getStatusSearchResults(filterRef.current, searchTerm);
 
   return {
     onChange,
     searchTerm,
     SearchInputRef,
+    statusSearchResults,
   };
 
   function onChange(inputValue: string) {
@@ -183,3 +186,10 @@ export function getNormalizedSearchTerm(str: string): string {
 
   return str.trim().toLowerCase();
 }
+
+function getStatusSearchResults(filterState: FilterState, searchTerm: string): string {
+  if (!filterState?.[searchTerm]) return '';
+
+  const searchResultsCount = Object.entries(filterState?.[searchTerm])?.length || 0;
+  return useSearchResultsConfig(searchResultsCount);
+}