[EuiDataGrid] Provide row elements to wrap cells

CHANGELOG.md

@@ -3,6 +3,10 @@
 - Updated `tokenKeyword` to match the definition of keyword field type ([#5251](https://github.com/elastic/eui/pull/5251))
 - Added `element`, `buttonElement`, and `arrowProps` props to further customize `EuiAccordion` ([#5258](https://github.com/elastic/eui/pull/5258))
 
+**Bug fixes**
+
+- Fixed an accessibility issue where `EuiDataGrid` cells weren't owned by `role=row` elements ([#5213](https://github.com/elastic/eui/pull/5285))
+
 **Breaking changes**
 
 - Renamed `tokenKeyword` icon to `tokenTag` in `EuiToken` ([#5251](https://github.com/elastic/eui/pull/5251))

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/_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_cell.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`EuiDataGridCell renders 1`] = `
 <EuiDataGridCell
   colIndex={0}
   columnId="someColumn"
+  id="cell"
   interactiveCellId="someId"
   isExpandable={true}
   popoverContent={[Function]}
@@ -53,6 +54,7 @@ exports[`EuiDataGridCell renders 1`] = `
         <Memo()
           colIndex={0}
           columnId="someColumn"
+          id="cell"
           isDetails={false}
           isExpandable={true}
           isExpanded={false}
@@ -86,6 +88,7 @@ exports[`EuiDataGridCell renders 1`] = `
             <renderCellValue
               columnId="someColumn"
               data-test-subj="cell-content"
+              id="cell"
               isDetails={false}
               isExpandable={true}
               isExpanded={false}

src/components/datagrid/body/data_grid_body.tsx

@@ -44,8 +44,10 @@ import {
 import {
   EuiDataGridBodyProps,
   EuiDataGridInMemoryValues,
+  EuiDataGridRowManager,
   EuiDataGridSchemaDetector,
 } from '../data_grid_types';
+import { makeRowManager } from './data_grid_row_manager';
 
 export const VIRTUALIZED_CONTAINER_CLASS = 'euiDataGrid__virtualized';
 
@@ -72,6 +74,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
     rowHeightsOptions,
     getRowHeight,
     rowHeightUtils,
+    rowManager,
   } = data;
 
   const { headerRowHeight } = useContext(DataGridWrapperRowsContext);
@@ -139,6 +142,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 +170,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 +208,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 +622,11 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const wrapperDimensions = useResizeObserver(wrapperRef.current);
 
+  const innerGridRef = useRef<HTMLDivElement | null>(null);
+  const [rowManager] = useState<EuiDataGridRowManager>(() =>
+    makeRowManager(innerGridRef)
+  );
+
   // reset height constraint when rowCount changes
   useEffect(() => {
     setHeight(wrapperRef.current!.getBoundingClientRect().height);
@@ -694,6 +705,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
                 {...(virtualizationOptions ? virtualizationOptions : {})}
                 ref={setGridRef}
                 innerElementType={InnerElement}
+                innerRef={innerGridRef}
                 className={VIRTUALIZED_CONTAINER_CLASS}
                 columnCount={
                   leadingControlColumns.length +
@@ -724,6 +736,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
                   interactiveCellId,
                   rowHeightsOptions,
                   rowHeightUtils,
+                  rowManager,
                 }}
                 rowCount={
                   IS_JEST_ENVIRONMENT || headerRowHeight > 0

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

@@ -15,6 +15,7 @@ import { EuiDataGridCell } from './data_grid_cell';
 
 describe('EuiDataGridCell', () => {
   const requiredProps = {
+    id: 'cell',
     rowIndex: 0,
     visibleRowIndex: 0,
     colIndex: 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
@@ -404,9 +407,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 ||
@@ -595,7 +600,7 @@ export class EuiDataGridCell extends Component<
       }
     }
 
-    return (
+    const content = (
       <div
         role="gridcell"
         tabIndex={
@@ -617,5 +622,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_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(rowId) {
+      let rowElement = rowIdToElements.get(rowId);
+
+      if (rowElement == null) {
+        rowElement = document.createElement('div');
+        rowElement.setAttribute('role', 'row');
+        rowElement.classList.add('euiDataGridRow');
+        rowIdToElements.set(rowId, 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(rowId);
+          }
+        });
+        observer.observe(rowElement, { childList: true });
+      }
+
+      return rowElement;
+    },
+  };
+};

src/components/datagrid/data_grid.tsx

@@ -61,9 +61,7 @@ import {
   EuiDataGridStyleRowHover,
 } from './data_grid_types';
 import { RowHeightUtils } from './row_height_utils';
-
-// Used to short-circuit some async browser behaviour that is difficult to account for in tests
-const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
+import { IS_JEST_ENVIRONMENT } from '../../test';
 
 // Each gridStyle object above sets a specific CSS select to .euiGrid
 const fontSizesToClassMap: { [size in EuiDataGridStyleFontSizes]: string } = {

src/components/datagrid/data_grid_types.ts

@@ -383,6 +383,7 @@ export interface EuiDataGridCellProps {
   style?: React.CSSProperties;
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
   rowHeightUtils?: RowHeightUtils;
+  rowManager?: EuiDataGridRowManager;
 }
 
 export interface EuiDataGridCellState {
@@ -396,7 +397,7 @@ export interface EuiDataGridCellState {
 
 export type EuiDataGridCellValueProps = Omit<
   EuiDataGridCellProps,
-  'width' | 'interactiveCellId' | 'popoverContent'
+  'width' | 'interactiveCellId' | 'popoverContent' | 'rowManager'
 >;
 export interface EuiDataGridControlColumn {
   /**
@@ -724,3 +725,8 @@ export interface EuiDataGridRowHeightsOptions {
    */
   lineHeight?: string;
 }
+
+export interface EuiDataGridRowManager {
+  reset(): void;
+  getRow(rowId: number): HTMLDivElement;
+}

src/test/index.ts

@@ -14,3 +14,4 @@ export {
   stopThrowingReactWarnings,
 } from './react_warnings';
 export { sleep } from './sleep';
+export { IS_JEST_ENVIRONMENT } from './is_jest';

src/test/is_jest.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');