fix(front): add accessible labels to icon-only options dropdown triggers (#23325)

## 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. -->
This commit is contained in:
Guillaume Flambard
2026-07-27 09:10:49 +02:00
committed by GitHub
parent 4f9fd6f674
commit 1e5b8e6db4
5 changed files with 25 additions and 5 deletions
@@ -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}>
@@ -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={
@@ -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>
@@ -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>
@@ -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>