[EuiDataGrid] Change header actions trigger element and enable intera…

…ctive children (#7898) Co-authored-by: Cee Chen <[email protected]>
elastic · Sep 3, 2024 · 57bea12 · 57bea12
1 parent 522d366
commit 57bea12
Show file tree

Hide file tree

Showing 30 changed files with 818 additions and 582 deletions.
diff --git a/.../reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/.../reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
diff --git a/...oki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png b/...oki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png
diff --git a/...loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Height_Line_Count.png b/...loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Height_Line_Count.png
diff --git a/...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png b/...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png
diff --git a/...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Row_Height.png b/...s/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Row_Height.png
diff --git a/...i/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/...i/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
diff --git a/...loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png b/...loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Row_Heights.png
diff --git a/....loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Height_Line_Count.png b/....loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Height_Line_Count.png
diff --git a/...es/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png b/...es/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png
diff --git a/...es/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Row_Height.png b/...es/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Row_Height.png
diff --git a/packages/eui/changelogs/upcoming/7898.md b/packages/eui/changelogs/upcoming/7898.md
@@ -0,0 +1,6 @@
+- Updated `EuiDataGrid` to support interactive header cell content
+
+**Accessibility**
+
+- Improved the keyboard navigation and screen reader output for `EuiDataGrid` header cells
+
diff --git a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
diff --git a/packages/eui/src/components/datagrid/_data_grid_data_row.scss b/packages/eui/src/components/datagrid/_data_grid_data_row.scss
@@ -45,6 +45,11 @@
     @include euiDataGridCellFocus;
   }
 
+  // needed to override global style
+  &:focus:focus-visible {
+    outline: none;
+  }
+
   // On hover
   &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
     // Color the actions and focus ring grayscale on hover

diff --git a/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
     role="row"
   >
     <div
+      aria-describedby="euiDataGridCellHeader_generated-id_sorting"
       class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions"
       data-gridcell-column-id="columnA"
       data-gridcell-column-index="0"
@@ -25,21 +26,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
         data-test-subj="dataGridColumnResizer"
         style="margin-right: 0px;"
       />
-      <button
-        aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
-        class="euiDataGridHeaderCell__button"
-        data-euigrid-tab-managed="true"
-        data-test-subj="dataGridHeaderCellActionButton-columnA"
-        tabindex="-1"
+      <div
+        class="euiDataGridHeaderCell__content"
+        title="columnA"
       >
-        <div
-          class="euiDataGridHeaderCell__content"
-          title="columnA"
-        >
-          columnA
-        </div>
-        <div
-          class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+        columnA
+      </div>
+      <div
+        class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+      >
+        <button
+          aria-label="Press the Enter key to view this column's actions"
+          class="euiDataGridHeaderCell__button css-wvewty"
+          data-euigrid-tab-managed="true"
+          data-test-subj="dataGridHeaderCellActionButton-columnA"
+          tabindex="-1"
         >
           <div
             class="euiDataGridHeaderCell__icon"
@@ -49,20 +50,11 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
               data-euiicon-type="boxesVertical"
             />
           </div>
-        </div>
-      </button>
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_sorting"
-      />
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_actions"
-      >
-        Click to view column header actions
-      </p>
+        </button>
+      </div>
     </div>
     <div
+      aria-describedby="euiDataGridCellHeader_generated-id_sorting"
       class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions"
       data-gridcell-column-id="columnB"
       data-gridcell-column-index="1"
@@ -78,21 +70,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
         data-test-subj="dataGridColumnResizer"
         style="margin-right: 0px;"
       />
-      <button
-        aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
-        class="euiDataGridHeaderCell__button"
-        data-euigrid-tab-managed="true"
-        data-test-subj="dataGridHeaderCellActionButton-columnB"
-        tabindex="-1"
+      <div
+        class="euiDataGridHeaderCell__content"
+        title="columnB"
       >
-        <div
-          class="euiDataGridHeaderCell__content"
-          title="columnB"
-        >
-          columnB
-        </div>
-        <div
-          class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+        columnB
+      </div>
+      <div
+        class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+      >
+        <button
+          aria-label="Press the Enter key to view this column's actions"
+          class="euiDataGridHeaderCell__button css-wvewty"
+          data-euigrid-tab-managed="true"
+          data-test-subj="dataGridHeaderCellActionButton-columnB"
+          tabindex="-1"
         >
           <div
             class="euiDataGridHeaderCell__icon"
