From 6516ff5f88ef292d4e94454447355956b1a2c794 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Mon, 22 Jul 2024 15:43:25 +0200
Subject: [PATCH] test: update snapshots

---
 .../__snapshots__/data_grid.test.tsx.snap     | 714 ++++++++++++------
 .../data_grid_body_custom.test.tsx.snap       | 178 +++--
 .../data_grid_body_virtualized.test.tsx.snap  | 178 +++--
 .../data_grid_header_cell.test.tsx.snap       |  89 ++-
 .../data_grid_header_cell_wrapper.test.tsx    | 560 +++++++++++++-
 5 files changed, 1307 insertions(+), 412 deletions(-)

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
index e50e7a79f1a6..ec8b678a9882 100644
--- a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -595,6 +595,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               role="row"
             >
               <div
+                aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+                aria-label="A"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="A"
                 data-gridcell-column-index="0"
@@ -606,48 +608,75 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  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-A"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                    title="A"
-                  >
-                    A
-                  </div>
-                  <div
-                    class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    class="euiDataGridHeaderCell__innerWrapper"
+                    role="group"
                   >
                     <div
-                      class="euiDataGridHeaderCell__icon"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right: 0px;"
+                    />
+                    <div
+                      class="euiDataGridHeaderCell__content"
+                      title="A"
                     >
-                      <span
-                        color="text"
-                        data-euiicon-type="boxesVertical"
-                      />
+                      A
                     </div>
+                    <div
+                      class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    >
+                      <button
+                        aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                        class="euiDataGridHeaderCell__button"
+                        data-euigrid-tab-managed="true"
+                        data-test-subj="dataGridHeaderCellActionButton-A"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="euiDataGridHeaderCell__icon"
+                        >
+                          <span
+                            color="text"
+                            data-euiicon-type="boxesVertical"
+                          />
+                        </div>
+                        <p
+                          hidden=""
+                          id="euiDataGridCellHeader_generated-id_actions"
+                        >
+                          Click to view column header actions
+                        </p>
+                      </button>
+                    </div>
+                    <p
+                      hidden=""
+                      id="euiDataGridCellHeader_generated-id_sorting"
+                    />
                   </div>
-                </button>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
                 />
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_actions"
-                >
-                  Click to view column header actions
-                </p>
               </div>
               <div
+                aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+                aria-label="B"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="B"
                 data-gridcell-column-index="1"
@@ -659,46 +688,71 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  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-B"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                    title="B"
-                  >
-                    B
-                  </div>
-                  <div
-                    class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    class="euiDataGridHeaderCell__innerWrapper"
+                    role="group"
                   >
                     <div
-                      class="euiDataGridHeaderCell__icon"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right: 0px;"
+                    />
+                    <div
+                      class="euiDataGridHeaderCell__content"
+                      title="B"
                     >
-                      <span
-                        color="text"
-                        data-euiicon-type="boxesVertical"
-                      />
+                      B
                     </div>
+                    <div
+                      class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    >
+                      <button
+                        aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                        class="euiDataGridHeaderCell__button"
+                        data-euigrid-tab-managed="true"
+                        data-test-subj="dataGridHeaderCellActionButton-B"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="euiDataGridHeaderCell__icon"
+                        >
+                          <span
+                            color="text"
+                            data-euiicon-type="boxesVertical"
+                          />
+                        </div>
+                        <p
+                          hidden=""
+                          id="euiDataGridCellHeader_generated-id_actions"
+                        >
+                          Click to view column header actions
+                        </p>
+                      </button>
+                    </div>
+                    <p
+                      hidden=""
+                      id="euiDataGridCellHeader_generated-id_sorting"
+                    />
                   </div>
-                </button>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
                 />
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_actions"
-                >
-                  Click to view column header actions
-                </p>
               </div>
             </div>
             <div
@@ -1041,6 +1095,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 </div>
               </div>
               <div
+                aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+                aria-label="A"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="A"
                 data-gridcell-column-index="1"
@@ -1052,48 +1108,75 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  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-A"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                    title="A"
-                  >
-                    A
-                  </div>
-                  <div
-                    class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    class="euiDataGridHeaderCell__innerWrapper"
+                    role="group"
                   >
                     <div
-                      class="euiDataGridHeaderCell__icon"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right: 0px;"
+                    />
+                    <div
+                      class="euiDataGridHeaderCell__content"
+                      title="A"
                     >
-                      <span
-                        color="text"
-                        data-euiicon-type="boxesVertical"
-                      />
+                      A
                     </div>
+                    <div
+                      class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    >
+                      <button
+                        aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                        class="euiDataGridHeaderCell__button"
+                        data-euigrid-tab-managed="true"
+                        data-test-subj="dataGridHeaderCellActionButton-A"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="euiDataGridHeaderCell__icon"
+                        >
+                          <span
+                            color="text"
+                            data-euiicon-type="boxesVertical"
+                          />
+                        </div>
+                        <p
+                          hidden=""
+                          id="euiDataGridCellHeader_generated-id_actions"
+                        >
+                          Click to view column header actions
+                        </p>
+                      </button>
+                    </div>
+                    <p
+                      hidden=""
+                      id="euiDataGridCellHeader_generated-id_sorting"
+                    />
                   </div>
