Merge branch 'main' into dev/autocomplete-screen-reader

yext · Oct 27, 2021 · 91a8f18 · 91a8f18
2 parents 2d42d04 + 37050f2
commit 91a8f18
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/sample-app/src/components/Dropdown.tsx b/sample-app/src/components/Dropdown.tsx
@@ -9,6 +9,7 @@ interface Props {
   options: Option[],
   onClickOption?: (option: Option) => void,
   focusedOptionIndex: number | undefined,
+  optionIdPrefix: string,
   cssClasses: {
     optionContainer: string,
     option: string,
@@ -23,14 +24,19 @@ export default function Dropdown({
   options,
   onClickOption = () => {},
   focusedOptionIndex,
+  optionIdPrefix,
   cssClasses
 }: Props): JSX.Element | null {
   function renderOption(option: Option, index: number) {
     const className = classNames(cssClasses.option, {
       [cssClasses.focusedOption]: index === focusedOptionIndex
     })
     return (
-      <div key={index} className={className} onClick={() => onClickOption(option)}>
+      <div 
+        key={index}
+        className={className}
+        id={`${optionIdPrefix}-${index}`}
+        onClick={() => onClickOption(option)}>
         {option.render()}
       </div>)
   }

diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -7,6 +7,7 @@ interface Props {
   placeholder?: string,
   instructionText?: string,
   options: Option[],
+  optionIdPrefix: string,
   onSubmit?: (value: string) => void,
   updateInputValue: (value: string) => void,
   updateDropdown: () => void,
@@ -51,6 +52,7 @@ export default function InputDropdown({
   placeholder,
   instructionText = '',
   options,
+  optionIdPrefix,
   onSubmit = () => {},
   updateInputValue,
   updateDropdown,
@@ -64,6 +66,9 @@ export default function InputDropdown({
     focusedOptionIndex: undefined,
     shouldDisplayDropdown: false,
   });
+  const focusOptionId = focusedOptionIndex === undefined 
+    ? undefined
+    : `${optionIdPrefix}-${focusedOptionIndex}`;
 
   const [latestUserInput, setLatestUserInput] = useState(inputValue);
 
@@ -94,12 +99,11 @@ export default function InputDropdown({
 
     const isFirstOptionFocused = focusedOptionIndex === 0;
     const isLastOptionFocused = focusedOptionIndex === options.length - 1;
-
     if (evt.key === 'Enter') {
       updateInputValue(inputValue);
       onSubmit(inputValue);
       dispatch({ type: 'HideOptions' });
-    } else if (evt.key === 'Escape') {
+    } else if (evt.key === 'Escape' || evt.key === 'Tab') {
       dispatch({ type: 'HideOptions' });
     } else if (evt.key === 'ArrowDown' && options.length > 0 && !isLastOptionFocused) {
       const newIndex = focusedOptionIndex !== undefined ? focusedOptionIndex + 1 : 0;
@@ -157,6 +161,7 @@ export default function InputDropdown({
           value={inputValue}
           ref={inputRef}
           aria-describedby={cssClasses.instructions}
+          aria-activedescendant={focusOptionId}
         />
         {renderButtons()}
       </div>
@@ -178,6 +183,7 @@ export default function InputDropdown({
       {shouldDisplayDropdown &&
         <Dropdown
           options={options}
+          optionIdPrefix={optionIdPrefix}
           onClickOption={option => {
             updateInputValue(option.value);
             onSubmit(option.value)

diff --git a/sample-app/src/components/SearchBar.tsx b/sample-app/src/components/SearchBar.tsx
@@ -65,6 +65,7 @@ export default function SearchBar({ placeholder, isVertical, instructions }: Pro
             render: () => renderWithHighlighting(result)
           }
         })}
+        optionIdPrefix='Autocomplete__option'
         onSubmit={executeQuery}
         updateInputValue={value => {
           answersActions.setQuery(value);