Remove screen reader conditions

yext · Oct 29, 2021 · 20a0ae9 · 20a0ae9
1 parent 7ecf337
commit 20a0ae9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 49 deletions.
diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -6,9 +6,8 @@ import { processTranslation } from './utils/processTranslation';
 interface Props {
   inputValue?: string,
   placeholder?: string,
-  screenReaderInstructions?: string,
-  screenReaderInstructionsId?: string,
-  shouldAutocompleteCount: boolean,
+  screenReaderInstructions: string,
+  screenReaderInstructionsId: string,
   options: Option[],
   optionIdPrefix: string,
   onSubmit?: (value: string) => void,
@@ -53,7 +52,6 @@ export default function InputDropdown({
   placeholder,
   screenReaderInstructions,
   screenReaderInstructionsId,
-  shouldAutocompleteCount,
   options,
   optionIdPrefix,
   onSubmit = () => {},
@@ -74,12 +72,12 @@ export default function InputDropdown({
     : `${optionIdPrefix}-${focusedOptionIndex}`;
 
   const [latestUserInput, setLatestUserInput] = useState(inputValue);
-  const [countKey, setCountKey] = useState(0);
+  const [screenReaderKey, setScreenReaderKey] = useState(0);
 
   const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
 
-  if (!shouldDisplayDropdown && countKey) {
-    setCountKey(0);
+  if (!shouldDisplayDropdown && screenReaderKey) {
+    setScreenReaderKey(0);
   }
 
   function handleDocumentClick(evt: MouseEvent) {
@@ -134,13 +132,13 @@ export default function InputDropdown({
             setLatestUserInput(value);
             updateInputValue(value);
             updateDropdown();
-            setCountKey(countKey + 1);
+            setScreenReaderKey(screenReaderKey + 1);
           }}
           onClick={() => {
             dispatch({ type: 'ShowOptions' });
             updateDropdown();
             if (options.length || inputValue) {
-              setCountKey(countKey + 1);
+              setScreenReaderKey(screenReaderKey + 1);
             }
           }}
           onKeyDown={onKeyDown}
@@ -151,22 +149,19 @@ export default function InputDropdown({
         />
         {renderButtons()}
       </div>
-      {(screenReaderInstructionsId || shouldAutocompleteCount) &&
-        <ScreenReader
-          instructionsId={screenReaderInstructionsId}
-          instructions={screenReaderInstructions}
-          shouldCount={shouldAutocompleteCount}
-          announcementKey={countKey}
-          announcementText={countKey ?
-            processTranslation({
-              phrase: `${options.length} autocomplete option found.`,
-              pluralForm: `${options.length} autocomplete options found.`,
-              count: options.length
-            })
-            : ''
-          }
-        />
-      }
+      <ScreenReader
+        instructionsId={screenReaderInstructionsId}
+        instructions={screenReaderInstructions}
+        announcementKey={screenReaderKey}
+        announcementText={screenReaderKey ?
+          processTranslation({
+            phrase: `${options.length} autocomplete option found.`,
+            pluralForm: `${options.length} autocomplete options found.`,
+            count: options.length
+          })
+          : ''
+        }
+      />
       {shouldDisplayDropdown &&
         <Dropdown
           options={options}

diff --git a/sample-app/src/components/ScreenReader.tsx b/sample-app/src/components/ScreenReader.tsx
@@ -1,40 +1,34 @@
 import '../sass/ScreenReader.scss';
 
 interface Props {
-  instructionsId?: string,
-  instructions?: string,
-  shouldCount: boolean,
-  announcementKey?: number,
-  announcementText?: string
+  instructionsId: string,
+  instructions: string,
+  announcementKey: number,
+  announcementText: string
 }
 
 export default function ScreenReader({
   instructionsId,
   instructions,
-  shouldCount,
   announcementKey,
   announcementText,
 }: Props): JSX.Element | null {
 
   return (
     <>
-      {instructionsId &&
-        <div
-          id={instructionsId}
-          className='ScreenReader__instructions'
-        >
-          {instructions}
-        </div>
-      }
-      {shouldCount &&
-        <div
-          className='ScreenReader__announcementText'
-          key={announcementKey}
-          aria-live='assertive'
-        >
-          {announcementText}
-        </div>
-      }
+      <div
+        id={instructionsId}
+        className='ScreenReader__instructions'
+      >
+        {instructions}
+      </div>
+      <div
+        className='ScreenReader__announcementText'
+        key={announcementKey}
+        aria-live='assertive'
+      >
+        {announcementText}
+      </div>
     </>
   );
 };
diff --git a/sample-app/src/components/SearchBar.tsx b/sample-app/src/components/SearchBar.tsx
@@ -59,7 +59,6 @@ export default function SearchBar({ placeholder, isVertical, screenReaderInstruc
         placeholder={placeholder}
         screenReaderInstructions={SCREENREADER_INSTRUCTIONS}
         screenReaderInstructionsId={screenReaderInstructionsId}
-        shouldAutocompleteCount={true}
         options={autocompleteResults.map(result => {
           return {
             value: result.value,