Add aria-activedescendant support in autocomplete

J=SLAP-1650
yext · Oct 26, 2021 · 4fa2d44 · 4fa2d44
1 parent 0c8a24f
commit 4fa2d44
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/sample-app/package-lock.json b/sample-app/package-lock.json
diff --git a/sample-app/src/components/Dropdown.tsx b/sample-app/src/components/Dropdown.tsx
@@ -30,7 +30,11 @@ export default function Dropdown({
       [cssClasses.focusedOption]: index === focusedOptionIndex
     })
     return (
-      <div key={index} className={className} onClick={() => onClickOption(option)}>
+      <div 
+        key={index}
+        className={className}
+        id={`${cssClasses.option}-${index}`}
+        onClick={() => onClickOption(option)}>
         {option.render()}
       </div>)
   }

diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -59,6 +59,9 @@ export default function InputDropdown({
     focusedOptionIndex: undefined,
     shouldDisplayDropdown: false,
   });
+  const focusOptionId = focusedOptionIndex === undefined 
+    ? undefined
+    : `${cssClasses.option}-${focusedOptionIndex}`;
 
   const [latestUserInput, setLatestUserInput] = useState(inputValue);
 
@@ -83,12 +86,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;
@@ -125,6 +127,7 @@ export default function InputDropdown({
           onKeyDown={onKeyDown}
           value={inputValue}
           ref={inputRef}
+          aria-activedescendant={focusOptionId}
         />
         {renderButtons()}
       </div>