[EuiDataGrid] Provide row elements to wrap cells

CHANGELOG.md

@@ -9,6 +9,8 @@
 **Bug fixes**
 
 - Fixed styling of `align: center` for mobile version of `EuiTableRowCell` ([#5323](https://github.com/elastic/eui/pull/5323))
+- Fixed an accessibility issue where `EuiDataGrid` cells weren't owned by `role=row` elements ([#5285](https://github.com/elastic/eui/pull/5285))
+- Fixed `endDateControl` `className` in `EuiDatePickerRange` ([#5329](https://github.com/elastic/eui/pull/5329))
 
 **Breaking changes**
 
@@ -21,10 +23,6 @@
 - Removed `makeId` ([#5323](https://github.com/elastic/eui/pull/5323))
 - Removed mobile-only props from `EuiTableRowCell` ([#5323](https://github.com/elastic/eui/pull/5323))
 
-**Bug fixes**
-
-- Fixed `endDateControl` `className` in `EuiDatePickerRange` ([#5329](https://github.com/elastic/eui/pull/5329))
-
 ## [`40.1.0`](https://github.com/elastic/eui/tree/v40.1.0)
 
 - Added styling support for `valign` prop on `EuiTableRowCell` ([#5283](https://github.com/elastic/eui/pull/5283))

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,15 +11,6 @@ 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`,
   ];
 
   return [

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

@@ -1037,6 +1037,8 @@ Array [
             tabindex="0"
           >
             <div
+              data-itemsrendered=""
+              data-test-subj="euiDataGridBody"
               style="width:100%;height:100%;overflow:hidden"
             >
               <div
@@ -1433,6 +1435,8 @@ Array [
             tabindex="0"
           >
             <div
+              data-itemsrendered=""
+              data-test-subj="euiDataGridBody"
               style="width:100%;height:100%;overflow:hidden"
             >
               <div
@@ -2132,6 +2136,8 @@ Array [
             tabindex="0"
           >
             <div
+              data-itemsrendered=""
+              data-test-subj="euiDataGridBody"
               style="width:100%;height:100%;overflow:hidden"
             >
               <div
@@ -2527,6 +2533,8 @@ Array [
             tabindex="0"
           >
             <div
+              data-itemsrendered=""
+              data-test-subj="euiDataGridBody"
               style="width:100%;height:100%;overflow:hidden"
             >
               <div

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,8 @@
 
 exports[`EuiDataGridBody renders 1`] = `
 <div
+  data-itemsrendered=""
+  data-test-subj="euiDataGridBody"
   style="width:100%;height:100%;overflow:hidden"
 >
   <div

src/components/datagrid/body/data_grid_body.tsx

@@ -44,8 +44,11 @@ import {
 import {
   EuiDataGridBodyProps,
   EuiDataGridInMemoryValues,
+  EuiDataGridRowManager,
   EuiDataGridSchemaDetector,
 } from '../data_grid_types';
+import { makeRowManager } from './data_grid_row_manager';
+import { keysOf } from '../../common';
 
 export const VIRTUALIZED_CONTAINER_CLASS = 'euiDataGrid__virtualized';
 
@@ -72,6 +75,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
     rowHeightsOptions,
     getRowHeight,
     rowHeightUtils,
+    rowManager,
   } = data;
 
   const { headerRowHeight } = useContext(DataGridWrapperRowsContext);
@@ -139,6 +143,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
         getRowHeight={getRowHeight}
         rowHeightsOptions={rowHeightsOptions}
         rowHeightUtils={rowHeightUtils}
+        rowManager={rowManager}
         style={{
           ...style,
           top: `${parseFloat(style.top as string) + headerRowHeight}px`,
@@ -166,6 +171,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
         rowHeightsOptions={rowHeightsOptions}
         getRowHeight={getRowHeight}
         rowHeightUtils={rowHeightUtils}
+        rowManager={rowManager}
         style={{
           ...style,
           top: `${parseFloat(style.top as string) + headerRowHeight}px`,
@@ -203,6 +209,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
         rowHeightsOptions={rowHeightsOptions}
         getRowHeight={getRowHeight}
         rowHeightUtils={rowHeightUtils}
+        rowManager={rowManager}
         style={{
           ...style,
           top: `${parseFloat(style.top as string) + headerRowHeight}px`,
@@ -616,6 +623,14 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const wrapperDimensions = useResizeObserver(wrapperRef.current);
 
+  const innerGridRef = useRef<HTMLDivElement | null>(null);
+
+  // useState instead of useMemo as React reserves the right to drop memoized
+  // values in the future, and that would be very bad here
+  const [rowManager] = useState<EuiDataGridRowManager>(() =>
+    makeRowManager(innerGridRef)
+  );
+
   // reset height constraint when rowCount changes
   useEffect(() => {
     setHeight(undefined);
@@ -673,13 +688,27 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     finalWidth = window.innerWidth;
   }
 
+  const [dataItemsRendered, setDataItemsRendered] = useState('');
+  const setItemsRendered = useCallback<
+    NonNullable<VariableSizeGridProps['onItemsRendered']>
+  >(
+    (itemsRendered) => {
+      const keys = keysOf(itemsRendered);
+      const pairs = keys.sort().map((key) => `${key}=${itemsRendered[key]}`);
+      setDataItemsRendered(pairs.join());
+    },
+    [setDataItemsRendered]
+  );
+
   return (
     <EuiMutationObserver
       observerOptions={{ subtree: true, childList: true }}
       onMutation={preventTabbing}
     >
       {(mutationRef) => (
         <div
+          data-test-subj="euiDataGridBody"
+          data-itemsrendered={dataItemsRendered}
           style={{ width: '100%', height: '100%', overflow: 'hidden' }}
           ref={(el) => {
             wrapperRef.current = el;
@@ -694,6 +723,8 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
                 {...(virtualizationOptions ? virtualizationOptions : {})}
                 ref={setGridRef}
                 innerElementType={InnerElement}
+                onItemsRendered={setItemsRendered}
+                innerRef={innerGridRef}
                 className={VIRTUALIZED_CONTAINER_CLASS}
                 columnCount={
                   leadingControlColumns.length +
@@ -724,6 +755,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
                   interactiveCellId,
                   rowHeightsOptions,
                   rowHeightUtils,
+                  rowManager,
                 }}
                 rowCount={
                   IS_JEST_ENVIRONMENT || headerRowHeight > 0

src/components/datagrid/body/data_grid_cell.tsx

@@ -18,6 +18,7 @@ import React, {
   memo,
   MutableRefObject,
 } from 'react';
+import { createPortal } from 'react-dom';
 import tabbable from 'tabbable';
 import { keys } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
@@ -33,6 +34,7 @@ import {
 } from '../data_grid_types';
 import { EuiDataGridCellButtons } from './data_grid_cell_buttons';
 import { EuiDataGridCellPopover } from './data_grid_cell_popover';
+import { IS_JEST_ENVIRONMENT } from '../../../test';
 
 const EuiDataGridCellContent: FunctionComponent<
   EuiDataGridCellValueProps & {
@@ -145,6 +147,7 @@ export class EuiDataGridCell extends Component<
   };
 
   setCellRef = (ref: HTMLDivElement | null) => {
+    // save the reference
     this.cellRef.current = ref;
 
     // watch the first cell for size changes and use that to re-compute row heights
@@ -365,9 +368,11 @@ export class EuiDataGridCell extends Component<
       className,
       column,
       style,
+      rowHeightsOptions,
+      rowManager,
       ...rest
     } = this.props;
-    const { rowIndex, rowHeightsOptions } = rest;
+    const { rowIndex } = rest;
 
     const showCellButtons =
       this.state.isFocused ||
@@ -556,7 +561,7 @@ export class EuiDataGridCell extends Component<
       }
     }
 
-    return (
+    const content = (
       <div
         role="gridcell"
         tabIndex={
@@ -578,5 +583,9 @@ export class EuiDataGridCell extends Component<
         {innerContent}
       </div>
     );
+
+    return rowManager && !IS_JEST_ENVIRONMENT
+      ? createPortal(content, rowManager.getRow(rowIndex))
+      : content;
   }
 }

src/components/datagrid/body/data_grid_footer_row.test.tsx

@@ -30,7 +30,7 @@ describe('EuiDataGridFooterRow', () => {
     expect(component).toMatchInlineSnapshot(`
       <div
         className="euiDataGridRow euiDataGridFooter"
-        data-test-subj="dataGridRow"
+        data-test-subj="dataGridRow dataGridFooterRow"
         role="row"
       >
         <EuiDataGridCell
@@ -83,7 +83,7 @@ describe('EuiDataGridFooterRow', () => {
     expect(component).toMatchInlineSnapshot(`
       <div
         className="euiDataGridRow euiDataGridFooter"
-        data-test-subj="dataGridRow"
+        data-test-subj="dataGridRow dataGridFooterRow"
         role="row"
       >
         <EuiDataGridCell
@@ -127,7 +127,7 @@ describe('EuiDataGridFooterRow', () => {
     expect(component).toMatchInlineSnapshot(`
       <div
         className="euiDataGridRow euiDataGridFooter"
-        data-test-subj="dataGridRow"
+        data-test-subj="dataGridRow dataGridFooterRow"
         role="row"
       >
         <EuiDataGridCell

src/components/datagrid/body/data_grid_footer_row.tsx

@@ -38,7 +38,11 @@ const EuiDataGridFooterRow = memo(
         'euiDataGridFooter',
         className
       );
-      const dataTestSubj = classnames('dataGridRow', _dataTestSubj);
+      const dataTestSubj = classnames(
+        'dataGridRow',
+        'dataGridFooterRow',
+        _dataTestSubj
+      );
 
       return (
         <div

src/components/datagrid/body/data_grid_row_manager.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { RefObject } from 'react';
+import { EuiDataGridRowManager } from '../data_grid_types';
+
+export const makeRowManager = (
+  containerRef: RefObject<HTMLDivElement>
+): EuiDataGridRowManager => {
+  const rowIdToElements = new Map<number, HTMLDivElement>();
+
+  return {
+    reset() {
+      rowIdToElements.clear();
+    },
+    getRow(rowIndex) {
+      let rowElement = rowIdToElements.get(rowIndex);
+
+      if (rowElement == null) {
+        rowElement = document.createElement('div');
+        rowElement.setAttribute('role', 'row');
+        rowElement.classList.add('euiDataGridRow');
+        rowIdToElements.set(rowIndex, rowElement);
+
+        // add the element to the wrapping container
+        containerRef.current?.appendChild(rowElement);
+
+        // watch the row's children, if they all disappear then remove this row
+        const observer = new MutationObserver((records) => {
+          if ((records[0].target as HTMLElement).childElementCount === 0) {
+            observer.disconnect();
+            rowElement?.remove();
+            rowIdToElements.delete(rowIndex);
+          }
+        });
+        observer.observe(rowElement, { childList: true });
+      }
+
+      return rowElement;
+    },
+  };
+};