Move text generation to InputDropdown

yext · Oct 28, 2021 · 0f5cecd · 0f5cecd
1 parent 0c39c04
commit 0f5cecd
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -1,13 +1,14 @@
 import { useReducer, KeyboardEvent, useRef, useEffect, useState } from "react"
 import Dropdown, { Option } from './Dropdown';
 import ScreenReader from "./ScreenReader";
+import { processTranslation } from './utils/processTranslation';
 
 interface Props {
   inputValue?: string,
   placeholder?: string,
   screenReaderInstructions?: string,
   screenReaderInstructionsId?: string,
-  hasAutocompleteCount: boolean,
+  shouldAutocompleteCount: boolean,
   options: Option[],
   optionIdPrefix: string,
   onSubmit?: (value: string) => void,
@@ -54,7 +55,7 @@ export default function InputDropdown({
   placeholder,
   screenReaderInstructions,
   screenReaderInstructionsId,
-  hasAutocompleteCount,
+  shouldAutocompleteCount,
   options,
   optionIdPrefix,
   onSubmit = () => {},
@@ -148,15 +149,22 @@ export default function InputDropdown({
         />
         {renderButtons()}
       </div>
-      {(screenReaderInstructionsId || hasAutocompleteCount) &&
+      {(screenReaderInstructionsId || shouldAutocompleteCount) &&
         <ScreenReader
           instructionsId={screenReaderInstructionsId}
           instructions={screenReaderInstructions}
-          hasCount={hasAutocompleteCount}
+          shouldCount={shouldAutocompleteCount}
           hasInput={!!inputRef.current.value}
           optionsLength={options.length}
           shouldDisplayOptions={shouldDisplayDropdown}
           countKey={countKey}
+          generateCountText={(numOptions: number) => {
+            return processTranslation({
+              phrase: `${numOptions} autocomplete option found.`,
+              pluralForm: `${numOptions} autocomplete options found.`,
+              count: numOptions
+            });
+          }}
           cssClasses={cssClasses}
         />
       }

diff --git a/sample-app/src/components/ScreenReader.tsx b/sample-app/src/components/ScreenReader.tsx
@@ -1,15 +1,15 @@
 import { useRef } from "react";
-import { processTranslation } from './utils/processTranslation';
 import '../sass/ScreenReader.scss';
 
 interface Props {
   instructionsId?: string,
   instructions?: string,
-  hasCount: boolean,
+  shouldCount: boolean,
+  shouldDisplayOptions?: boolean,
   hasInput?: boolean,
   optionsLength?: number,
-  shouldDisplayOptions?: boolean,
   countKey?: number,
+  generateCountText?: (numOptions: number) => string,
   cssClasses: {
     screenReaderInstructions?: string,
     screenReaderCount?: string
@@ -19,11 +19,12 @@ interface Props {
 export default function ScreenReader({
   instructionsId,
   instructions,
-  hasCount,
-  hasInput,
-  optionsLength,
+  shouldCount,
   shouldDisplayOptions,
+  hasInput,
+  optionsLength = 0,
   countKey,
+  generateCountText = () => '',
   cssClasses
 } : Props): JSX.Element | null {
 
@@ -35,7 +36,7 @@ export default function ScreenReader({
   }
 
   function removeAutocompleteCountText() {
-    if (hasCount && countRef.current.innerText !== '') {
+    if (shouldCount && countRef.current.innerText !== '') {
       countRef.current.innerText = '';
     }
   }
@@ -50,18 +51,14 @@ export default function ScreenReader({
           {instructions}
         </div>
       }
-      {hasCount &&
+      {shouldCount &&
         <div
           className={cssClasses.screenReaderCount}
           key={countKey}
           aria-live='assertive'
           ref={countRef}
         >
-          {processTranslation({
-            phrase: `${optionsLength} autocomplete option found.`,
-            pluralForm: `${optionsLength} autocomplete options found.`,
-            count: optionsLength
-          })}
+          {generateCountText(optionsLength)}
         </div>
       }
     </>

diff --git a/sample-app/src/components/SearchBar.tsx b/sample-app/src/components/SearchBar.tsx
@@ -60,7 +60,7 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro
         placeholder={placeholder}
         screenReaderInstructions={screenReaderInstructions}
         screenReaderInstructionsId='SearchBar__srInstructions'
-        hasAutocompleteCount={true}
+        shouldAutocompleteCount={true}
         options={autocompleteResults.map(result => {
           return {
             value: result.value,