Feedback

yext · Oct 28, 2021 · 5a311f5 · 5a311f5
1 parent 972372f
commit 5a311f5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 34 deletions.
diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -20,9 +20,7 @@ interface Props {
     option: string,
     focusedOption: string,
     inputElement: string,
-    inputContainer: string,
-    screenReaderInstructions?: string,
-    screenReaderCount?: string
+    inputContainer: string
   }
 }
 
@@ -159,15 +157,14 @@ export default function InputDropdown({
           instructions={screenReaderInstructions}
           shouldCount={shouldAutocompleteCount}
           countKey={countKey}
-          optionsLength={options.length}
-          generateCountText={(numOptions: number) => {
-            return processTranslation({
-              phrase: `${numOptions} autocomplete option found.`,
-              pluralForm: `${numOptions} autocomplete options found.`,
-              count: numOptions
-            });
-          }}
-          cssClasses={cssClasses}
+          countText={countKey ? 
+            processTranslation({
+              phrase: `${options.length} autocomplete option found.`,
+              pluralForm: `${options.length} autocomplete options found.`,
+              count: options.length
+            })
+            : ''
+          }
         />
       }
       {shouldDisplayDropdown &&

diff --git a/sample-app/src/components/ScreenReader.tsx b/sample-app/src/components/ScreenReader.tsx
@@ -5,39 +5,30 @@ interface Props {
   instructions?: string,
   shouldCount: boolean,
   countKey?: number,
-  optionsLength?: number,
-  generateCountText?: (numOptions: number) => string,
-  cssClasses: {
-    screenReaderInstructions?: string,
-    screenReaderCount?: string
-  }
+  countText?: string
 }
 
 export default function ScreenReader({
   instructionsId,
   instructions,
   shouldCount,
   countKey,
-  optionsLength = 0,
-  generateCountText = () => '',
-  cssClasses
+  countText,
 } : Props): JSX.Element | null {
 
-  const countText = countKey ? generateCountText(optionsLength) : '';
-
   return (
     <>
       {instructionsId &&
         <div
           id={instructionsId}
-          className={cssClasses.screenReaderInstructions}
+          className='ScreenReader__instructions'
         >
           {instructions}
         </div>
       }
       {shouldCount &&
         <div
-          className={cssClasses.screenReaderCount}
+          className='ScreenReader__count'
           key={countKey}
           aria-live='assertive'
         >

diff --git a/sample-app/src/components/SearchBar.tsx b/sample-app/src/components/SearchBar.tsx
@@ -7,16 +7,18 @@ import '../sass/SearchBar.scss';
 import '../sass/Autocomplete.scss';
 import LoadingIndicator from './LoadingIndicator';
 
+const SCREENREADER_INSTRUCTIONS = 'When autocomplete results are available, use up and down arrows to review and enter to select.'
+
 interface Props {
   placeholder?: string,
   isVertical: boolean,
-  instructions?: string
+  screenReaderInstructionsId: string
 }
 
 /**
  * Renders a SearchBar that is hooked up with an Autocomplete component
  */
-export default function SearchBar({ placeholder, isVertical, instructions }: Props) {
+export default function SearchBar({ placeholder, isVertical, screenReaderInstructionsId }: Props) {
   const answersActions = useAnswersActions();
   const query = useAnswersState(state => state.query.query);
   const mapStateToAutocompleteResults: StateSelector<AutocompleteResult[] | undefined> = isVertical
@@ -25,9 +27,6 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro
   const autocompleteResults = useAnswersState(mapStateToAutocompleteResults) || [];
   const isLoading = useAnswersState(state => state.vertical.searchLoading || state.universal.searchLoading);
 
-  const screenReaderInstructions = instructions
-    ?? 'When autocomplete results are available, use up and down arrows to review and enter to select.'
-
   function executeAutocomplete () {
     isVertical 
       ? answersActions.executeVerticalAutoComplete()
@@ -58,8 +57,8 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro
       <InputDropdown
         inputValue={query}
         placeholder={placeholder}
-        screenReaderInstructions={screenReaderInstructions}
-        screenReaderInstructionsId='SearchBar__srInstructions'
+        screenReaderInstructions={SCREENREADER_INSTRUCTIONS}
+        screenReaderInstructionsId={screenReaderInstructionsId}
         shouldAutocompleteCount={true}
         options={autocompleteResults.map(result => {
           return {
@@ -82,8 +81,6 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro
           focusedOption: 'Autocomplete__option--focused',
           inputElement: 'SearchBar__input',
           inputContainer: 'SearchBar__inputContainer',
-          screenReaderInstructions: 'ScreenReader__instructions',
-          screenReaderCount: 'ScreenReader__count'
         }}
       />
     </div>

diff --git a/sample-app/src/pages/StandardLayout.tsx b/sample-app/src/pages/StandardLayout.tsx
@@ -25,6 +25,7 @@ const StandardLayout: LayoutComponent = ({ page }) => {
       <SearchBar
         placeholder='Search...'
         isVertical={isVertical}
+        screenReaderInstructionsId='SearchBar__srInstructions'
       />
       <Navigation links={navLinks} />
       {page}