-                </button>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
                 />
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_actions"
-                >
-                  Click to view column header actions
-                </p>
               </div>
               <div
+                aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+                aria-label="B"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="B"
                 data-gridcell-column-index="2"
@@ -1105,46 +1188,71 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  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-B"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                    title="B"
-                  >
-                    B
-                  </div>
-                  <div
-                    class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    class="euiDataGridHeaderCell__innerWrapper"
+                    role="group"
                   >
                     <div
-                      class="euiDataGridHeaderCell__icon"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right: 0px;"
+                    />
+                    <div
+                      class="euiDataGridHeaderCell__content"
+                      title="B"
                     >
-                      <span
-                        color="text"
-                        data-euiicon-type="boxesVertical"
-                      />
+                      B
                     </div>
+                    <div
+                      class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    >
+                      <button
+                        aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                        class="euiDataGridHeaderCell__button"
+                        data-euigrid-tab-managed="true"
+                        data-test-subj="dataGridHeaderCellActionButton-B"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="euiDataGridHeaderCell__icon"
+                        >
+                          <span
+                            color="text"
+                            data-euiicon-type="boxesVertical"
+                          />
+                        </div>
+                        <p
+                          hidden=""
+                          id="euiDataGridCellHeader_generated-id_actions"
+                        >
+                          Click to view column header actions
+                        </p>
+                      </button>
+                    </div>
+                    <p
+                      hidden=""
+                      id="euiDataGridCellHeader_generated-id_sorting"
+                    />
                   </div>
-                </button>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
                 />
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_actions"
-                >
-                  Click to view column header actions
-                </p>
               </div>
               <div
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn trailingControlCol"
@@ -1640,6 +1748,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               role="row"
             >
               <div
+                aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+                aria-label="A"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="A"
                 data-gridcell-column-index="0"
@@ -1651,48 +1761,75 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  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-A"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                    title="A"
-                  >
-                    Column A
-                  </div>
-                  <div
-                    class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    class="euiDataGridHeaderCell__innerWrapper"
+                    role="group"
                   >
                     <div
-                      class="euiDataGridHeaderCell__icon"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right: 0px;"
+                    />
+                    <div
+                      class="euiDataGridHeaderCell__content"
+                      title="A"
                     >
-                      <span
-                        color="text"
-                        data-euiicon-type="boxesVertical"
-                      />
+                      Column A
                     </div>
+                    <div
+                      class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    >
+                      <button
+                        aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                        class="euiDataGridHeaderCell__button"
+                        data-euigrid-tab-managed="true"
+                        data-test-subj="dataGridHeaderCellActionButton-A"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="euiDataGridHeaderCell__icon"
+                        >
+                          <span
+                            color="text"
+                            data-euiicon-type="boxesVertical"
+                          />
+                        </div>
+                        <p
+                          hidden=""
+                          id="euiDataGridCellHeader_generated-id_actions"
+                        >
+                          Click to view column header actions
+                        </p>
+                      </button>
+                    </div>
+                    <p
+                      hidden=""
+                      id="euiDataGridCellHeader_generated-id_sorting"
+                    />
                   </div>
-                </button>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
                 />
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_actions"
-                >
-                  Click to view column header actions
-                </p>
               </div>
               <div
+                aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+                aria-label="B"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="B"
                 data-gridcell-column-index="1"
@@ -1704,48 +1841,73 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  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-B"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                    title="B"
+                    class="euiDataGridHeaderCell__innerWrapper"
+                    role="group"
                   >
-                    <div>
-                      More Elements
+                    <div
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right: 0px;"
+                    />
+                    <div
+                      class="euiDataGridHeaderCell__content"
+                      title="B"
+                    >
+                      <div>
+                        More Elements
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
-                  >
                     <div
-                      class="euiDataGridHeaderCell__icon"
+                      class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                     >
-                      <span
-                        color="text"
-                        data-euiicon-type="boxesVertical"
-                      />
+                      <button
+                        aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                        class="euiDataGridHeaderCell__button"
+                        data-euigrid-tab-managed="true"
+                        data-test-subj="dataGridHeaderCellActionButton-B"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="euiDataGridHeaderCell__icon"
+                        >
+                          <span
+                            color="text"
+                            data-euiicon-type="boxesVertical"
+                          />
+                        </div>
+                        <p
+                          hidden=""
+                          id="euiDataGridCellHeader_generated-id_actions"
+                        >
+                          Click to view column header actions
+                        </p>
+                      </button>
                     </div>
+                    <p
+                      hidden=""
+                      id="euiDataGridCellHeader_generated-id_sorting"
+                    />
                   </div>
-                </button>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
                 />
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_actions"
-                >
-                  Click to view column header actions
-                </p>
               </div>
             </div>
             <div
@@ -2066,6 +2228,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               role="row"
             >
               <div
+                aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+                aria-label="A"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="A"
                 data-gridcell-column-index="0"
@@ -2077,48 +2241,75 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  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-A"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                    title="A"
-                  >
-                    A
-                  </div>
-                  <div
-                    class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    class="euiDataGridHeaderCell__innerWrapper"
+                    role="group"
                   >
                     <div
