fix: Accessibility improvements for Dropdown

src/components/Dropdown/Dropdown.test.tsx

@@ -69,12 +69,17 @@ const dropdownProps: object = {
   portal: false,
 };
 
-const DropdownComponent = (): JSX.Element => {
+const DropdownComponent = ({
+  trapFocus,
+}: {
+  trapFocus?: boolean;
+}): JSX.Element => {
   const [visible, setVisibility] = useState(false);
 
   return (
     <Dropdown
       {...dropdownProps}
+      trapFocus={trapFocus}
       onVisibleChange={(isVisible) => setVisibility(isVisible)}
     >
       <Button
@@ -573,4 +578,43 @@ describe('Dropdown', () => {
     expect(referenceElement.getAttribute('aria-expanded')).toBe('true');
     expect(screen.getByText('User profile 1')).toBeVisible();
   });
+
+  test('Allows focus cycling when trapFocus prop is enabled', async () => {
+    const { getByTestId } = render(<DropdownComponent trapFocus />);
+    const referenceElement = getByTestId('dropdown-reference');
+
+    // Click to open dropdown
+    act(() => {
+      userEvent.click(referenceElement);
+    });
+
+    // Wait for menu to be visible
+    await waitFor(() => screen.getByText('User profile 1'));
+
+    await waitFor(() =>
+      expect(screen.getByTestId('User profile 1').matches(':focus')).toBe(true)
+    );
+
+    // Tab to third (last) menu item
+    act(() => {
+      userEvent.tab();
+      userEvent.tab();
+    });
+
+    // Verify last menu item is focused
+    await waitFor(() =>
+      expect(screen.getByTestId('User profile 3').matches(':focus')).toBe(true)
+    );
+
+    // Cycle focus back to first menu item
+    act(() => {
+      userEvent.tab();
+    });
+
+    // Verify dropdown remains open and first menu item is focused
+    expect(referenceElement.getAttribute('aria-expanded')).toBe('true');
+    await waitFor(() =>
+      expect(screen.getByTestId('User profile 1').matches(':focus')).toBe(true)
+    );
+  });
 });

src/components/Dropdown/Dropdown.tsx

@@ -72,6 +72,7 @@ export const Dropdown: FC<DropdownProps> = React.memo(
         showDropdown,
         style,
         tabIndex = 0,
+        trapFocus = false,
         trigger = 'click',
         visible,
         width,
@@ -296,19 +297,14 @@ export const Dropdown: FC<DropdownProps> = React.memo(
         if (event?.key === eventKeys.ESCAPE) {
           toggle(false)(event);
         }
-        if (event?.key === eventKeys.TAB) {
+        // Let FloatingFocusManager handle Tab/Shift+Tab when trapping focus.
+        // Only perform custom Tab-handling when trapFocus is false.
+        if (!trapFocus && event?.key === eventKeys.TAB) {
           timeout && clearTimeout(timeout);
           timeout = setTimeout(() => {
             if (!refs.floating.current.matches(':focus-within')) {
-              toggle(false)(event);
-            }
-          }, NO_ANIMATION_DURATION);
-        }
-        if (event?.key === eventKeys.TAB && event.shiftKey) {
-          timeout && clearTimeout(timeout);
-          timeout = setTimeout(() => {
-            if (!refs.floating.current.matches(':focus-within')) {
-              toggle(toggleDropdownOnShiftTab)(event);
+              const value = event.shiftKey ? toggleDropdownOnShiftTab : false;
+              toggle(value)(event);
             }
           }, NO_ANIMATION_DURATION);
         }
@@ -399,10 +395,11 @@ export const Dropdown: FC<DropdownProps> = React.memo(
           <FloatingFocusManager
             context={context}
             key={dropdownId}
-            modal={false}
-            order={['reference', 'content']}
+            modal={trapFocus}
+            visuallyHiddenDismiss={trapFocus}
+            order={trapFocus ? undefined : ['reference', 'content']}
             initialFocus={-1}
-            returnFocus={false}
+            returnFocus={trapFocus}
           >
             <div
               ref={refs.setFloating}

src/components/Dropdown/Dropdown.types.ts

@@ -149,6 +149,11 @@ export interface DropdownProps {
    * The optional tab index of the reference element.
    */
   tabIndex?: number;
+  /**
+   * If focus should be trapped within the dropdown when visible
+   * @default false
+   */
+  trapFocus?: boolean;
   /**
    * The trigger mode that opens the dropdown
    * @default 'click'