Repository: jbetancur/react-data-table-component
Pull request #1073 (2022-06-17 05:30:14)

Fixed the table cell aria role to cell.
Each element with role="cell" MUST be nested in a container element with role="row". [Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/row_role)
role=gridcell is only acceptable if we use role = grid in the parent. If we use role= table, we need to use the roll = cell in the table cell.

netlify[bot]: ### <span aria-hidden="true">👷</span> Deploy Preview for *react-data-table-component* processing.


|  Name | Link |
|---------------------------------|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 708fba42480de8514ea93261a66ad90c82dd41bc |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/react-data-table-component/deploys/62ac116779349c0009a593e2 |
stale[bot]: This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.


Patch:
diff --git a/src/DataTable/TableCell.tsx b/src/DataTable/TableCell.tsx
index aa4f429..d6c48c8 100644
--- a/src/DataTable/TableCell.tsx
+++ b/src/DataTable/TableCell.tsx
@@ -61,7 +61,7 @@ function Cell<T>({
 		<CellStyle
 			id={id}
 			data-column-id={column.id}
-			role="gridcell"
+			role="cell"
 			className={classNames}
 			data-tag={dataTag}
 			cellStyle={column.style}
diff --git a/stories/columns.stories.mdx b/stories/columns.stories.mdx
index 56f4a76..3930a9b 100644
--- a/stories/columns.stories.mdx
+++ b/stories/columns.stories.mdx
@@ -58,7 +58,7 @@ const columns = [
 
 # Column ID's
 
-Internally, `columns` require an `id` property. Particularly, if you use the `defaultSortFieldId` property and you want to defined a pre sorted columns by `id`. If you omit `id` from a column object RDT will auto genereate id's starting at 1, 2, 3 and so on... It is however recommended that you use your own `id`, which can be wither a `string` or a `number`.
+Internally, `columns` require an `id` property. Particularly, the `id` property is required if you use the `defaultSortFieldId` property and you want to define presorted columns by `id`. If you omit `id` from a column object, RDT will autogenerate `id` values starting at 1, 2, 3 and so on. It is, however, recommended that you use your own `id`, which can be either a `string` or a `number`.
 
 ```js
 const columns = [


Test patch:
diff --git a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
index a109bde..b004887 100644
--- a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -235,7 +235,7 @@ exports[`DataTable::Header header should not display with no title 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -254,7 +254,7 @@ exports[`DataTable::Header header should not display with no title 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -1375,7 +1375,7 @@ exports[`DataTable::Header should render without a header if noHeader is true 1`
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -1394,7 +1394,7 @@ exports[`DataTable::Header should render without a header if noHeader is true 1`
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -1945,7 +1945,7 @@ exports[`DataTable::Pagination should change the page position when using pagina
               data-column-id="1"
               data-tag="allowRowEvents"
               id="cell-1-1"
-              role="gridcell"
+              role="cell"
             >
               <div
                 data-tag="allowRowEvents"
@@ -2354,7 +2354,7 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -2608,7 +2608,7 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -2862,7 +2862,7 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -3116,7 +3116,7 @@ exports[`DataTable::Pagination should have the correct amount of rows when pagin
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -3417,7 +3417,7 @@ exports[`DataTable::Pagination should navigate to page 1 if the table is sorted
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -3671,7 +3671,7 @@ exports[`DataTable::Pagination should recalculate pagination position if there i
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -3925,7 +3925,7 @@ exports[`DataTable::Pagination should render correctly if pagination is enabled
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -3944,7 +3944,7 @@ exports[`DataTable::Pagination should render correctly if pagination is enabled
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -4198,7 +4198,7 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -4217,7 +4217,7 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -4471,7 +4471,7 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -4490,7 +4490,7 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -4744,7 +4744,7 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -4763,7 +4763,7 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -5017,7 +5017,7 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -5036,7 +5036,7 @@ exports[`DataTable::Pagination should render correctly when a paginationComponen
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -5290,7 +5290,7 @@ exports[`DataTable::Pagination should render correctly when paginationResetDefau
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -5540,7 +5540,7 @@ exports[`DataTable::Theming should render correctly when a custom style is appli
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -5559,7 +5559,7 @@ exports[`DataTable::Theming should render correctly when a custom style is appli
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -5813,7 +5813,7 @@ exports[`DataTable::column.style should render correctly when a style is set on
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -5832,7 +5832,7 @@ exports[`DataTable::column.style should render correctly when a style is set on
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -6086,7 +6086,7 @@ exports[`DataTable::columns should render correctly if column.center 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -6105,7 +6105,7 @@ exports[`DataTable::columns should render correctly if column.center 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -6361,7 +6361,7 @@ exports[`DataTable::columns should render correctly if column.hide is an integer
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -6380,7 +6380,7 @@ exports[`DataTable::columns should render correctly if column.hide is an integer
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -6636,7 +6636,7 @@ exports[`DataTable::columns should render correctly if column.hide lg 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -6655,7 +6655,7 @@ exports[`DataTable::columns should render correctly if column.hide lg 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -6911,7 +6911,7 @@ exports[`DataTable::columns should render correctly if column.hide md 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -6930,7 +6930,7 @@ exports[`DataTable::columns should render correctly if column.hide md 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -7186,7 +7186,7 @@ exports[`DataTable::columns should render correctly if column.hide sm 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -7205,7 +7205,7 @@ exports[`DataTable::columns should render correctly if column.hide sm 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -7455,7 +7455,7 @@ exports[`DataTable::columns should render correctly if column.maxWidth 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -7474,7 +7474,7 @@ exports[`DataTable::columns should render correctly if column.maxWidth 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -7724,7 +7724,7 @@ exports[`DataTable::columns should render correctly if column.minWidth 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -7743,7 +7743,7 @@ exports[`DataTable::columns should render correctly if column.minWidth 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -7993,7 +7993,7 @@ exports[`DataTable::columns should render correctly if column.omit is true 1`] =
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -8012,7 +8012,7 @@ exports[`DataTable::columns should render correctly if column.omit is true 1`] =
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -8266,7 +8266,7 @@ exports[`DataTable::columns should render correctly if column.right 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -8285,7 +8285,7 @@ exports[`DataTable::columns should render correctly if column.right 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -8538,7 +8538,7 @@ exports[`DataTable::columns should render correctly if column.width 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
             width="200px"
           >
             <div
@@ -8558,7 +8558,7 @@ exports[`DataTable::columns should render correctly if column.width 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
             width="200px"
           >
             <div
@@ -8809,7 +8809,7 @@ exports[`DataTable::columns should render correctly when column.allowOverflow =
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -8828,7 +8828,7 @@ exports[`DataTable::columns should render correctly when column.allowOverflow =
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -9086,7 +9086,7 @@ exports[`DataTable::columns should render correctly when column.button = true 1`
             class="c12 c6 c13 rdt_TableCell"
             data-column-id="1"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div>
               Apple
@@ -9102,7 +9102,7 @@ exports[`DataTable::columns should render correctly when column.button = true 1`
             class="c12 c6 c13 rdt_TableCell"
             data-column-id="1"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div>
               Zuchinni
@@ -9344,7 +9344,7 @@ exports[`DataTable::columns should render correctly when column.cell is set to a
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div>
               Apple
@@ -9361,7 +9361,7 @@ exports[`DataTable::columns should render correctly when column.cell is set to a
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div>
               Zuchinni
@@ -9610,7 +9610,7 @@ exports[`DataTable::columns should render correctly when column.compact = true 1
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -9629,7 +9629,7 @@ exports[`DataTable::columns should render correctly when column.compact = true 1
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -9938,7 +9938,7 @@ exports[`DataTable::columns should render correctly when column.sortable = true
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -9957,7 +9957,7 @@ exports[`DataTable::columns should render correctly when column.sortable = true
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -10207,7 +10207,7 @@ exports[`DataTable::columns should render correctly when column.wrap = true 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -10226,7 +10226,7 @@ exports[`DataTable::columns should render correctly when column.wrap = true 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -10475,7 +10475,7 @@ exports[`DataTable::columns should render correctly when ignoreRowClick = true 1
             class="c11 c6 c12 rdt_TableCell"
             data-column-id="1"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div>
               Apple
@@ -10491,7 +10491,7 @@ exports[`DataTable::columns should render correctly when ignoreRowClick = true 1
             class="c11 c6 c12 rdt_TableCell"
             data-column-id="1"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div>
               Zuchinni
@@ -10739,7 +10739,7 @@ exports[`DataTable::columns should render correctly with columns/data 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -10758,7 +10758,7 @@ exports[`DataTable::columns should render correctly with columns/data 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -11008,7 +11008,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
             style="background-color: rgba(63, 195, 128, 0.9);"
           >
             <div
@@ -11028,7 +11028,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -11278,7 +11278,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -11297,7 +11297,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -11547,7 +11547,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
             style="color: pink;"
           >
             <div
@@ -11567,7 +11567,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -11817,7 +11817,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -11836,7 +11836,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -12086,7 +12086,7 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -12105,7 +12105,7 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -12356,7 +12356,7 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -12375,7 +12375,7 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -12625,7 +12625,7 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -12644,7 +12644,7 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -12896,7 +12896,7 @@ exports[`DataTable::dense should render correctly when dense 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -12915,7 +12915,7 @@ exports[`DataTable::dense should render correctly when dense 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -13169,7 +13169,7 @@ exports[`DataTable::direction should render correctly when direction is auto 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -13188,7 +13188,7 @@ exports[`DataTable::direction should render correctly when direction is auto 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -13443,7 +13443,7 @@ exports[`DataTable::direction should render correctly when direction is ltr 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -13462,7 +13462,7 @@ exports[`DataTable::direction should render correctly when direction is ltr 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -13717,7 +13717,7 @@ exports[`DataTable::direction should render correctly when direction is rtl 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -13736,7 +13736,7 @@ exports[`DataTable::direction should render correctly when direction is rtl 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -14082,7 +14082,7 @@ exports[`DataTable::direction should render correctly when direction is rtl when
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -14111,7 +14111,7 @@ exports[`DataTable::direction should render correctly when direction is rtl when
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -14485,7 +14485,7 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -14543,7 +14543,7 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -14917,7 +14917,7 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -14975,7 +14975,7 @@ exports[`DataTable::expandableRows should expand a row if expandableRows is true
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -15370,7 +15370,7 @@ exports[`DataTable::expandableRows should not expand a row if the expander row i
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -15417,7 +15417,7 @@ exports[`DataTable::expandableRows should not expand a row if the expander row i
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -15667,7 +15667,7 @@ exports[`DataTable::expandableRows should not render expandableRows expandableRo
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -15686,7 +15686,7 @@ exports[`DataTable::expandableRows should not render expandableRows expandableRo
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -16031,7 +16031,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -16060,7 +16060,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -16430,7 +16430,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -16488,7 +16488,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRowExp
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -16851,7 +16851,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -16898,7 +16898,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -17268,7 +17268,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -17326,7 +17326,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRows i
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -17576,7 +17576,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRowsHi
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -17595,7 +17595,7 @@ exports[`DataTable::expandableRows should render correctly when expandableRowsHi
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -17852,7 +17852,7 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -17871,7 +17871,7 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -18128,7 +18128,7 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader and fix
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -18147,7 +18147,7 @@ exports[`DataTable::fixedHeader should render correctly when fixedHeader and fix
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -18410,7 +18410,7 @@ exports[`DataTable::highlightOnHover should render correctly when highlightOnHov
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -18429,7 +18429,7 @@ exports[`DataTable::highlightOnHover should render correctly when highlightOnHov
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -18683,7 +18683,7 @@ exports[`DataTable::pointerOnHover should render correctly when pointerOnHover 1
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -18702,7 +18702,7 @@ exports[`DataTable::pointerOnHover should render correctly when pointerOnHover 1
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -19996,7 +19996,7 @@ exports[`DataTable::responsive should render correctly responsive by default 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -20015,7 +20015,7 @@ exports[`DataTable::responsive should render correctly responsive by default 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -20262,7 +20262,7 @@ exports[`DataTable::responsive should render correctly when responsive=false 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -20281,7 +20281,7 @@ exports[`DataTable::responsive should render correctly when responsive=false 1`]
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -20583,7 +20583,7 @@ exports[`DataTable::selectableRows should not render a select all checkbox when
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -20612,7 +20612,7 @@ exports[`DataTable::selectableRows should not render a select all checkbox when
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -20957,7 +20957,7 @@ exports[`DataTable::selectableRows should render correctly when selectableRows i
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -20986,7 +20986,7 @@ exports[`DataTable::selectableRows should render correctly when selectableRows i
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -21364,7 +21364,7 @@ exports[`DataTable::selectableRows should render correctly when selectableRowsHi
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -21393,7 +21393,7 @@ exports[`DataTable::selectableRows should render correctly when selectableRowsHi
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -21690,7 +21690,7 @@ exports[`DataTable::sorting a custom column sorting function is used 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -21709,7 +21709,7 @@ exports[`DataTable::sorting a custom column sorting function is used 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -22006,7 +22006,7 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -22025,7 +22025,7 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -22322,7 +22322,7 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -22341,7 +22341,7 @@ exports[`DataTable::sorting should render correctly and bypass internal sort whe
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -22591,7 +22591,7 @@ exports[`DataTable::sorting should render correctly and not be sorted when a col
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -22610,7 +22610,7 @@ exports[`DataTable::sorting should render correctly and not be sorted when a col
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -22907,7 +22907,7 @@ exports[`DataTable::sorting should render correctly when a column is sorted from
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -22926,7 +22926,7 @@ exports[`DataTable::sorting should render correctly when a column is sorted from
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -23223,7 +23223,7 @@ exports[`DataTable::sorting should render correctly when a column is sorted in d
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -23242,7 +23242,7 @@ exports[`DataTable::sorting should render correctly when a column is sorted in d
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -23540,7 +23540,7 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon 1`] =
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -23559,7 +23559,7 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon 1`] =
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -23861,7 +23861,7 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon and c
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -23880,7 +23880,7 @@ exports[`DataTable::sorting should render correctly with a custom sortIcon and c
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -24193,7 +24193,7 @@ exports[`DataTable::sorting should render correctly with a default sort field an
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -24212,7 +24212,7 @@ exports[`DataTable::sorting should render correctly with a default sort field an
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -24521,7 +24521,7 @@ exports[`DataTable::sorting should render correctly with a default sort field an
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -24540,7 +24540,7 @@ exports[`DataTable::sorting should render correctly with a default sort field an
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -24852,7 +24852,7 @@ exports[`DataTable::sorting should render correctly with a defaultSortAsc = fals
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -24871,7 +24871,7 @@ exports[`DataTable::sorting should render correctly with a defaultSortAsc = fals
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -25171,7 +25171,7 @@ exports[`DataTable::sorting should sort if the column is selected and the Enter
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -25190,7 +25190,7 @@ exports[`DataTable::sorting should sort if the column is selected and the Enter
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -25469,7 +25469,7 @@ exports[`DataTable::striped should render correctly when striped 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -25488,7 +25488,7 @@ exports[`DataTable::striped should render correctly when striped 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -25913,7 +25913,7 @@ exports[`data prop changes should update state if the data prop changes 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -26060,7 +26060,7 @@ exports[`should not show the TableHead when noTableHead is true 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -26079,7 +26079,7 @@ exports[`should not show the TableHead when noTableHead is true 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -26533,7 +26533,7 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -26591,7 +26591,7 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -26961,7 +26961,7 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -27019,7 +27019,7 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -27269,7 +27269,7 @@ exports[`should render correctly when conditionalRowStyles with classNames is us
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -27288,7 +27288,7 @@ exports[`should render correctly when conditionalRowStyles with classNames is us
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -27541,7 +27541,7 @@ exports[`should render correctly when disabled 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -27560,7 +27560,7 @@ exports[`should render correctly when disabled 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-2"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -27810,7 +27810,7 @@ exports[`should render the correctly when using selector function 1`] = `
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"
@@ -28060,7 +28060,7 @@ exports[`should render the correctly when using selector function and a format f
             data-column-id="1"
             data-tag="allowRowEvents"
             id="cell-1-1"
-            role="gridcell"
+            role="cell"
           >
             <div
               data-tag="allowRowEvents"