css feedback

yext · Oct 28, 2021 · d76d33c · d76d33c
1 parent 2e15463
commit d76d33c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -5,7 +5,9 @@ import { processTranslation } from './utils/processTranslation';
 interface Props {
   inputValue?: string,
   placeholder?: string,
-  instructionText?: string,
+  screenReaderInstructions?: string,
+  screenReaderInstructionsId?: string,
+  hasAutocompleteCount: boolean,
   options: Option[],
   optionIdPrefix: string,
   onSubmit?: (value: string) => void,
@@ -18,7 +20,7 @@ interface Props {
     focusedOption: string,
     inputElement: string,
     inputContainer: string,
-    instructions?: string,
+    screenReaderInstructions?: string,
     autocompleteCount?: string
   }
 }
@@ -50,7 +52,9 @@ function reducer(state: State, action: Action): State {
 export default function InputDropdown({
   inputValue = '',
   placeholder,
-  instructionText = '',
+  screenReaderInstructions = '',
+  screenReaderInstructionsId,
+  hasAutocompleteCount,
   options,
   optionIdPrefix,
   onSubmit = () => {},
@@ -126,13 +130,13 @@ export default function InputDropdown({
   }
 
   function removeAutocompleteCountText() {
-    if (cssClasses.autocompleteCount) {
+    if (hasAutocompleteCount) {
       autocompleteCountRef.current.innerHTML = '';
     }
   }
 
   function updateAutocompleteCountText(prevText?: string) {
-    if (cssClasses.autocompleteCount) {
+    if (hasAutocompleteCount) {
       const latestText = processTranslation({
         phrase: `${options.length} autocomplete option found.`,
         pluralForm: `${options.length} autocomplete options found.`,
@@ -168,22 +172,22 @@ export default function InputDropdown({
           onKeyDown={onKeyDown}
           value={inputValue}
           ref={inputRef}
-          aria-describedby={cssClasses.instructions}
+          aria-describedby={screenReaderInstructionsId}
           aria-activedescendant={focusOptionId}
         />
         {renderButtons()}
       </div>
-      {cssClasses.instructions &&
+      {screenReaderInstructionsId &&
         <div
-          id={cssClasses.instructions}
-          className={`${cssClasses.instructions} sr-instructions`}
+          id={screenReaderInstructionsId}
+          className={cssClasses.screenReaderInstructions}
         >
-          {instructionText}
+          {screenReaderInstructions}
         </div>
       }
-      {cssClasses.autocompleteCount &&
+      {hasAutocompleteCount &&
         <div
-          className={`${cssClasses.autocompleteCount} sr-only`}
+          className={cssClasses.autocompleteCount}
           aria-live='assertive'
           ref={autocompleteCountRef}>
         </div>

diff --git a/sample-app/src/components/SearchBar.tsx b/sample-app/src/components/SearchBar.tsx
@@ -25,8 +25,8 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro
   const autocompleteResults = useAnswersState(mapStateToAutocompleteResults) || [];
   const isLoading = useAnswersState(state => state.vertical.searchLoading || state.universal.searchLoading);
 
-  const instructionsText = instructions
-    || 'When autocomplete results are available, use up and down arrows to review and enter to select.'
+  const screenReaderInstructions = instructions
+    ?? 'When autocomplete results are available, use up and down arrows to review and enter to select.'
 
   function executeAutocomplete () {
     isVertical 
@@ -58,7 +58,9 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro
       <InputDropdown
         inputValue={query}
         placeholder={placeholder}
-        instructionText={instructionsText}
+        screenReaderInstructions={screenReaderInstructions}
+        screenReaderInstructionsId='SearchBar__srInstructions'
+        hasAutocompleteCount={true}
         options={autocompleteResults.map(result => {
           return {
             value: result.value,
@@ -80,8 +82,8 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro
           focusedOption: 'Autocomplete__option--focused',
           inputElement: 'SearchBar__input',
           inputContainer: 'SearchBar__inputContainer',
-          instructions: 'Autocomplete__instructions',
-          autocompleteCount: 'Autocomplete__count'
+          screenReaderInstructions: 'sr-instructions',
+          autocompleteCount: 'sr-only'
         }}
       />
     </div>