[EuiDataGrid] Provide row elements to wrap cells (#5285)

* Provide rows for datagrid cells to be owned by * changelog * undoing things * working except virtualized container * working row wrapper implementation * Create datagrid row elements on-demand and render cells via portals * Provide rows for datagrid cells to be owned by * changelog * undoing things * working except virtualized container * working row wrapper implementation * Create datagrid row elements on-demand and render cells via portals * Small style cleanup * updated changelog * fixing a bad changelog merge * oh that style was important * Update src/components/datagrid/body/data_grid_row_manager.ts Co-authored-by: Constance <[email protected]> * Update src/components/datagrid/data_grid_types.ts Co-authored-by: Constance <[email protected]> * Ensure unique ID in combobox with prepended or appended labels (#5229) * Making an explicit check for ID prop in EUI Combobox * Checking for a user-passed ID prop * If no user-passed ID, we'll use the `rootId()` class method to set one * Prepend and append props need an ID to relate label to the input * Adding example for Combobox with prepended label * Confirmed the label `for` attribute is referencing input `id` * Added styles to round the edges of the child `<div>` when we prepend a label * Bumped package.json * Adding CHANGELOG entry and bumping version * Update combo_box.tsx * Updating styles to match other forms with prepend and apppend. * Finishing Combobox CSS and test updates * Simplified the Amsterdam overrides for prepended / appended labels * Added conditional classes to `combo_box.tsx` * Added unit tests for user passed ID, prepended and appended classes * Reordering props in child component. * Final adjustment to ID check in ComboBox * Final updates to styling and documentation * Added CSS rules for compressed, prepend and append border radius * Updated the Display Toggles to include append * Removed a duplicated instruction paragraph * Simplified the logic for a unique ID in combobox.ts * Adding Combobox unique ID to master changelog * Updated Form Control Layout SCSS * The borders were still rounded with prepend and append enabled * Added two more rules to make borders square for full height and compressed * Move to _combo_box.scss Co-authored-by: cchaos <[email protected]> * update i18ntokens * 40.0.0 * Updated documentation. * Add combined Jest+Cypress code coverage reports (#5262) * Install Cypress code coverage dependencies * Set up required babel+istanbul config * Set up Cypress code coverage config @see https://github.com/cypress-io/code-coverage#instrument-unit-tests * Add script for combining cypress & jest code coverage -into a single json & html report * Misc cleanup/ignores - Ignore new `.nyc_output` dir generated by cypress/istanbul - Improve Jest config collectCoverageFrom !ignores: - DRY out component+services folder patterns with a {,} glob - Ignore new Cypress .spec files and .testenv files for jest coverage - eslintignore the cypress folder, since they're all .js anyway and it has a decent amount of idiosyncracies + cleanup unused eslint-disable + cleanup cypress comment boilerplate + remove unused paths from webpack config * Add wiki documentation * [PR feedback] Move nyc config to own file * [PR feedback] Switch combine coverage script to .sh * [EuiMarkdownEditor] Add `remark-breaks` and line break plugin (#5272) * Add remark-breaks and line break plugin to MarkdownEditor * Update changelog * [Docs] Separated out Borders to its own page & [EuiTableRowCell] fixes (#5283) * Moved Border tokens to its own page * Figured out a way to get subsections in the sidenav working * Added the new `_values` under `customizing/` * [EuiTableRowCell] Actually support `valign` property manually * [EuiTable*] Fixing some props and mobile options * Slightly better responsive table styles * Fix CL from #5272 * [Docs] Update EuiDatePicker types (#5318) * omit unsupported types * resolve console errors * CL * [Cypress] Add flakey test retries + harden intermittent context menu failures (#5317) * Add Cypress failed test retries to CI run mode * Increase cy.wait on flaky context menu tests (just in case) * More hardening * [Docs] Fix Colors guidelines (#5316) * use useJsonVars * use variable * Update dependency @elastic/charts to ^38.1.0 (#5321) * PR feedback * Added a cypress test for datagrid row rendering * Revert changes(?) to docs/ * revert changelog reformats * re-ignore a couple datagrid example pages when running a11y tests * Alternate way to know if the datagrid cells have rendered * PR feedback * changelog Co-authored-by: Constance <[email protected]> Co-authored-by: Trevor Pierce <[email protected]> Co-authored-by: cchaos <[email protected]> Co-authored-by: ian moersen <[email protected]> Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Greg Thompson <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
elastic · Nov 5, 2021 · 51cfbb7 · 51cfbb7
1 parent 6eb3b6f
commit 51cfbb7
Show file tree

Hide file tree

Showing 18 changed files with 255 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed an `EuiDataGrid` race condition where grid rows had incorrect heights if loaded in before CSS ([#5284](https://github.com/elastic/eui/pull/5284))
+- Fixed an accessibility issue where `EuiDataGrid` cells weren't owned by `role=row` elements ([#5285](https://github.com/elastic/eui/pull/5285))
 
 ## [`41.0.0`](https://github.com/elastic/eui/tree/v41.0.0)
 

diff --git a/package.json b/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",

diff --git a/scripts/a11y-testing.js b/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`,
   ];

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/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"

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -1,4 +1,5 @@
 .euiDataGridRow {
+  // needed for footer cells to correctly position
   display: flex;
 }
 

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap b/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"

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/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]}