accessibility: make dropdowns accessible (#9475)

#### Motivation

Improve accessibility of dropdowns.

#### Before

Dropdowns are not accessible.

<img width="1219" alt="Screenshot 2025-01-09 at 10 00 36"
src="https://github.com/user-attachments/assets/060198f8-a42f-408c-a39a-b83da55e23c4"
/>

#### Ater

Dropdowns are accessible


![image](https://github.com/user-attachments/assets/e46d6292-913c-458b-acd4-37ed4e1a1e9b)

packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx

@@ -92,7 +92,11 @@ export const SingleRecordSelectMenuItemsWithSearch = ({
           <DropdownMenuSeparator />
         </>
       )}
-      <DropdownMenuSearchInput onChange={handleSearchFilterChange} autoFocus />
+      <DropdownMenuSearchInput
+        onChange={handleSearchFilterChange}
+        autoFocus
+        role="combobox"
+      />
       {(dropdownPlacement?.includes('start') ||
         isUndefinedOrNull(dropdownPlacement)) && (
         <>

packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx

@@ -37,6 +37,7 @@ export const CurrencyPickerDropdownSelect = ({
         value={searchFilter}
         onChange={(event) => setSearchFilter(event.target.value)}
         autoFocus
+        role="combobox"
       />
       <DropdownMenuSeparator />
       <DropdownMenuItemsContainer hasMaxHeight>

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -136,6 +136,10 @@ export const Dropdown = ({
             <div
               ref={refs.setReference}
               onClick={handleClickableComponentClick}
+              aria-controls={`${dropdownId}-options`}
+              aria-expanded={isDropdownOpen}
+              aria-haspopup={true}
+              role="button"
             >
               {clickableComponent}
             </div>

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx

@@ -122,6 +122,8 @@ export const DropdownContent = ({
         <StyledDropdownContentContainer
           ref={floatingUiRefs.setFloating}
           style={dropdownMenuStyles}
+          role="listbox"
+          id={`${dropdownId}-options`}
         >
           <OverlayContainer>
             <DropdownMenu
@@ -138,9 +140,12 @@ export const DropdownContent = ({
           <StyledDropdownContentContainer
             ref={floatingUiRefs.setFloating}
             style={dropdownMenuStyles}
+            role="listbox"
+            id={`${dropdownId}-options`}
           >
             <OverlayContainer>
               <DropdownMenu
+                id={dropdownId}
                 className={className}
                 width={dropdownMenuWidth ?? dropdownWidth}
                 data-select-disable

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -51,6 +51,7 @@ export const DropdownMenuItemsContainer = ({
     <StyledDropdownMenuItemsExternalContainer
       hasMaxHeight={hasMaxHeight}
       className={className}
+      role="listbox"
     >
       {hasMaxHeight ? (
         <StyledScrollWrapper
@@ -76,6 +77,7 @@ export const DropdownMenuItemsContainer = ({
       <StyledDropdownMenuItemsExternalContainer
         hasMaxHeight={hasMaxHeight}
         className={className}
+        role="listbox"
       >
         <StyledDropdownMenuItemsInternalContainer>
           {children}

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx

@@ -69,6 +69,9 @@ export const MenuItemSelect = ({
       selected={selected}
       disabled={disabled}
       hovered={hovered}
+      role="option"
+      aria-selected={selected}
+      aria-disabled={disabled}
     >
       <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
       {selected && needIconCheck && <IconCheck size={theme.icon.size.md} />}

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx

@@ -40,6 +40,9 @@ export const MenuItemSelectAvatar = ({
       disabled={disabled}
       hovered={hovered}
       data-testid={testId}
+      role="option"
+      aria-selected={selected}
+      aria-disabled={disabled}
     >
       <StyledMenuItemLeftContent>
         {avatar}