update aria attributes

razorpay · Sep 6, 2024 · d202a9f · d202a9f
1 parent f886d21
commit d202a9f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 31 deletions.
diff --git 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<TableProps<unknown>['selectionType']>,
@@ -499,6 +500,7 @@ const _Table = <Item,>({
               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
@@ -327,7 +327,7 @@ const _TableRow = <Item,>({
       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
@@ -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('<Table />', () => {
   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(
       <Table
         data={{ nodes: nodes.slice(0, 5) }}
         selectionType="multiple"
@@ -828,6 +828,7 @@ describe('<Table />', () => {
       </Table>,
     );
 
+    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('<Table />', () => {
     );
     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('<Table />', () => {
     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
@@ -368,6 +368,7 @@ exports[`<Table /> should render table 1`] = `
       </div>
     </div>
     <table
+      aria-multiselectable="false"
       class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
@@ -501,7 +502,6 @@ exports[`<Table /> should render table 1`] = `
         data-table-library_body=""
       >
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -667,7 +667,6 @@ exports[`<Table /> should render table 1`] = `
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -833,7 +832,6 @@ exports[`<Table /> should render table 1`] = `
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -999,7 +997,6 @@ exports[`<Table /> should render table 1`] = `
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -1165,7 +1162,6 @@ exports[`<Table /> should render table 1`] = `
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c11 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -2099,6 +2095,7 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
       </div>
     </div>
     <table
+      aria-multiselectable="false"
       class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
@@ -2232,7 +2229,6 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
         data-table-library_body=""
       >
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -2434,7 +2430,6 @@ exports[`<Table /> should render table with TableEditableCell and Bordered cells
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -3042,6 +3037,7 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
     data-blade-component="table"
   >
     <table
+      aria-multiselectable="false"
       class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
@@ -3175,7 +3171,6 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
         data-table-library_body=""
       >
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -3341,7 +3336,6 @@ exports[`<Table /> should render table with comfortable rowDensity 1`] = `
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -3913,6 +3907,7 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
     data-blade-component="table"
   >
     <table
+      aria-multiselectable="false"
       class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
@@ -4046,7 +4041,6 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
         data-table-library_body=""
       >
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -4212,7 +4206,6 @@ exports[`<Table /> should render table with compact rowDensity 1`] = `
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -4983,6 +4976,7 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
       </div>
     </div>
     <table
+      aria-multiselectable="false"
       class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
@@ -5116,7 +5110,6 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
         data-table-library_body=""
       >
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -5282,7 +5275,6 @@ exports[`<Table /> should render table with isRefreshing 1`] = `
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c10 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -5859,6 +5851,7 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
     data-blade-component="table"
   >
     <table
+      aria-multiselectable="false"
       class="css-8lcbdy-Table"
       data-blade-component="table"
       data-table-library_table=""
@@ -5992,7 +5985,6 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
         data-table-library_body=""
       >
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -6158,7 +6150,6 @@ exports[`<Table /> should render table with showStripedRows 1`] = `
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c6 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -6734,6 +6725,7 @@ exports[`<Table /> should render table with sticky header, footer & first column
     data-blade-component="table"
   >
     <table
+      aria-multiselectable="false"
       class="c1 css-j8ql1d-Table"
       data-blade-component="table"
       data-table-library_table=""
@@ -6867,7 +6859,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
         data-table-library_body=""
       >
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -7033,7 +7024,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -7199,7 +7189,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -7365,7 +7354,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -7531,7 +7519,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -7697,7 +7684,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -7863,7 +7849,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -8029,7 +8014,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -8195,7 +8179,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"
@@ -8361,7 +8344,6 @@ exports[`<Table /> should render table with sticky header, footer & first column
           </td>
         </tr>
         <tr
-          aria-multiselectable="false"
           aria-selected="false"
           class="tr tr-body c7 clickable css-1rzx1gz-getRowContainerStyle-Row"
           data-blade-component="table-row"