From aecf99508760d5d61fbc4e76ceabb76987ca2b2e Mon Sep 17 00:00:00 2001
From: Rishab Motwani <rmotwani-c@eightfold.ai>
Date: Thu, 24 Oct 2024 16:20:27 +0530
Subject: [PATCH] fix: floating-dropdrow: a11y fix for accessibility

---
 src/components/Dropdown/Dropdown.tsx              | 8 +++++++-
 src/components/Menu/MenuItem/menuItem.module.scss | 6 ++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 7dacda85e..f50adc31f 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -287,12 +287,16 @@ export const Dropdown: FC<DropdownProps> = React.memo(
           toggle(false)(event);
         }
         if (event?.key === eventKeys.TAB) {
+          event.preventDefault();
           timeout && clearTimeout(timeout);
           timeout = setTimeout(() => {
             if (!refs.floating.current.matches(':focus-within')) {
               toggle(false)(event);
             }
           }, NO_ANIMATION_DURATION);
+          const menuButtonEvent: HTMLButtonElement =
+            document.activeElement as HTMLButtonElement;
+          menuButtonEvent.click();
         }
         if (event?.key === eventKeys.TAB && event.shiftKey) {
           timeout && clearTimeout(timeout);
@@ -420,7 +424,9 @@ export const Dropdown: FC<DropdownProps> = React.memo(
           {getReference()}
           <ConditionalWrapper
             condition={portal}
-            wrapper={(children) => <FloatingPortal>{children}</FloatingPortal>}
+            wrapper={(children) => (
+              <FloatingPortal preserveTabOrder>{children}</FloatingPortal>
+            )}
           >
             {getDropdown()}
           </ConditionalWrapper>
diff --git a/src/components/Menu/MenuItem/menuItem.module.scss b/src/components/Menu/MenuItem/menuItem.module.scss
index e2893c8b2..3c3092f17 100644
--- a/src/components/Menu/MenuItem/menuItem.module.scss
+++ b/src/components/Menu/MenuItem/menuItem.module.scss
@@ -12,6 +12,12 @@
   margin: $space-xxs 0;
   white-space: nowrap;
 
+  &:focus-within {
+    box-shadow: var(--focus-visible-box-shadow);
+    color: var(--primary-color);
+    border-radius: var(--border-radius-xl);
+  }
+
   &.wrap {
     white-space: normal;
   }