Feedback

yext · Oct 28, 2021 · 4ef441e · 4ef441e
1 parent d76d33c
commit 4ef441e
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 66 deletions.
diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -1,6 +1,6 @@
 import { useReducer, KeyboardEvent, useRef, useEffect, useState } from "react"
 import Dropdown, { Option } from './Dropdown';
-import { processTranslation } from './utils/processTranslation';
+import ScreenReader from "./ScreenReader";
 
 interface Props {
   inputValue?: string,
@@ -21,7 +21,7 @@ interface Props {
     inputElement: string,
     inputContainer: string,
     screenReaderInstructions?: string,
-    autocompleteCount?: string
+    screenReaderCount?: string
   }
 }
 
@@ -52,7 +52,7 @@ function reducer(state: State, action: Action): State {
 export default function InputDropdown({
   inputValue = '',
   placeholder,
-  screenReaderInstructions = '',
+  screenReaderInstructions,
   screenReaderInstructionsId,
   hasAutocompleteCount,
   options,
@@ -75,19 +75,9 @@ export default function InputDropdown({
     : `${optionIdPrefix}-${focusedOptionIndex}`;
 
   const [latestUserInput, setLatestUserInput] = useState(inputValue);
+  const [countKey, setCountKey] = useState(0);
 
   const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
-  const autocompleteCountRef = useRef<HTMLDivElement>(document.createElement('div'));
-
-  const prevAutcompleteCountText = autocompleteCountRef.current.innerHTML;
-
-  if (shouldDisplayDropdown) {
-    if (inputRef.current.value || options.length || prevAutcompleteCountText) {
-      updateAutocompleteCountText(prevAutcompleteCountText);
-    }
-  } else {
-    removeAutocompleteCountText();
-  }
 
   function handleDocumentClick(evt: MouseEvent) {
     const target = evt.target as HTMLElement;
@@ -129,25 +119,6 @@ export default function InputDropdown({
     }
   }
 
-  function removeAutocompleteCountText() {
-    if (hasAutocompleteCount) {
-      autocompleteCountRef.current.innerHTML = '';
-    }
-  }
-
-  function updateAutocompleteCountText(prevText?: string) {
-    if (hasAutocompleteCount) {
-      const latestText = processTranslation({
-        phrase: `${options.length} autocomplete option found.`,
-        pluralForm: `${options.length} autocomplete options found.`,
-        count: options.length
-      });
-      if (!prevText || prevText !== latestText) {
-        autocompleteCountRef.current.innerHTML = latestText;
-      }
-    }
-  }
-
   return (
     <>
       <div className={cssClasses.inputContainer}>
@@ -160,13 +131,13 @@ export default function InputDropdown({
             setLatestUserInput(value);
             updateInputValue(value);
             updateDropdown();
-            updateAutocompleteCountText();
+            setCountKey(countKey + 1);
           }}
           onClick={() => {
             dispatch({ type: 'ShowOptions' });
             updateDropdown();
             if (options.length || inputValue) {
-              updateAutocompleteCountText();
+              setCountKey(countKey + 1);
             }
           }}
           onKeyDown={onKeyDown}
@@ -177,20 +148,17 @@ export default function InputDropdown({
         />
         {renderButtons()}
       </div>
-      {screenReaderInstructionsId &&
-        <div
-          id={screenReaderInstructionsId}
-          className={cssClasses.screenReaderInstructions}
-        >
-          {screenReaderInstructions}
-        </div>
-      }
-      {hasAutocompleteCount &&
-        <div
-          className={cssClasses.autocompleteCount}
-          aria-live='assertive'
-          ref={autocompleteCountRef}>
-        </div>
+      {(screenReaderInstructionsId || hasAutocompleteCount) &&
+        <ScreenReader
+          instructionsId={screenReaderInstructionsId}
+          instructions={screenReaderInstructions}
+          hasCount={hasAutocompleteCount}
+          hasInput={!!inputRef.current.value}
+          optionsLength={options.length}
+          shouldDisplayOptions={shouldDisplayDropdown}
+          countKey={countKey}
+          cssClasses={cssClasses}
+        />
       }
       {shouldDisplayDropdown &&
         <Dropdown

diff --git a/sample-app/src/components/ScreenReader.tsx b/sample-app/src/components/ScreenReader.tsx
@@ -0,0 +1,71 @@
+import { useRef } from "react";
+import { processTranslation } from './utils/processTranslation';
+import '../sass/ScreenReader.scss';
+
+interface Props {
+  instructionsId?: string,
+  instructions?: string,
+  hasCount: boolean,
+  hasInput?: boolean,
+  optionsLength?: number,
+  shouldDisplayOptions?: boolean,
+  countKey?: number,
+  cssClasses: {
+    screenReaderInstructions?: string,
+    screenReaderCount?: string
+  }
+}
+
+export default function ScreenReader({
+  instructionsId,
+  instructions,
+  hasCount,
+  hasInput,
+  optionsLength,
+  shouldDisplayOptions,
+  countKey,
+  cssClasses
+} : Props): JSX.Element | null {
+
+  const countRef = useRef<HTMLDivElement>(document.createElement('div'));
+  const prevAutocompleteCountText = countRef.current.innerText;
+
+  if (!shouldDisplayOptions || !(hasInput || optionsLength || prevAutocompleteCountText)) {
+    removeAutocompleteCountText();
+  }
+
+  function removeAutocompleteCountText() {
+    if (hasCount) {
+      if (countRef.current.innerText !== '') {
+        countRef.current.innerText = '';
+      }
+    }
+  }
+
+  return (
+    <>
+      {instructionsId &&
+        <div
+          id={instructionsId}
+          className={cssClasses.screenReaderInstructions}
+        >
+          {instructions}
+        </div>
+      }
+      {hasCount &&
+        <div
+          className={cssClasses.screenReaderCount}
+          key={countKey}
+          aria-live='assertive'
+          ref={countRef}
+        >
+          {processTranslation({
+            phrase: `${optionsLength} autocomplete option found.`,
+            pluralForm: `${optionsLength} autocomplete options found.`,
+            count: optionsLength
+          })}
+        </div>
+      }
+    </>
+  );
+};
diff --git a/sample-app/src/components/SearchBar.tsx b/sample-app/src/components/SearchBar.tsx
@@ -82,8 +82,8 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro
           focusedOption: 'Autocomplete__option--focused',
           inputElement: 'SearchBar__input',
           inputContainer: 'SearchBar__inputContainer',
-          screenReaderInstructions: 'sr-instructions',
-          autocompleteCount: 'sr-only'
+          screenReaderInstructions: 'ScreenReader__instructions',
+          screenReaderCount: 'ScreenReader__count'
         }}
       />
     </div>

diff --git a/sample-app/src/sass/App.scss b/sample-app/src/sass/App.scss
@@ -21,19 +21,4 @@
 
 .result-description {
   padding-left: 2em;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  border: 0;
-}
-
-.sr-instructions {
-  display: none;
 }
diff --git a/sample-app/src/sass/ScreenReader.scss b/sample-app/src/sass/ScreenReader.scss
@@ -0,0 +1,16 @@
+.ScreenReader {
+  &__instructions {
+    display: none;
+  }
+
+  &__count {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+  }
+}