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

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);
+}