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:
+4
-1
@@ -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>
|
||||
);
|
||||
|
||||
+4
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user