-                      class="euiDataGridHeaderCell__icon"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right: 0px;"
+                    />
+                    <div
+                      class="euiDataGridHeaderCell__content"
+                      title="A"
                     >
-                      <span
-                        color="text"
-                        data-euiicon-type="boxesVertical"
-                      />
+                      A
                     </div>
+                    <div
+                      class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    >
+                      <button
+                        aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                        class="euiDataGridHeaderCell__button"
+                        data-euigrid-tab-managed="true"
+                        data-test-subj="dataGridHeaderCellActionButton-A"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="euiDataGridHeaderCell__icon"
+                        >
+                          <span
+                            color="text"
+                            data-euiicon-type="boxesVertical"
+                          />
+                        </div>
+                        <p
+                          hidden=""
+                          id="euiDataGridCellHeader_generated-id_actions"
+                        >
+                          Click to view column header actions
+                        </p>
+                      </button>
+                    </div>
+                    <p
+                      hidden=""
+                      id="euiDataGridCellHeader_generated-id_sorting"
+                    />
                   </div>
-                </button>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
                 />
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_actions"
-                >
-                  Click to view column header actions
-                </p>
               </div>
               <div
+                aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+                aria-label="B"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="B"
                 data-gridcell-column-index="1"
@@ -2130,46 +2321,71 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="euiDataGridColumnResizer"
-                  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-B"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
                 >
                   <div
-                    class="euiDataGridHeaderCell__content"
-                    title="B"
-                  >
-                    B
-                  </div>
-                  <div
-                    class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+                    class="euiDataGridHeaderCell__innerWrapper"
+                    role="group"
                   >
                     <div
-                      class="euiDataGridHeaderCell__icon"
+                      class="euiDataGridColumnResizer"
+                      data-test-subj="dataGridColumnResizer"
+                      style="margin-right: 0px;"
+                    />
+                    <div
+                      class="euiDataGridHeaderCell__content"
+                      title="B"
+                    >
+                      B
+                    </div>
+                    <div
+                      class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                     >
-                      <span
-                        color="text"
-                        data-euiicon-type="boxesVertical"
-                      />
+                      <button
+                        aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                        class="euiDataGridHeaderCell__button"
+                        data-euigrid-tab-managed="true"
+                        data-test-subj="dataGridHeaderCellActionButton-B"
+                        tabindex="-1"
+                      >
+                        <div
+                          class="euiDataGridHeaderCell__icon"
+                        >
+                          <span
+                            color="text"
+                            data-euiicon-type="boxesVertical"
+                          />
+                        </div>
+                        <p
+                          hidden=""
+                          id="euiDataGridCellHeader_generated-id_actions"
+                        >
+                          Click to view column header actions
+                        </p>
+                      </button>
                     </div>
+                    <p
+                      hidden=""
+                      id="euiDataGridCellHeader_generated-id_sorting"
+                    />
                   </div>
-                </button>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
                 />
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_actions"
-                >
-                  Click to view column header actions
-                </p>
               </div>
             </div>
             <div
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
index f5c3ea2d80a3..832759fc2a6c 100644
--- 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,8 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
     role="row"
   >
     <div
+      aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+      aria-label="columnA"
       class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions"
       data-gridcell-column-id="columnA"
       data-gridcell-column-index="0"
@@ -21,48 +23,75 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       tabindex="-1"
     >
       <div
-        class="euiDataGridColumnResizer"
-        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"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
         tabindex="-1"
+      />
+      <div
+        data-focus-lock-disabled="disabled"
       >
         <div
-          class="euiDataGridHeaderCell__content"
-          title="columnA"
-        >
-          columnA
-        </div>
-        <div
-          class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+          class="euiDataGridHeaderCell__innerWrapper"
+          role="group"
         >
           <div
-            class="euiDataGridHeaderCell__icon"
+            class="euiDataGridColumnResizer"
+            data-test-subj="dataGridColumnResizer"
+            style="margin-right: 0px;"
+          />
+          <div
+            class="euiDataGridHeaderCell__content"
+            title="columnA"
+          >
+            columnA
+          </div>
+          <div
+            class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
           >
-            <span
-              color="text"
-              data-euiicon-type="boxesVertical"
-            />
+            <button
+              aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+              class="euiDataGridHeaderCell__button"
+              data-euigrid-tab-managed="true"
+              data-test-subj="dataGridHeaderCellActionButton-columnA"
+              tabindex="-1"
+            >
+              <div
+                class="euiDataGridHeaderCell__icon"
+              >
+                <span
+                  color="text"
+                  data-euiicon-type="boxesVertical"
+                />
+              </div>
+              <p
+                hidden=""
+                id="euiDataGridCellHeader_generated-id_actions"
+              >
+                Click to view column header actions
+              </p>
+            </button>
           </div>
+          <p
+            hidden=""
+            id="euiDataGridCellHeader_generated-id_sorting"
+          />
         </div>
