diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 52774c1c600..84cdcf80e4c 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -40,6 +40,7 @@ import { MetaConstants, metaAttribute } from '~utils/metaAttribute'; import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects'; import { useTheme } from '~components/BladeProvider'; import getIn from '~utils/lodashButBetter/get'; +import { makeAccessible } from '~utils/makeAccessible'; const rowSelectType: Record< NonNullable['selectionType']>, @@ -499,6 +500,7 @@ const _Table = ({ height, }} pagination={hasPagination ? paginationConfig : null} + {...makeAccessible({ multiSelectable: selectionType === 'multiple' })} {...metaAttribute({ name: MetaConstants.Table })} > {children} diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx index 6b970796e6d..834aecb6765 100644 --- a/packages/blade/src/components/Table/TableBody.web.tsx +++ b/packages/blade/src/components/Table/TableBody.web.tsx @@ -327,7 +327,7 @@ const _TableRow = ({ className={isDisabled ? 'disabled-row' : ''} onMouseEnter={() => onHover?.({ item })} onClick={() => onClick?.({ item })} - {...makeAccessible({ selected: isSelected, multiSelectable: isMultiSelect })} + {...makeAccessible({ selected: isSelected })} {...metaAttribute({ name: MetaConstants.TableRow })} > {isMultiSelect && ( diff --git a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx index bddfa1fe5c0..c5e1c420226 100644 --- a/packages/blade/src/components/Table/__tests__/Table.web.test.tsx +++ b/packages/blade/src/components/Table/__tests__/Table.web.test.tsx @@ -1,6 +1,6 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; -import { fireEvent, waitFor } from '@testing-library/react'; +import { fireEvent, getByRole, waitFor } from '@testing-library/react'; import { Table } from '../Table'; import { TableBody, TableCell, TableRow } from '../TableBody'; import { TableFooter, TableFooterCell, TableFooterRow } from '../TableFooter'; @@ -790,7 +790,7 @@ describe('', () => { it('should render table with multi select', async () => { const onSelectionChange = jest.fn(); const user = userEvent.setup(); - const { getByText, getAllByRole } = renderWithTheme( + const { getByText, getAllByRole, getByRole } = renderWithTheme(
', () => {
, ); + expect(getByRole('table')).toHaveAttribute('aria-multiselectable', 'true'); expect(getByText('Showing 1-5 Items')).toBeInTheDocument(); expect(getAllByRole('checkbox')).toHaveLength(6); const firstSelectableRow = getByText('rzp01').closest('td'); @@ -885,7 +886,6 @@ describe('', () => { ); const firstSelectableRow = getByText('rzp01').closest('tr'); expect(firstSelectableRow).toHaveAttribute('aria-selected', 'true'); - expect(firstSelectableRow).toHaveAttribute('aria-multiselectable', 'false'); const secondSelectableRow = getByText('rzp02').closest('td'); if (secondSelectableRow) await user.click(secondSelectableRow); expect(onSelectionChange).toHaveBeenCalledWith({ @@ -940,10 +940,8 @@ describe('
', () => { expect(getAllByRole('checkbox')).toHaveLength(6); const firstSelectableRow = getByText('rzp01').closest('tr'); expect(firstSelectableRow).toHaveAttribute('aria-selected', 'true'); - expect(firstSelectableRow).toHaveAttribute('aria-multiselectable', 'true'); const secondSelectableRow = getByText('rzp02').closest('tr'); expect(secondSelectableRow).toHaveAttribute('aria-selected', 'true'); - expect(secondSelectableRow).toHaveAttribute('aria-multiselectable', 'true'); const thirdSelectableRow = getByText('rzp03').closest('td'); if (thirdSelectableRow) await user.click(thirdSelectableRow); expect(onSelectionChange).toHaveBeenCalledWith({ diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index 88105b99fac..5d025407466 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -368,6 +368,7 @@ exports[`
should render table 1`] = `
should render table 1`] = ` data-table-library_body="" > should render table 1`] = ` should render table 1`] = ` should render table 1`] = ` should render table 1`] = ` should render table with TableEditableCell and Bordered cells
should render table with TableEditableCell and Bordered cells data-table-library_body="" > should render table with TableEditableCell and Bordered cells should render table with comfortable rowDensity 1`] = ` data-blade-component="table" >
should render table with comfortable rowDensity 1`] = ` data-table-library_body="" > should render table with comfortable rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` data-blade-component="table" >
should render table with compact rowDensity 1`] = ` data-table-library_body="" > should render table with compact rowDensity 1`] = ` should render table with isRefreshing 1`] = `
should render table with isRefreshing 1`] = ` data-table-library_body="" > should render table with isRefreshing 1`] = ` should render table with showStripedRows 1`] = ` data-blade-component="table" >
should render table with showStripedRows 1`] = ` data-table-library_body="" > should render table with showStripedRows 1`] = ` should render table with sticky header, footer & first column data-blade-component="table" >
should render table with sticky header, footer & first column data-table-library_body="" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column