[EuiDataGrid] Provide row elements to wrap cells

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Fixed styling of `align: center` for mobile version of `EuiTableRowCell` ([#5323](https://github.com/elastic/eui/pull/5323))
 - Fixed `endDateControl` `className` in `EuiDatePickerRange` ([#5329](https://github.com/elastic/eui/pull/5329))
 - Fixed `EuiMarkdownEditor` intercepting all drop events on the page ([#5340](https://github.com/elastic/eui/pull/5340))
+- - Fixed an accessibility issue where `EuiDataGrid` cells weren't owned by `role=row` elements ([#5285](https://github.com/elastic/eui/pull/5285))
 
 **Breaking changes**
 

package.json

@@ -32,8 +32,8 @@
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
     "test-a11y": "node ./scripts/a11y-testing",
     "test-staged": "yarn lint && node scripts/test-staged.js",
-    "test-cypress": "cross-env NODE_ENV=cypress_test cypress run-ct",
-    "test-cypress-dev": "cross-env NODE_ENV=cypress_test cypress open-ct",
+    "test-cypress": "cross-env BABEL_MODULES=false NODE_ENV=cypress_test cypress run-ct",
+    "test-cypress-dev": "cross-env BABEL_MODULES=false NODE_ENV=cypress_test cypress open-ct",
     "combine-test-coverage": "sh ./scripts/combine-coverage.sh",
     "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
     "yo-component": "yo ./generator-eui/app/component.js",

scripts/a11y-testing.js

@@ -11,13 +11,7 @@ const docsPages = async (root, page) => {
     `${root}#/forms/color-selection`,
     `${root}#/forms/date-picker`,
     `${root}#/forms/super-date-picker`,
-    `${root}#/tabular-content/data-grid`,
-    `${root}#/tabular-content/data-grid-in-memory-settings`,
-    `${root}#/tabular-content/data-grid-schemas-and-popovers`,
-    `${root}#/tabular-content/data-grid-focus`,
     `${root}#/tabular-content/data-grid-styling-and-control`,
-    `${root}#/tabular-content/data-grid-control-columns`,
-    `${root}#/tabular-content/data-grid-footer-row`,
     `${root}#/tabular-content/data-grid-virtualization`,
     `${root}#/tabular-content/data-grid-row-heights-options`,
   ];

src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -1037,6 +1037,7 @@ Array [
             tabindex="0"
           >
             <div
+              data-test-subj="euiDataGridBody"
               style="width:100%;height:100%;overflow:hidden"
             >
               <div
@@ -1130,6 +1131,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-gridcell-id="0,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:100px"
@@ -1157,6 +1159,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-gridcell-id="0,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:0px;height:34px;width:100px"
@@ -1184,6 +1187,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    data-gridcell-id="1,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:100px"
@@ -1211,6 +1215,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    data-gridcell-id="1,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:34px;height:34px;width:100px"
@@ -1238,6 +1243,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-gridcell-id="2,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:100px"
@@ -1265,6 +1271,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-gridcell-id="2,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:68px;height:34px;width:100px"
@@ -1433,6 +1440,7 @@ Array [
             tabindex="0"
           >
             <div
+              data-test-subj="euiDataGridBody"
               style="width:100%;height:100%;overflow:hidden"
             >
               <div
@@ -1556,6 +1564,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
+                    data-gridcell-id="0,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:50px"
@@ -1602,6 +1611,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell"
+                    data-gridcell-id="0,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:50px;top:0px;height:34px;width:100px"
@@ -1629,6 +1639,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell"
+                    data-gridcell-id="0,2"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:150px;top:0px;height:34px;width:100px"
@@ -1656,6 +1667,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
+                    data-gridcell-id="0,3"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:250px;top:0px;height:34px;width:50px"
@@ -1702,6 +1714,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
+                    data-gridcell-id="1,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:50px"
@@ -1748,6 +1761,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe"
+                    data-gridcell-id="1,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:50px;top:34px;height:34px;width:100px"
@@ -1775,6 +1789,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe"
+                    data-gridcell-id="1,2"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:150px;top:34px;height:34px;width:100px"
@@ -1802,6 +1817,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
+                    data-gridcell-id="1,3"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:250px;top:34px;height:34px;width:50px"
@@ -1848,6 +1864,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--firstColumn euiDataGridRowCell--controlColumn"
+                    data-gridcell-id="2,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:50px"
@@ -1894,6 +1911,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell"
+                    data-gridcell-id="2,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:50px;top:68px;height:34px;width:100px"
@@ -1921,6 +1939,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell"
+                    data-gridcell-id="2,2"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:150px;top:68px;height:34px;width:100px"
@@ -1948,6 +1967,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn euiDataGridRowCell--controlColumn"
+                    data-gridcell-id="2,3"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:250px;top:68px;height:34px;width:50px"
@@ -2132,6 +2152,7 @@ Array [
             tabindex="0"
           >
             <div
+              data-test-subj="euiDataGridBody"
               style="width:100%;height:100%;overflow:hidden"
             >
               <div
@@ -2227,6 +2248,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-gridcell-id="0,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:100px"
@@ -2254,6 +2276,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-gridcell-id="0,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:0px;height:34px;width:100px"
@@ -2281,6 +2304,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    data-gridcell-id="1,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:100px"
@@ -2308,6 +2332,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    data-gridcell-id="1,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:34px;height:34px;width:100px"
@@ -2335,6 +2360,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-gridcell-id="2,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:100px"
@@ -2362,6 +2388,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-gridcell-id="2,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:68px;height:34px;width:100px"
@@ -2527,6 +2554,7 @@ Array [
             tabindex="0"
           >
             <div
+              data-test-subj="euiDataGridBody"
               style="width:100%;height:100%;overflow:hidden"
             >
               <div
@@ -2620,6 +2648,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-gridcell-id="0,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:0px;height:34px;width:100px"
@@ -2647,6 +2676,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-gridcell-id="0,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:0px;height:34px;width:100px"
@@ -2674,6 +2704,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--firstColumn"
+                    data-gridcell-id="1,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:34px;height:34px;width:100px"
@@ -2701,6 +2732,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--stripe euiDataGridRowCell--lastColumn"
+                    data-gridcell-id="1,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:34px;height:34px;width:100px"
@@ -2728,6 +2760,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--firstColumn"
+                    data-gridcell-id="2,0"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:0;top:68px;height:34px;width:100px"
@@ -2755,6 +2788,7 @@ Array [
                   </div>
                   <div
                     class="euiDataGridRowCell euiDataGridRowCell--lastColumn"
+                    data-gridcell-id="2,1"
                     data-test-subj="dataGridRowCell"
                     role="gridcell"
                     style="position:absolute;left:100px;top:68px;height:34px;width:100px"

src/components/datagrid/_data_grid_data_row.scss

@@ -1,4 +1,5 @@
 .euiDataGridRow {
+  // needed for footer cells to correctly position
   display: flex;
 }
 

src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`EuiDataGridBody renders 1`] = `
 <div
+  data-test-subj="euiDataGridBody"
   style="width:100%;height:100%;overflow:hidden"
 >
   <div
@@ -89,6 +90,7 @@ exports[`EuiDataGridBody renders 1`] = `
       </div>
       <div
         class="euiDataGridRowCell euiDataGridRowCell--boolean euiDataGridRowCell--firstColumn"
+        data-gridcell-id="0,0"
         data-test-subj="dataGridRowCell"
         role="gridcell"
         style="position:absolute;left:0;top:0px;height:34px;width:20px"
@@ -118,6 +120,7 @@ exports[`EuiDataGridBody renders 1`] = `
       </div>
       <div
         class="euiDataGridRowCell euiDataGridRowCell--string euiDataGridRowCell--lastColumn"
+        data-gridcell-id="0,1"
         data-test-subj="dataGridRowCell"
         role="gridcell"
         style="position:absolute;left:20px;top:0px;height:34px"

src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`EuiDataGridCell renders 1`] = `
 >
   <div
     className="euiDataGridRowCell"
+    data-gridcell-id="0,0"
     data-test-subj="dataGridRowCell"
     onBlur={[Function]}
     onFocus={[Function]}