-      </button>
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_sorting"
+        <p
+          aria-live="assertive"
+          class="emotion-euiScreenReaderOnly"
+        >
+          Press the Enter key to interact with this cell's contents.
+        </p>
+      </div>
+      <div
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="-1"
       />
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_actions"
-      >
-        Click to view column header actions
-      </p>
     </div>
     <div
+      aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+      aria-label="columnB"
       class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions"
       data-gridcell-column-id="columnB"
       data-gridcell-column-index="1"
@@ -74,46 +103,71 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       tabindex="-1"
     >
       <div
-        class="euiDataGridColumnResizer"
-        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"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
         tabindex="-1"
+      />
+      <div
+        data-focus-lock-disabled="disabled"
       >
         <div
-          class="euiDataGridHeaderCell__content"
-          title="columnB"
-        >
-          columnB
-        </div>
-        <div
-          class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+          class="euiDataGridHeaderCell__innerWrapper"
+          role="group"
         >
           <div
-            class="euiDataGridHeaderCell__icon"
+            class="euiDataGridColumnResizer"
+            data-test-subj="dataGridColumnResizer"
+            style="margin-right: 0px;"
+          />
+          <div
+            class="euiDataGridHeaderCell__content"
+            title="columnB"
+          >
+            columnB
+          </div>
+          <div
+            class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
           >
-            <span
-              color="text"
-              data-euiicon-type="boxesVertical"
-            />
+            <button
+              aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+              class="euiDataGridHeaderCell__button"
+              data-euigrid-tab-managed="true"
+              data-test-subj="dataGridHeaderCellActionButton-columnB"
+              tabindex="-1"
+            >
+              <div
+                class="euiDataGridHeaderCell__icon"
+              >
+                <span
+                  color="text"
+                  data-euiicon-type="boxesVertical"
+                />
+              </div>
+              <p
+                hidden=""
+                id="euiDataGridCellHeader_generated-id_actions"
+              >
+                Click to view column header actions
+              </p>
+            </button>
           </div>
+          <p
+            hidden=""
+            id="euiDataGridCellHeader_generated-id_sorting"
+          />
         </div>
-      </button>
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_sorting"
+        <p
+          aria-live="assertive"
+          class="emotion-euiScreenReaderOnly"
+        >
+          Press the Enter key to interact with this cell's contents.
+        </p>
+      </div>
+      <div
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="-1"
       />
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_actions"
-      >
-        Click to view column header actions
-      </p>
     </div>
   </div>
   <div
diff --git a/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
index 3a2f6df3422e..d56f34a9fd9c 100644
--- a/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -14,6 +14,8 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
       role="row"
     >
       <div
+        aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+        aria-label="columnA"
         class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions"
         data-gridcell-column-id="columnA"
         data-gridcell-column-index="0"
@@ -25,48 +27,75 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
         tabindex="-1"
       >
         <div
-          class="euiDataGridColumnResizer"
-          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"
+          data-focus-guard="true"
+          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="-1"
+        />
+        <div
+          data-focus-lock-disabled="disabled"
         >
           <div
-            class="euiDataGridHeaderCell__content"
-            title="columnA"
-          >
-            columnA
-          </div>
-          <div
-            class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+            class="euiDataGridHeaderCell__innerWrapper"
+            role="group"
           >
             <div
-              class="euiDataGridHeaderCell__icon"
+              class="euiDataGridColumnResizer"
+              data-test-subj="dataGridColumnResizer"
+              style="margin-right: 0px;"
+            />
+            <div
+              class="euiDataGridHeaderCell__content"
+              title="columnA"
             >
-              <span
-                color="text"
-                data-euiicon-type="boxesVertical"
-              />
+              columnA
             </div>
+            <div
+              class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+            >
+              <button
+                aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                class="euiDataGridHeaderCell__button"
+                data-euigrid-tab-managed="true"
+                data-test-subj="dataGridHeaderCellActionButton-columnA"
+                tabindex="-1"
+              >
+                <div
+                  class="euiDataGridHeaderCell__icon"
+                >
+                  <span
+                    color="text"
+                    data-euiicon-type="boxesVertical"
+                  />
+                </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_actions"
+                >
+                  Click to view column header actions
+                </p>
+              </button>
+            </div>
+            <p
+              hidden=""
+              id="euiDataGridCellHeader_generated-id_sorting"
+            />
           </div>
-        </button>
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_sorting"
+          <p
+            aria-live="assertive"
+            class="emotion-euiScreenReaderOnly"
+          >
+            Press the Enter key to interact with this cell's contents.
+          </p>
+        </div>
+        <div
+          data-focus-guard="true"
+          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+          tabindex="-1"
         />
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_actions"
-        >
-          Click to view column header actions
-        </p>
       </div>
       <div
+        aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+        aria-label="columnB"
         class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions"
         data-gridcell-column-id="columnB"
         data-gridcell-column-index="1"
@@ -78,46 +107,71 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
         tabindex="-1"
       >
         <div
-          class="euiDataGridColumnResizer"
-          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"
+          data-focus-guard="true"
+          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
           tabindex="-1"
+        />
+        <div
+          data-focus-lock-disabled="disabled"
         >
           <div
