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. -->
This commit is contained in:
Thomas Trompette
2026-07-22 14:29:41 +02:00
committed by GitHub
parent b4aa323889
commit f5ab8a236c
2 changed files with 8 additions and 1 deletions
@@ -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>
);
@@ -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>