Add aria-activedescendant support in autocomplete (#47)

- update searchbar input element's attributes to include `aria-activedescedant` based on selected autocomplete option using UP/DOWN key.

J=SLAP-1650
TEST=manual

see that search bar input contains aria-activedescendant with id of the selected autocomplete
see that search bar input remains in focus when moving through the autocomplete option
tab over components and see that autocomplete options is not registered individually
see that aria-activedescedant is removed when move back to input element + when hit enter/click submit

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>)
   }

sample-app/src/components/InputDropdown.tsx

@@ -5,6 +5,7 @@ interface Props {
   inputValue?: string,
   placeholder?: string,
   options: Option[],
+  optionIdPrefix: string,
   onSubmit?: (value: string) => void,
   updateInputValue: (value: string) => void,
   updateDropdown: () => void,
@@ -46,6 +47,7 @@ export default function InputDropdown({
   inputValue = '',
   placeholder,
   options,
+  optionIdPrefix,
   onSubmit = () => {},
   updateInputValue,
   updateDropdown,
@@ -59,6 +61,9 @@ export default function InputDropdown({
     focusedOptionIndex: undefined,
     shouldDisplayDropdown: false,
   });
+  const focusOptionId = focusedOptionIndex === undefined 
+    ? undefined
+    : `${optionIdPrefix}-${focusedOptionIndex}`;
 
   const [latestUserInput, setLatestUserInput] = useState(inputValue);
 
@@ -83,12 +88,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,12 +129,14 @@ export default function InputDropdown({
           onKeyDown={onKeyDown}
           value={inputValue}
           ref={inputRef}
+          aria-activedescendant={focusOptionId}
         />
         {renderButtons()}
       </div>
       {shouldDisplayDropdown &&
         <Dropdown
           options={options}
+          optionIdPrefix={optionIdPrefix}
           onClickOption={option => {
             updateInputValue(option.value);
             onSubmit(option.value)

sample-app/src/components/SearchBar.tsx

@@ -60,6 +60,7 @@ export default function SearchBar({ placeholder, isVertical }: Props) {
             render: () => renderWithHighlighting(result)
           }
         })}
+        optionIdPrefix='Autocomplete__option'
         onSubmit={executeQuery}
         updateInputValue={value => {
           answersActions.setQuery(value);