-            class="euiDataGridHeaderCell__content"
-            title="columnB"
-          >
-            columnB
-          </div>
-          <div
-            class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+            class="euiDataGridHeaderCell__innerWrapper"
+            role="group"
           >
             <div
-              class="euiDataGridHeaderCell__icon"
+              class="euiDataGridColumnResizer"
+              data-test-subj="dataGridColumnResizer"
+              style="margin-right: 0px;"
+            />
+            <div
+              class="euiDataGridHeaderCell__content"
+              title="columnB"
             >
-              <span
-                color="text"
-                data-euiicon-type="boxesVertical"
-              />
+              columnB
             </div>
+            <div
+              class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+            >
+              <button
+                aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+                class="euiDataGridHeaderCell__button"
+                data-euigrid-tab-managed="true"
+                data-test-subj="dataGridHeaderCellActionButton-columnB"
+                tabindex="-1"
+              >
+                <div
+                  class="euiDataGridHeaderCell__icon"
+                >
+                  <span
+                    color="text"
+                    data-euiicon-type="boxesVertical"
+                  />
+                </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_actions"
+                >
+                  Click to view column header actions
+                </p>
+              </button>
+            </div>
+            <p
+              hidden=""
+              id="euiDataGridCellHeader_generated-id_sorting"
+            />
           </div>
-        </button>
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_sorting"
+          <p
+            aria-live="assertive"
+            class="emotion-euiScreenReaderOnly"
+          >
+            Press the Enter key to interact with this cell's contents.
+          </p>
+        </div>
+        <div
+          data-focus-guard="true"
+          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+          tabindex="-1"
         />
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_actions"
-        >
-          Click to view column header actions
-        </p>
       </div>
     </div>
     <div
diff --git a/packages/eui/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap b/packages/eui/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
index e0ab6fc89037..272901670f29 100644
--- a/packages/eui/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
@@ -2,6 +2,8 @@
 
 exports[`EuiDataGridHeaderCell renders 1`] = `
 <div
+  aria-describedby="euiDataGridCellHeader_generated-id_sorting"
+  aria-label="someColumn"
   class="euiDataGridHeaderCell euiDataGridHeaderCell--numeric euiDataGridHeaderCell--hasColumnActions"
   data-gridcell-column-id="someColumn"
   data-gridcell-column-index="0"
@@ -13,45 +15,70 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
   tabindex="-1"
 >
   <div
-    class="euiDataGridColumnResizer"
-    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-someColumn"
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
+  />
+  <div
+    data-focus-lock-disabled="disabled"
   >
     <div
-      class="euiDataGridHeaderCell__content"
-      title="someColumn"
-    >
-      someColumn
-    </div>
-    <div
-      class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+      class="euiDataGridHeaderCell__innerWrapper"
+      role="group"
     >
       <div
-        class="euiDataGridHeaderCell__icon"
+        class="euiDataGridColumnResizer"
+        data-test-subj="dataGridColumnResizer"
+        style="margin-right: 0px;"
+      />
+      <div
+        class="euiDataGridHeaderCell__content"
+        title="someColumn"
       >
-        <span
-          color="text"
-          data-euiicon-type="boxesVertical"
-        />
+        someColumn
       </div>
+      <div
+        class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
+      >
+        <button
+          aria-labelledby="euiDataGridCellHeader_generated-id_actions"
+          class="euiDataGridHeaderCell__button"
+          data-euigrid-tab-managed="true"
+          data-test-subj="dataGridHeaderCellActionButton-someColumn"
+          tabindex="-1"
+        >
+          <div
+            class="euiDataGridHeaderCell__icon"
+          >
+            <span
+              color="text"
+              data-euiicon-type="boxesVertical"
+            />
+          </div>
+          <p
+            hidden=""
+            id="euiDataGridCellHeader_generated-id_actions"
+          >
+            Click to view column header actions
+          </p>
+        </button>
+      </div>
+      <p
+        hidden=""
+        id="euiDataGridCellHeader_generated-id_sorting"
+      />
     </div>
-  </button>
-  <p
-    hidden=""
-    id="euiDataGridCellHeader_generated-id_sorting"
+    <p
+      aria-live="assertive"
+      class="emotion-euiScreenReaderOnly"
+    >
+      Press the Enter key to interact with this cell's contents.
+    </p>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
   />
-  <p
-    hidden=""
-    id="euiDataGridCellHeader_generated-id_actions"
-  >
-    Click to view column header actions
-  </p>
 </div>
 `;
diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper.test.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper.test.tsx
index b17b7632b47c..fc5c7a13eb14 100644
--- a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper.test.tsx
+++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper.test.tsx
@@ -69,16 +69,287 @@ describe('EuiDataGridHeaderCellWrapper', () => {
                 role="columnheader"
                 tabindex="0"
               >
-                <button
-                  data-euigrid-tab-managed="true"
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
+                >
+                  <button
+                    data-euigrid-tab-managed="true"
+                    tabindex="-1"
+                  />
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                   tabindex="-1"
                 />
               </div>
             }
-            renderFocusTrap={false}
+            renderFocusTrap={true}
             updateCellFocusContext={[Function]}
           >
-            <button />
+            <FocusTrappedChildren
+              cellEl={
+                <div
+                  class="euiDataGridHeaderCell"
+                  data-gridcell-column-id="someColumn"
+                  data-gridcell-column-index="0"
+                  data-gridcell-row-index="-1"
+                  data-gridcell-visible-row-index="-1"
+                  data-test-subj="dataGridHeaderCell-someColumn"
+                  role="columnheader"
+                  tabindex="0"
+                >
+                  <div
+                    data-focus-guard="true"
+                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                    tabindex="-1"
+                  />
+                  <div
+                    data-focus-lock-disabled="disabled"
+                  >
+                    <button
+                      data-euigrid-tab-managed="true"
+                      tabindex="-1"
+                    />
+                    <p
+                      aria-live="assertive"
+                      class="emotion-euiScreenReaderOnly"
+                    >
+                      Press the Enter key to interact with this cell's contents.
+                    </p>
+                  </div>
+                  <div
+                    data-focus-guard="true"
+                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                    tabindex="-1"
+                  />
+                </div>
+              }
+            >
+              <EuiFocusTrap
+                clickOutsideDisables={true}
+                disabled={true}
+              >
+                <EuiFocusTrapClass
+                  clickOutsideDisables={true}
+                  crossFrame={false}
+                  disabled={true}
+                  gapMode="padding"
+                  noIsolation={true}
+                  returnFocus={true}
+                  scrollLock={false}
+                >
+                  <ForwardRef
+                    crossFrame={false}
+                    enabled={false}
+                    noIsolation={true}
+                    onClickOutside={[Function]}
+                    returnFocus={true}
+                    scrollLock={false}
+                  >
+                    <ForwardRef
+                      crossFrame={false}
+                      enabled={false}
+                      noIsolation={true}
+                      onClickOutside={[Function]}
+                      returnFocus={true}
+                      scrollLock={false}
+                      sideCar={[Function]}
+                    >
+                      <ForwardRef(FocusLockUI)
+                        as={
+                          {
+                            "$$typeof": Symbol(react.forward_ref),
+                            "classNames": {
+                              "fullWidth": "width-before-scroll-bar",
+                              "zeroRight": "right-scroll-bar-position",
+                            },
+                            "defaultProps": {
+                              "enabled": true,
+                              "inert": false,
+                              "removeScrollBar": true,
+                            },
+                            "render": [Function],
+                          }
+                        }
+                        autoFocus={true}
+                        crossFrame={false}
+                        disabled={true}
+                        lockProps={
+                          {
+                            "allowPinchZoom": undefined,
+                            "as": undefined,
+                            "enabled": false,
+                            "gapMode": undefined,
+                            "inert": undefined,
+                            "shards": undefined,
+                            "sideCar": [Function],
+                            "style": undefined,
+                          }
+                        }
+                        noFocusGuards={false}
+                        persistentFocus={false}
+                        returnFocus={true}
+                        sideCar={[Function]}
+                      >
+                        <div
+                          data-focus-guard={true}
+                          key="guard-first"
+                          style={
+                            {
+                              "height": "0px",
+                              "left": "1px",
+                              "overflow": "hidden",
+                              "padding": 0,
+                              "position": "fixed",
+                              "top": "1px",
+                              "width": "1px",
+                            }
+                          }
+                          tabIndex={-1}
+                        />
+                        <ForwardRef
+                          data-focus-lock-disabled="disabled"
+                          enabled={false}
+                          inert={false}
+                          onBlur={[Function]}
+                          onFocus={[Function]}
+                          removeScrollBar={true}
+                          sideCar={[Function]}
+                        >
+                          <div
+                            data-focus-lock-disabled="disabled"
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                            onScrollCapture={[Function]}
+                            onTouchMoveCapture={[Function]}
+                            onWheelCapture={[Function]}
+                          >
+                            <button />
+                            <EuiScreenReaderOnly>
+                              <p
+                                aria-live="assertive"
+                                css="unknown styles"
+                                key="null"
+                              >
+                                <Insertion
+                                  cache={
+                                    {
+                                      "insert": [Function],
+                                      "inserted": {
+                                        "gb1zbv-euiScreenReaderOnly": true,
+                                      },
+                                      "key": "css",
+                                      "nonce": undefined,
+                                      "registered": {},
+                                      "sheet": StyleSheet {
+                                        "_alreadyInsertedOrderInsensitiveRule": true,
+                                        "_insertTag": [Function],
+                                        "before": null,
+                                        "container": <head>
+                                          <style
+                                            data-emotion="css"
+                                            data-s=""
+                                          >
+                                            
+                                            .emotion-euiScreenReaderOnly{position:absolute;inset-block-start:auto;inset-inline-start:-10000px;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;margin:-1px;}
+                                          </style>
+                                        </head>,
+                                        "ctr": 1,
+                                        "insertionPoint": undefined,
+                                        "isSpeedy": false,
+                                        "key": "css",
+                                        "nonce": undefined,
+                                        "prepend": undefined,
+                                        "tags": [
+                                          <style
+                                            data-emotion="css"
+                                            data-s=""
+                                          >
+                                            
+                                            .emotion-euiScreenReaderOnly{position:absolute;inset-block-start:auto;inset-inline-start:-10000px;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;margin:-1px;}
+                                          </style>,
+                                        ],
+                                      },
+                                    }
+                                  }
+                                  isStringTag={true}
+                                  serialized={
+                                    {
+                                      "map": undefined,
+                                      "name": "gb1zbv-euiScreenReaderOnly",
+                                      "next": undefined,
+                                      "styles": ";
+        /* Take the element out of the layout */
+        position: absolute;
+        /* Keep it vertically inline */
+        inset-block-start: auto;
+        /* Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text */
+        inset-inline-start: -10000px;
+        /* The element must have a size (for some screen readers) */
+        
+          inline-size: 1px;
+          block-size: 1px;
+        
+        /* But reduce the visible size to nothing */
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        /* And ensure no overflows occur */
+        overflow: hidden;
+        /* Chrome requires the negative margin to not cause overflows of parent containers */
+        margin: -1px;
+      ;label:euiScreenReaderOnly;;;",
+                                      "toString": [Function],
+                                    }
+                                  }
+                                />
+                                <p
+                                  aria-live="assertive"
+                                  className="emotion-euiScreenReaderOnly"
+                                >
+                                  <EuiI18n
+                                    default="Press the Enter key to interact with this cell's contents."
+                                    token="euiDataGridCell.focusTrapEnterPrompt"
+                                  >
+                                    Press the Enter key to interact with this cell's contents.
+                                  </EuiI18n>
+                                </p>
+                              </p>
+                            </EuiScreenReaderOnly>
+                          </div>
+                        </ForwardRef>
+                        <div
+                          data-focus-guard={true}
+                          style={
+                            {
+                              "height": "0px",
+                              "left": "1px",
+                              "overflow": "hidden",
+                              "padding": 0,
+                              "position": "fixed",
+                              "top": "1px",
+                              "width": "1px",
+                            }
+                          }
+                          tabIndex={-1}
+                        />
+                      </ForwardRef(FocusLockUI)>
+                    </ForwardRef>
+                  </ForwardRef>
+                </EuiFocusTrapClass>
+              </EuiFocusTrap>
+            </FocusTrappedChildren>
           </HandleInteractiveChildren>
         </div>
       </EuiDataGridHeaderCellWrapper>
@@ -124,16 +395,289 @@ describe('EuiDataGridHeaderCellWrapper', () => {
               style="width: 30px;"
               tabindex="0"
             >
-              <button
-                data-euigrid-tab-managed="true"
+              <div
+                data-focus-guard="true"
+                style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                tabindex="-1"
+              />
+              <div
+                data-focus-lock-disabled="disabled"
+              >
+                <button
+                  data-euigrid-tab-managed="true"
+                  tabindex="-1"
+                />
+                <p
+                  aria-live="assertive"
+                  class="emotion-euiScreenReaderOnly"
+                >
+                  Press the Enter key to interact with this cell's contents.
+                </p>
+              </div>
+              <div
+                data-focus-guard="true"
+                style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
                 tabindex="-1"
               />
             </div>
           }
-          renderFocusTrap={false}
+          renderFocusTrap={true}
           updateCellFocusContext={[Function]}
         >
-          <button />
+          <FocusTrappedChildren
+            cellEl={
+              <div
+                aria-label="test"
+                class="euiDataGridHeaderCell euiDataGridHeaderCell--test"
+                data-gridcell-column-id="someColumn"
+                data-gridcell-column-index="0"
+                data-gridcell-row-index="-1"
+                data-gridcell-visible-row-index="-1"
+                data-test-subj="dataGridHeaderCell-someColumn"
+                role="columnheader"
+                style="width: 30px;"
+                tabindex="0"
+              >
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
+                >
+                  <button
+                    data-euigrid-tab-managed="true"
+                    tabindex="-1"
+                  />
+                  <p
+                    aria-live="assertive"
+                    class="emotion-euiScreenReaderOnly"
+                  >
+                    Press the Enter key to interact with this cell's contents.
+                  </p>
+                </div>
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
+                />
+              </div>
+            }
+          >
+            <EuiFocusTrap
+              clickOutsideDisables={true}
+              disabled={true}
+            >
+              <EuiFocusTrapClass
+                clickOutsideDisables={true}
+                crossFrame={false}
+                disabled={true}
+                gapMode="padding"
+                noIsolation={true}
+                returnFocus={true}
+                scrollLock={false}
+              >
+                <ForwardRef
+                  crossFrame={false}
+                  enabled={false}
+                  noIsolation={true}
+                  onClickOutside={[Function]}
+                  returnFocus={true}
+                  scrollLock={false}
+                >
+                  <ForwardRef
+                    crossFrame={false}
+                    enabled={false}
+                    noIsolation={true}
+                    onClickOutside={[Function]}
+                    returnFocus={true}
+                    scrollLock={false}
+                    sideCar={[Function]}
+                  >
+                    <ForwardRef(FocusLockUI)
+                      as={
+                        {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "classNames": {
+                            "fullWidth": "width-before-scroll-bar",
+                            "zeroRight": "right-scroll-bar-position",
+                          },
+                          "defaultProps": {
+                            "enabled": true,
+                            "inert": false,
+                            "removeScrollBar": true,
+                          },
+                          "render": [Function],
+                        }
+                      }
+                      autoFocus={true}
+                      crossFrame={false}
+                      disabled={true}
+                      lockProps={
+                        {
+                          "allowPinchZoom": undefined,
+                          "as": undefined,
+                          "enabled": false,
+                          "gapMode": undefined,
+                          "inert": undefined,
+                          "shards": undefined,
+                          "sideCar": [Function],
+                          "style": undefined,
+                        }
+                      }
+                      noFocusGuards={false}
+                      persistentFocus={false}
+                      returnFocus={true}
+                      sideCar={[Function]}
+                    >
+                      <div
+                        data-focus-guard={true}
+                        key="guard-first"
+                        style={
+                          {
+                            "height": "0px",
+                            "left": "1px",
+                            "overflow": "hidden",
+                            "padding": 0,
+                            "position": "fixed",
+                            "top": "1px",
+                            "width": "1px",
+                          }
+                        }
+                        tabIndex={-1}
+                      />
+                      <ForwardRef
+                        data-focus-lock-disabled="disabled"
+                        enabled={false}
+                        inert={false}
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        removeScrollBar={true}
+                        sideCar={[Function]}
+                      >
+                        <div
+                          data-focus-lock-disabled="disabled"
+                          onBlur={[Function]}
+                          onFocus={[Function]}
+                          onScrollCapture={[Function]}
+                          onTouchMoveCapture={[Function]}
+                          onWheelCapture={[Function]}
+                        >
+                          <button />
+                          <EuiScreenReaderOnly>
+                            <p
+                              aria-live="assertive"
+                              css="unknown styles"
+                              key="null"
+                            >
+                              <Insertion
+                                cache={
+                                  {
+                                    "insert": [Function],
+                                    "inserted": {
+                                      "gb1zbv-euiScreenReaderOnly": true,
+                                    },
+                                    "key": "css",
+                                    "nonce": undefined,
+                                    "registered": {},
+                                    "sheet": StyleSheet {
+                                      "_alreadyInsertedOrderInsensitiveRule": true,
+                                      "_insertTag": [Function],
+                                      "before": null,
+                                      "container": <head>
+                                        <style
+                                          data-emotion="css"
+                                          data-s=""
+                                        >
+                                          
+                                          .emotion-euiScreenReaderOnly{position:absolute;inset-block-start:auto;inset-inline-start:-10000px;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;margin:-1px;}
+                                        </style>
+                                      </head>,
+                                      "ctr": 1,
+                                      "insertionPoint": undefined,
+                                      "isSpeedy": false,
+                                      "key": "css",
+                                      "nonce": undefined,
+                                      "prepend": undefined,
+                                      "tags": [
+                                        <style
+                                          data-emotion="css"
+                                          data-s=""
+                                        >
+                                          
+                                          .emotion-euiScreenReaderOnly{position:absolute;inset-block-start:auto;inset-inline-start:-10000px;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;margin:-1px;}
+                                        </style>,
+                                      ],
+                                    },
+                                  }
+                                }
+                                isStringTag={true}
+                                serialized={
+                                  {
+                                    "map": undefined,
+                                    "name": "gb1zbv-euiScreenReaderOnly",
+                                    "next": undefined,
+                                    "styles": ";
+        /* Take the element out of the layout */
+        position: absolute;
+        /* Keep it vertically inline */
+        inset-block-start: auto;
+        /* Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text */
+        inset-inline-start: -10000px;
+        /* The element must have a size (for some screen readers) */
+        
+          inline-size: 1px;
+          block-size: 1px;
+        
+        /* But reduce the visible size to nothing */
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        /* And ensure no overflows occur */
+        overflow: hidden;
+        /* Chrome requires the negative margin to not cause overflows of parent containers */
+        margin: -1px;
+      ;label:euiScreenReaderOnly;;;",
+                                    "toString": [Function],
+                                  }
+                                }
+                              />
+                              <p
+                                aria-live="assertive"
+                                className="emotion-euiScreenReaderOnly"
+                              >
+                                <EuiI18n
+                                  default="Press the Enter key to interact with this cell's contents."
+                                  token="euiDataGridCell.focusTrapEnterPrompt"
+                                >
+                                  Press the Enter key to interact with this cell's contents.
+                                </EuiI18n>
+                              </p>
+                            </p>
+                          </EuiScreenReaderOnly>
+                        </div>
+                      </ForwardRef>
+                      <div
+                        data-focus-guard={true}
+                        style={
+                          {
+                            "height": "0px",
+                            "left": "1px",
+                            "overflow": "hidden",
+                            "padding": 0,
+                            "position": "fixed",
+                            "top": "1px",
+                            "width": "1px",
+                          }
+                        }
+                        tabIndex={-1}
+                      />
+                    </ForwardRef(FocusLockUI)>
+                  </ForwardRef>
+                </ForwardRef>
+              </EuiFocusTrapClass>
+            </EuiFocusTrap>
+          </FocusTrappedChildren>
         </HandleInteractiveChildren>
       </div>
     `);