From 1e5b8e6db4f426a62c121219c90af19bcfb57933 Mon Sep 17 00:00:00 2001
From: Guillaume Flambard
 <56681566+guillaume-flambard@users.noreply.github.com>
Date: Mon, 27 Jul 2026 09:10:49 +0200
Subject: [PATCH] fix(front): add accessible labels to icon-only options
 dropdown triggers (#23325)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

Refs #23127. Icon-only `LightIconButton` "more options" triggers
(`IconDotsVertical`) render without an accessible name, failing WCAG
4.1.2 (button-name) — screen readers announce nothing for them.

## Fix

Add `aria-label={t`More options`}` to the affected dropdown triggers.
`LightIconButton` already forwards `aria-label` and sets `aria-hidden`
on the icon when a label is present, so this is purely additive — no
behavioral or visual change.

Scoped to a coherent set of options-menu triggers (attachments, public
domains, SSO, connected accounts, field group config). Other unlabeled
icon buttons can follow in separate PRs.

## Verification

`oxlint --type-aware` and `oxfmt` pass on all changed files. The label
is i18n-wrapped via the existing `useLingui` macro already imported in
each component.


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23325?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
---
 .../activities/files/components/AttachmentDropdown.tsx      | 6 +++++-
 .../fields/components/FieldsConfigurationGroupDropdown.tsx  | 6 +++++-
 .../accounts/components/SettingsAccountsRowDropdownMenu.tsx | 6 +++++-
 .../components/SettingPublicDomainRowDropdownMenu.tsx       | 6 +++++-
 .../components/SSO/SettingsSecuritySSORowDropdownMenu.tsx   | 6 +++++-
 5 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
index 01c684cce8..bf28d90354 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx
@@ -52,7 +52,11 @@ export const AttachmentDropdown = ({
     <Dropdown
       dropdownId={dropdownId}
       clickableComponent={
-        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        <LightIconButton
+          Icon={IconDotsVertical}
+          accent="tertiary"
+          aria-label={t`More options`}
+        />
       }
       dropdownComponents={
         <DropdownContent widthInPixels={GenericDropdownContentWidth.Narrow}>
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDropdown.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDropdown.tsx
index 0e9245aea8..8d8dc16e2d 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDropdown.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDropdown.tsx
@@ -53,7 +53,11 @@ export const FieldsConfigurationGroupDropdown = ({
     <Dropdown
       dropdownId={dropdownId}
       clickableComponent={
-        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        <LightIconButton
+          Icon={IconDotsVertical}
+          accent="tertiary"
+          aria-label={t`More options`}
+        />
       }
       dropdownPlacement="bottom-start"
       dropdownComponents={
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
index cbcdd77e91..e4a3b29659 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
@@ -75,7 +75,11 @@ export const SettingsAccountsRowDropdownMenu = ({
         dropdownId={dropdownId}
         dropdownPlacement="right-start"
         clickableComponent={
-          <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+          <LightIconButton
+            Icon={IconDotsVertical}
+            accent="tertiary"
+            aria-label={t`More options`}
+          />
         }
         dropdownComponents={
           <DropdownContent>
diff --git a/packages/twenty-front/src/modules/settings/domains/components/SettingPublicDomainRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/domains/components/SettingPublicDomainRowDropdownMenu.tsx
index 700cd59a77..0d4aa90b00 100644
--- a/packages/twenty-front/src/modules/settings/domains/components/SettingPublicDomainRowDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/settings/domains/components/SettingPublicDomainRowDropdownMenu.tsx
@@ -50,7 +50,11 @@ export const SettingPublicDomainRowDropdownMenu = ({
       dropdownId={dropdownId}
       dropdownPlacement="right-start"
       clickableComponent={
-        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        <LightIconButton
+          Icon={IconDotsVertical}
+          accent="tertiary"
+          aria-label={t`More options`}
+        />
       }
       dropdownComponents={
         <DropdownContent>
diff --git a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx
index 76fb8ed0b3..048464ab47 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx
@@ -72,7 +72,11 @@ export const SettingsSecuritySSORowDropdownMenu = ({
       dropdownId={dropdownId}
       dropdownPlacement="right-start"
       clickableComponent={
-        <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+        <LightIconButton
+          Icon={IconDotsVertical}
+          accent="tertiary"
+          aria-label={t`More options`}
+        />
       }
       dropdownComponents={
         <DropdownContent>