@@ -102,18 +94,8 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
               data-euiicon-type="boxesVertical"
             />
           </div>
-        </div>
-      </button>
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_sorting"
-      />
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_actions"
-      >
-        Click to view column header actions
-      </p>
+        </button>
+      </div>
     </div>
   </div>
   <div

diff --git a/...s/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/...s/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
       role="row"
     >
       <div
+        aria-describedby="euiDataGridCellHeader_generated-id_sorting"
         class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions"
         data-gridcell-column-id="columnA"
         data-gridcell-column-index="0"
@@ -29,21 +30,21 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           data-test-subj="dataGridColumnResizer"
           style="margin-right: 0px;"
         />
-        <button
-          aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
-          class="euiDataGridHeaderCell__button"
-          data-euigrid-tab-managed="true"
-          data-test-subj="dataGridHeaderCellActionButton-columnA"
-          tabindex="-1"
+        <div
+          class="euiDataGridHeaderCell__content"
+          title="columnA"
         >
-          <div
-            class="euiDataGridHeaderCell__content"
-            title="columnA"
-          >
-            columnA
-          </div>
-          <div
-            class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+          columnA
+        </div>
+        <div
+          class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+        >
+          <button
+            aria-label="Press the Enter key to view this column's actions"
+            class="euiDataGridHeaderCell__button css-wvewty"
+            data-euigrid-tab-managed="true"
+            data-test-subj="dataGridHeaderCellActionButton-columnA"
+            tabindex="-1"
           >
             <div
               class="euiDataGridHeaderCell__icon"
@@ -53,20 +54,11 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
                 data-euiicon-type="boxesVertical"
               />
             </div>
-          </div>
-        </button>
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_sorting"
-        />
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_actions"
-        >
-          Click to view column header actions
-        </p>
+          </button>
+        </div>
       </div>
       <div
+        aria-describedby="euiDataGridCellHeader_generated-id_sorting"
         class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions"
         data-gridcell-column-id="columnB"
         data-gridcell-column-index="1"
@@ -82,21 +74,21 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           data-test-subj="dataGridColumnResizer"
           style="margin-right: 0px;"
         />
-        <button
-          aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
-          class="euiDataGridHeaderCell__button"
-          data-euigrid-tab-managed="true"
-          data-test-subj="dataGridHeaderCellActionButton-columnB"
-          tabindex="-1"
+        <div
+          class="euiDataGridHeaderCell__content"
+          title="columnB"
         >
-          <div
-            class="euiDataGridHeaderCell__content"
-            title="columnB"
-          >
-            columnB
-          </div>
-          <div
-            class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+          columnB
+        </div>
+        <div
+          class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+        >
+          <button
+            aria-label="Press the Enter key to view this column's actions"
+            class="euiDataGridHeaderCell__button css-wvewty"
+            data-euigrid-tab-managed="true"
+            data-test-subj="dataGridHeaderCellActionButton-columnB"
+            tabindex="-1"
           >
             <div
               class="euiDataGridHeaderCell__icon"
@@ -106,18 +98,8 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
                 data-euiicon-type="boxesVertical"
               />
             </div>
-          </div>
-        </button>
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_sorting"
-        />
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_actions"
-        >
-          Click to view column header actions
-        </p>
+          </button>
+        </div>
       </div>
     </div>
     <div

diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx
@@ -225,7 +225,7 @@ describe('EuiDataGridCellPopover', () => {
       openCellPopover('A');
       cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
         .should('have.css', 'left', '1px')
-        .should('have.css', 'top', '73px')
+        .should('have.css', 'top', '80px')
         .should('have.css', 'width', '112px');
     });
 
@@ -235,7 +235,7 @@ describe('EuiDataGridCellPopover', () => {
       openCellPopover('B');
       cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
         .should('have.css', 'left', '109px')
-        .should('have.css', 'top', '73px')
+        .should('have.css', 'top', '80px')
         .should('have.css', 'width', '375px');
     });
 
@@ -246,7 +246,7 @@ describe('EuiDataGridCellPopover', () => {
 
       // Matchers used due to subpixel rendering shenanigans
       cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
-        .should('have.css', 'top', '73px')
+        .should('have.css', 'top', '80px')
         .should('have.css', 'left')
         .and('match', /^255[.\d]+px$/);
       cy.get('[data-test-subj="euiDataGridExpansionPopover"]')