From 7126ec5ae7add98b5805dd9e3c7eda12665c3e20 Mon Sep 17 00:00:00 2001
From: Malo Marrec <malo.marrec@gmail.com>
Date: Thu, 9 Jan 2025 14:19:58 +0100
Subject: [PATCH] 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)
---
 .../components/SingleRecordSelectMenuItemsWithSearch.tsx    | 6 +++++-
 .../currency/components/CurrencyPickerDropdownSelect.tsx    | 1 +
 .../src/modules/ui/layout/dropdown/components/Dropdown.tsx  | 4 ++++
 .../ui/layout/dropdown/components/DropdownContent.tsx       | 5 +++++
 .../dropdown/components/DropdownMenuItemsContainer.tsx      | 2 ++
 .../src/navigation/menu-item/components/MenuItemSelect.tsx  | 3 +++
 .../menu-item/components/MenuItemSelectAvatar.tsx           | 3 +++
 7 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx
index a971eecff..1b9e1c378 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx
+++ b/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)) && (
         <>
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
index 18891ea4b..14031684e 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx
+++ b/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>
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
index 230d4152b..ee55b31c1 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/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>
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx
index 3c2d2ea0a..acbae1755 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx
+++ b/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
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
index edcfd5e75..4de0530e8 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
+++ b/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}
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
index 98f8eb715..211b8452a 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
+++ b/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} />}
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx
index 4df9e2800..cbc748e1f 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx
+++ b/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}