512 Ability to navigate dropdown menus with keyboard (#11735)

# Ability to navigate dropdown menus with keyboard

The aim of this PR is to improve accessibility by allowing the user to
navigate inside the dropdown menus with the keyboard.
This PR refactors the `SelectableList` and `SelectableListItem`
components to move the Enter event handling responsibility from
`SelectableList` to the individual `SelectableListItem` components.
Closes [512](https://github.com/twentyhq/core-team-issues/issues/512)

## Key Changes:
- All dropdowns are now navigable with arrow keys

## Technical Implementation:
- Each `SelectableListItem` now has direct access to its own `Enter` key
handler, improving component encapsulation
- Removed the central `Enter` key handler logic from `SelectableList`
- Added `SelectableList` and `SelectableListItem` to all `Dropdown`
components inside the app
- Updated all component implementations to adapt to the new pattern:
  - Action menu components (`ActionDropdownItem`, `ActionListItem`)
  - Command menu components
  - Object filter, sort and options dropdowns
  - Record picker components
  - Select components

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx

@@ -7,6 +7,8 @@ import { getRightDrawerActionMenuDropdownIdFromActionMenuId } from '@/action-men
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@@ -41,6 +43,16 @@ export const CommandMenuActionMenuDropdown = () => {
     [toggleDropdown],
   );
 
+  const recordSelectionActions = actions.filter(
+    (action) => action.scope === ActionScope.RecordSelection,
+  );
+
+  const selectableItemIdArray = recordSelectionActions.map(
+    (action) => action.key,
+  );
+
+  const { setSelectedItemId } = useSelectableList(actionMenuId);
+
   return (
     <Dropdown
       dropdownId={getRightDrawerActionMenuDropdownIdFromActionMenuId(
@@ -56,13 +68,22 @@ export const CommandMenuActionMenuDropdown = () => {
       }
       dropdownPlacement="top-end"
       dropdownOffset={{ y: parseInt(theme.spacing(2), 10) }}
+      onOpen={() => {
+        setSelectedItemId(selectableItemIdArray[0]);
+      }}
       dropdownComponents={
         <DropdownMenuItemsContainer>
-          {actions
-            .filter((action) => action.scope === ActionScope.RecordSelection)
-            .map((action) => (
+          <SelectableList
+            selectableListInstanceId={actionMenuId}
+            hotkeyScope={
+              CommandMenuActionMenuDropdownHotkeyScope.CommandMenuActionMenuDropdown
+            }
+            selectableItemIdArray={selectableItemIdArray}
+          >
+            {recordSelectionActions.map((action) => (
               <ActionComponent action={action} key={action.key} />
             ))}
+          </SelectableList>
         </DropdownMenuItemsContainer>
       }
     />

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx

@@ -9,8 +9,12 @@ import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/get
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import styled from '@emotion/styled';
 import { useContext } from 'react';
@@ -42,7 +46,7 @@ export const RecordIndexActionMenuDropdown = () => {
   );
 
   const dropdownId = getActionMenuDropdownIdFromActionMenuId(actionMenuId);
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useDropdownV2();
 
   const actionMenuDropdownPosition = useRecoilValue(
     extractComponentState(
@@ -53,6 +57,16 @@ export const RecordIndexActionMenuDropdown = () => {
 
   const { openCommandMenu } = useCommandMenu();
 
+  const selectedItemIdArray = [
+    ...recordIndexActions.map((action) => action.key),
+    'more-actions',
+  ];
+
+  const selectedItemId = useRecoilComponentValueV2(
+    selectedItemIdComponentState,
+    dropdownId,
+  );
+
   return (
     <Dropdown
       dropdownId={dropdownId}
@@ -69,18 +83,33 @@ export const RecordIndexActionMenuDropdown = () => {
       dropdownComponents={
         <StyledDropdownMenuContainer className="action-menu-dropdown">
           <DropdownMenuItemsContainer>
-            {recordIndexActions.map((action) => (
-              <ActionComponent action={action} key={action.key} />
-            ))}
-            <MenuItem
-              key="more-actions"
-              LeftIcon={IconLayoutSidebarRightExpand}
-              onClick={() => {
-                closeDropdown();
-                openCommandMenu();
-              }}
-              text="More actions"
-            />
+            <SelectableList
+              hotkeyScope={ActionMenuDropdownHotkeyScope.ActionMenuDropdown}
+              selectableItemIdArray={selectedItemIdArray}
+              selectableListInstanceId={dropdownId}
+            >
+              {recordIndexActions.map((action) => (
+                <ActionComponent action={action} key={action.key} />
+              ))}
+              <SelectableListItem
+                itemId="more-actions"
+                key="more-actions"
+                onEnter={() => {
+                  closeDropdown(dropdownId);
+                  openCommandMenu();
+                }}
+              >
+                <MenuItem
+                  LeftIcon={IconLayoutSidebarRightExpand}
+                  onClick={() => {
+                    closeDropdown(dropdownId);
+                    openCommandMenu();
+                  }}
+                  focused={selectedItemId === 'more-actions'}
+                  text="More actions"
+                />
+              </SelectableListItem>
+            </SelectableList>
           </DropdownMenuItemsContainer>
         </StyledDropdownMenuContainer>
       }