fix(dropddown): accessibility fix for dropdown options via Tab and arrow keys (#1084)

* fix(dropddown): accessibility fix for dropdown options via Tab and arrow keys

* fix(dropddown): accessibility fix for dropdown options via Tab and arrow keys

* fix(dropddown): accessibility fix for dropdown options via Tab and arrow keys

* fix(dropddown): review commets resolved

---------

Co-authored-by: Sannidhi Sherigar <ssherigar-c@IND456-JD9DVJCV66-MacBook-Pro.local>

Author: ssherigar-c-eightfold

src/components/Dropdown/Dropdown.tsx

@@ -54,6 +54,7 @@ export const Dropdown: FC<DropdownProps> = React.memo(
         closeOnDropdownClick = true,
         closeOnReferenceClick = true,
         closeOnOutsideClick = true,
+        shouldCloseOnTab = false,
         disabled,
         dropdownClassNames,
         dropdownStyle,
@@ -124,6 +125,14 @@ export const Dropdown: FC<DropdownProps> = React.memo(
         return focusableElements?.[0];
       };
 
+      const getFocusableItems = (): HTMLElement[] => {
+        if (!refs.floating.current) return [];
+
+        return Array.from(
+          refs.floating.current.querySelectorAll<HTMLElement>(SELECTORS)
+        ).filter((el) => focusable(el));
+      };
+
       const focusFirstElement = (): void => {
         const elementToFocus: HTMLElement = firstFocusableElement?.();
         clearInterval(intervalRef?.current);
@@ -285,23 +294,65 @@ export const Dropdown: FC<DropdownProps> = React.memo(
           event?.preventDefault();
           toggle(false)(event);
         }
+        if (event?.key === eventKeys.ESCAPE) {
+          toggle(false)(event);
+        }
+        if (event?.key === eventKeys.TAB && mergedVisible && shouldCloseOnTab) {
+          toggle(false)(event);
+        }
         if (
-          event?.key === eventKeys.ESCAPE ||
-          (event?.key === eventKeys.TAB && mergedVisible) ||
-          (event?.key === eventKeys.TAB &&
-            event.shiftKey &&
-            !(event.target as HTMLElement).matches(':focus-within'))
+          event?.key === eventKeys.TAB &&
+          event.shiftKey &&
+          !(event.target as HTMLElement).matches(':focus-within')
         ) {
           toggle(false)(event);
         }
       };
 
       const handleFloatingKeyDown = (event: React.KeyboardEvent): void => {
         if (
-          event?.key === eventKeys.ESCAPE ||
-          (event?.key === eventKeys.TAB && mergedVisible)
+          !event.defaultPrevented &&
+          (event.key === eventKeys.ARROWDOWN || event.key === eventKeys.ARROWUP)
         ) {
+          const items = getFocusableItems();
+          const currentIndex = items.indexOf(
+            document.activeElement as HTMLElement
+          );
+
+          if (event.key === eventKeys.ARROWDOWN) {
+            event.preventDefault();
+            const next = items[currentIndex + 1] || items[0];
+            next?.focus();
+            return;
+          }
+
+          if (event.key === eventKeys.ARROWUP) {
+            event.preventDefault();
+            const prev = items[currentIndex - 1] || items[items.length - 1];
+            prev?.focus();
+            return;
+          }
+        }
+
+        if (event.key === eventKeys.ESCAPE) {
           toggle(false)(event);
+          return;
+        }
+
+        if (event?.key === eventKeys.TAB && mergedVisible && !event.shiftKey) {
+          if (shouldCloseOnTab) {
+            toggle(false)(event);
+          } else {
+            timeout && clearTimeout(timeout);
+            timeout = setTimeout(() => {
+              if (
+                refs.floating.current &&
+                !refs.floating.current.contains(document.activeElement)
+              ) {
+                toggle(false)(event);
+              }
+            }, NO_ANIMATION_DURATION);
+          }
         }
         if (event?.key === eventKeys.TAB && event.shiftKey && mergedVisible) {
           timeout && clearTimeout(timeout);

src/components/Dropdown/Dropdown.types.ts

@@ -52,6 +52,11 @@ export interface DropdownProps {
    * @default true
    */
   closeOnOutsideClick?: boolean;
+  /**
+   * Should close dropdown on tab key
+   * @default false
+   */
+  shouldCloseOnTab?: boolean;
   /**
    * If the dropdown is disabled or not
    */