Skip to content

Commit 499a05c

Browse files
Add support for table aria-label (accessibility) (#1273)
* support table aria-label * fixing doc * fix props doc table --------- Co-authored-by: Deiber Chacon <d.chacon.huertas@accenture.com>
1 parent 59c6ac1 commit 499a05c

5 files changed

Lines changed: 460 additions & 2 deletions

File tree

src/DataTable/DataTable.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
116116
direction = defaultProps.direction,
117117
onColumnOrderChange = defaultProps.onColumnOrderChange,
118118
className,
119+
ariaLabel,
119120
} = props;
120121

121122
const {
@@ -380,7 +381,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
380381
<Wrapper>
381382
{progressPending && !persistTableHead && <ProgressWrapper>{progressComponent}</ProgressWrapper>}
382383

383-
<Table disabled={disabled} className="rdt_Table" role="table">
384+
<Table disabled={disabled} className="rdt_Table" role="table" {...(ariaLabel && { 'aria-label': ariaLabel })}>
384385
{showTableHead() && (
385386
<Head className="rdt_TableHead" role="rowgroup" $fixedHeader={fixedHeader}>
386387
<HeadRow className="rdt_TableHeadRow" role="row" $dense={dense}>

src/DataTable/__tests__/DataTable.test.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2214,6 +2214,38 @@ describe('DataTable::dense', () => {
22142214
});
22152215
});
22162216

2217+
describe('DataTable::ariaLabel', () => {
2218+
test('should render correctly when ariaLabel', () => {
2219+
const mock = dataMock();
2220+
const { container } = render(<DataTable data={mock.data} columns={mock.columns} ariaLabel="Test Table" />);
2221+
2222+
expect(container.firstChild).toMatchSnapshot();
2223+
});
2224+
2225+
test('should render correctly when not ariaLabel', () => {
2226+
const mock = dataMock();
2227+
const { container } = render(<DataTable data={mock.data} columns={mock.columns} />);
2228+
2229+
expect(container.firstChild).toMatchSnapshot();
2230+
});
2231+
2232+
test('should render with aria-label when ariaLabel', () => {
2233+
const mock = dataMock();
2234+
const { getByRole } = render(<DataTable data={mock.data} columns={mock.columns} ariaLabel="Test Table" />);
2235+
2236+
const table = getByRole('table');
2237+
expect(table.getAttribute('aria-label')).toBe('Test Table');
2238+
});
2239+
2240+
test('should not render with aria-label when not ariaLabel', () => {
2241+
const mock = dataMock();
2242+
const { getByRole } = render(<DataTable data={mock.data} columns={mock.columns} />);
2243+
2244+
const table = getByRole('table');
2245+
expect(table.getAttribute('aria-label')).toBeNull();
2246+
});
2247+
});
2248+
22172249
describe('DataTable::Theming', () => {
22182250
test('should render correctly when a custom style is applied', () => {
22192251
const mock = dataMock();

0 commit comments

Comments
 (0)