From f5ab8a236c5820308b559741943ec128aef3ee8b Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Wed, 22 Jul 2026 14:29:41 +0200
Subject: [PATCH] fix: add aria-label to record table selection checkboxes
 (#23147)

## Fixes

Closes #23130

## Problem

On record tables, the select-all header checkbox and each row's
selection checkbox render as `role="checkbox"` with no accessible name,
failing WCAG 4.1.2 (aria-toggle-field-name). Screen-reader users cannot
tell what the checkbox selects.

## Fix

The shared `Checkbox` component already accepts and forwards
`aria-label`, but the record-table callers weren't passing one. Added
translated labels:

- Row checkbox: `aria-label={t\`Select row\`}` in
`RecordTableCellCheckbox.tsx`
- Header checkbox: `aria-label={t\`Select all rows\`}` in
`RecordTableHeaderCheckboxColumn.tsx`

Both use `const { t } = useLingui()` from `@lingui/react/macro`,
following the existing i18n convention in this module.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23147?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. -->
---
 .../record-table-cell/components/RecordTableCellCheckbox.tsx | 5 ++++-
 .../components/RecordTableHeaderCheckboxColumn.tsx           | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
index 760c338a86..131a4d9f42 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@linaria/react';
+import { useLingui } from '@lingui/react/macro';
 import { useCallback } from 'react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
@@ -23,6 +24,8 @@ const StyledContainer = styled.div`
 `;
 
 export const RecordTableCellCheckbox = () => {
+  const { t } = useLingui();
+
   const { isSelected } = useRecordTableRowContextOrThrow();
 
   const { setCurrentRowSelected } = useSetCurrentRowSelected();
@@ -44,7 +47,7 @@ export const RecordTableCellCheckbox = () => {
       widthClassName={RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME}
     >
       <StyledContainer onClick={handleClick} data-select-disable>
-        <Checkbox hoverable checked={isSelected} />
+        <Checkbox hoverable checked={isSelected} aria-label={t`Select row`} />
       </StyledContainer>
     </RecordTableCellStyleWrapper>
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
index 25f1cf043d..7444d0d768 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@linaria/react';
+import { useLingui } from '@lingui/react/macro';
 
 import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -38,6 +39,8 @@ const StyledColumnHeaderCell = styled.div`
 `;
 
 export const RecordTableHeaderCheckboxColumn = () => {
+  const { t } = useLingui();
+
   const allRowsSelectedStatus = useAtomComponentSelectorValue(
     allRowsSelectedStatusComponentSelector,
   );
@@ -87,6 +90,7 @@ export const RecordTableHeaderCheckboxColumn = () => {
           onChange={onChange}
           indeterminate={indeterminate}
           disabled={recordTableIsEmpty}
+          aria-label={t`Select all rows`}
         />
       </StyledContainer>
     </StyledColumnHeaderCell>