From f33f981578310dda0bd9078d94964083d504d63d Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 16 Aug 2024 23:34:35 -0700
Subject: [PATCH] Attempt to simplify/clean up screen reader announcements

---
 .../__snapshots__/data_grid.test.tsx.snap     | 224 +++++-------------
 .../data_grid_body_custom.test.tsx.snap       |  56 ++---
 .../data_grid_body_virtualized.test.tsx.snap  |  56 ++---
 .../data_grid_header_cell.test.tsx.snap       |  28 +--
 .../body/header/data_grid_header_cell.tsx     | 142 ++++++-----
 5 files changed, 172 insertions(+), 334 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 d113adf4852..ac334d5b716 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
@@ -596,7 +596,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
             >
               <div
                 aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-                aria-label="A"
+                aria-labelledby="euiDataGridCellHeader_generated-id_content"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="A"
                 data-gridcell-column-index="0"
@@ -613,17 +613,22 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                   style="margin-right: 0px;"
                 />
                 <div
+                  aria-hidden="true"
                   class="euiDataGridHeaderCell__content"
+                  id="euiDataGridCellHeader_generated-id_content"
                   title="A"
                 >
                   A
                 </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_sorting"
+                />
                 <div
                   class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                 >
                   <button
-                    aria-hidden="true"
-                    aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+                    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-A"
@@ -637,29 +642,12 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                         data-euiicon-type="boxesVertical"
                       />
                     </div>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_content"
-                    >
-                      A
-                      ,
-                    </p>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_actions"
-                    >
-                      Click to view column header actions
-                    </p>
                   </button>
                 </div>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
-                />
               </div>
               <div
                 aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-                aria-label="B"
+                aria-labelledby="euiDataGridCellHeader_generated-id_content"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="B"
                 data-gridcell-column-index="1"
@@ -676,17 +664,22 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                   style="margin-right: 0px;"
                 />
                 <div
+                  aria-hidden="true"
                   class="euiDataGridHeaderCell__content"
+                  id="euiDataGridCellHeader_generated-id_content"
                   title="B"
                 >
                   B
                 </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_sorting"
+                />
                 <div
                   class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                 >
                   <button
-                    aria-hidden="true"
-                    aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+                    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-B"
@@ -700,25 +693,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                         data-euiicon-type="boxesVertical"
                       />
                     </div>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_content"
-                    >
-                      B
-                      ,
-                    </p>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_actions"
-                    >
-                      Click to view column header actions
-                    </p>
                   </button>
                 </div>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
-                />
               </div>
             </div>
             <div
@@ -1062,7 +1038,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               </div>
               <div
                 aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-                aria-label="A"
+                aria-labelledby="euiDataGridCellHeader_generated-id_content"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="A"
                 data-gridcell-column-index="1"
@@ -1079,17 +1055,22 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                   style="margin-right: 0px;"
                 />
                 <div
+                  aria-hidden="true"
                   class="euiDataGridHeaderCell__content"
+                  id="euiDataGridCellHeader_generated-id_content"
                   title="A"
                 >
                   A
                 </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_sorting"
+                />
                 <div
                   class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                 >
                   <button
-                    aria-hidden="true"
-                    aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+                    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-A"
@@ -1103,29 +1084,12 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                         data-euiicon-type="boxesVertical"
                       />
                     </div>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_content"
-                    >
-                      A
-                      ,
-                    </p>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_actions"
-                    >
-                      Click to view column header actions
-                    </p>
                   </button>
                 </div>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
-                />
               </div>
               <div
                 aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-                aria-label="B"
+                aria-labelledby="euiDataGridCellHeader_generated-id_content"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="B"
                 data-gridcell-column-index="2"
@@ -1142,17 +1106,22 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                   style="margin-right: 0px;"
                 />
                 <div
+                  aria-hidden="true"
                   class="euiDataGridHeaderCell__content"
+                  id="euiDataGridCellHeader_generated-id_content"
                   title="B"
                 >
                   B
                 </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_sorting"
+                />
                 <div
                   class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                 >
                   <button
-                    aria-hidden="true"
-                    aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+                    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-B"
@@ -1166,25 +1135,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                         data-euiicon-type="boxesVertical"
                       />
                     </div>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_content"
-                    >
-                      B
-                      ,
-                    </p>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_actions"
-                    >
-                      Click to view column header actions
-                    </p>
                   </button>
                 </div>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
-                />
               </div>
               <div
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--controlColumn trailingControlCol"
@@ -1681,7 +1633,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
             >
               <div
                 aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-                aria-label="A"
+                aria-labelledby="euiDataGridCellHeader_generated-id_content"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="A"
                 data-gridcell-column-index="0"
@@ -1698,17 +1650,22 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                   style="margin-right: 0px;"
                 />
                 <div
+                  aria-hidden="true"
                   class="euiDataGridHeaderCell__content"
+                  id="euiDataGridCellHeader_generated-id_content"
                   title="A"
                 >
                   Column A
                 </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_sorting"
+                />
                 <div
                   class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                 >
                   <button
-                    aria-hidden="true"
-                    aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+                    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-A"
@@ -1722,29 +1679,12 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                         data-euiicon-type="boxesVertical"
                       />
                     </div>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_content"
-                    >
-                      A
-                      ,
-                    </p>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_actions"
-                    >
-                      Click to view column header actions
-                    </p>
                   </button>
                 </div>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
-                />
               </div>
               <div
                 aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-                aria-label="B"
+                aria-labelledby="euiDataGridCellHeader_generated-id_content"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="B"
                 data-gridcell-column-index="1"
@@ -1761,19 +1701,24 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                   style="margin-right: 0px;"
                 />
                 <div
+                  aria-hidden="true"
                   class="euiDataGridHeaderCell__content"
+                  id="euiDataGridCellHeader_generated-id_content"
                   title="B"
                 >
                   <div>
                     More Elements
                   </div>
                 </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_sorting"
+                />
                 <div
                   class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                 >
                   <button
-                    aria-hidden="true"
-                    aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+                    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-B"
@@ -1787,25 +1732,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                         data-euiicon-type="boxesVertical"
                       />
                     </div>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_content"
-                    >
-                      B
-                      ,
-                    </p>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_actions"
-                    >
-                      Click to view column header actions
-                    </p>
                   </button>
                 </div>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
-                />
               </div>
             </div>
             <div
@@ -2127,7 +2055,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
             >
               <div
                 aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-                aria-label="A"
+                aria-labelledby="euiDataGridCellHeader_generated-id_content"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="A"
                 data-gridcell-column-index="0"
@@ -2144,17 +2072,22 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                   style="margin-right: 0px;"
                 />
                 <div
+                  aria-hidden="true"
                   class="euiDataGridHeaderCell__content"
+                  id="euiDataGridCellHeader_generated-id_content"
                   title="A"
                 >
                   A
                 </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_sorting"
+                />
                 <div
                   class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                 >
                   <button
-                    aria-hidden="true"
-                    aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+                    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-A"
@@ -2168,29 +2101,12 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                         data-euiicon-type="boxesVertical"
                       />
                     </div>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_content"
-                    >
-                      A
-                      ,
-                    </p>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_actions"
-                    >
-                      Click to view column header actions
-                    </p>
                   </button>
                 </div>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
-                />
               </div>
               <div
                 aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-                aria-label="B"
+                aria-labelledby="euiDataGridCellHeader_generated-id_content"
                 class="euiDataGridHeaderCell euiDataGridHeaderCell--hasColumnActions"
                 data-gridcell-column-id="B"
                 data-gridcell-column-index="1"
@@ -2207,17 +2123,22 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                   style="margin-right: 0px;"
                 />
                 <div
+                  aria-hidden="true"
                   class="euiDataGridHeaderCell__content"
+                  id="euiDataGridCellHeader_generated-id_content"
                   title="B"
                 >
                   B
                 </div>
+                <p
+                  hidden=""
+                  id="euiDataGridCellHeader_generated-id_sorting"
+                />
                 <div
                   class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
                 >
                   <button
-                    aria-hidden="true"
-                    aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+                    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-B"
@@ -2231,25 +2152,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                         data-euiicon-type="boxesVertical"
                       />
                     </div>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_content"
-                    >
-                      B
-                      ,
-                    </p>
-                    <p
-                      hidden=""
-                      id="euiDataGridCellHeader_generated-id_actions"
-                    >
-                      Click to view column header actions
-                    </p>
                   </button>
                 </div>
-                <p
-                  hidden=""
-                  id="euiDataGridCellHeader_generated-id_sorting"
-                />
               </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 fe09aad9b37..35f1dbfad9e 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
@@ -11,7 +11,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
   >
     <div
       aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-      aria-label="columnA"
+      aria-labelledby="euiDataGridCellHeader_generated-id_content"
       class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions"
       data-gridcell-column-id="columnA"
       data-gridcell-column-index="0"
@@ -28,17 +28,22 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
         style="margin-right: 0px;"
       />
       <div
+        aria-hidden="true"
         class="euiDataGridHeaderCell__content"
+        id="euiDataGridCellHeader_generated-id_content"
         title="columnA"
       >
         columnA
       </div>
+      <p
+        hidden=""
+        id="euiDataGridCellHeader_generated-id_sorting"
+      />
       <div
         class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
       >
         <button
-          aria-hidden="true"
-          aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+          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"
@@ -52,29 +57,12 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
               data-euiicon-type="boxesVertical"
             />
           </div>
-          <p
-            hidden=""
-            id="euiDataGridCellHeader_generated-id_content"
-          >
-            columnA
-            ,
-          </p>
-          <p
-            hidden=""
-            id="euiDataGridCellHeader_generated-id_actions"
-          >
-            Click to view column header actions
-          </p>
         </button>
       </div>
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_sorting"
-      />
     </div>
     <div
       aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-      aria-label="columnB"
+      aria-labelledby="euiDataGridCellHeader_generated-id_content"
       class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions"
       data-gridcell-column-id="columnB"
       data-gridcell-column-index="1"
@@ -91,17 +79,22 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
         style="margin-right: 0px;"
       />
       <div
+        aria-hidden="true"
         class="euiDataGridHeaderCell__content"
+        id="euiDataGridCellHeader_generated-id_content"
         title="columnB"
       >
         columnB
       </div>
+      <p
+        hidden=""
+        id="euiDataGridCellHeader_generated-id_sorting"
+      />
       <div
         class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
       >
         <button
-          aria-hidden="true"
-          aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+          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"
@@ -115,25 +108,8 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
               data-euiicon-type="boxesVertical"
             />
           </div>
-          <p
-            hidden=""
-            id="euiDataGridCellHeader_generated-id_content"
-          >
-            columnB
-            ,
-          </p>
-          <p
-            hidden=""
-            id="euiDataGridCellHeader_generated-id_actions"
-          >
-            Click to view column header actions
-          </p>
         </button>
       </div>
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_sorting"
-      />
     </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 23cfb223487..c84ac01c75d 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
@@ -15,7 +15,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
     >
       <div
         aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-        aria-label="columnA"
+        aria-labelledby="euiDataGridCellHeader_generated-id_content"
         class="euiDataGridHeaderCell euiDataGridHeaderCell--boolean euiDataGridHeaderCell--hasColumnActions"
         data-gridcell-column-id="columnA"
         data-gridcell-column-index="0"
@@ -32,17 +32,22 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           style="margin-right: 0px;"
         />
         <div
+          aria-hidden="true"
           class="euiDataGridHeaderCell__content"
+          id="euiDataGridCellHeader_generated-id_content"
           title="columnA"
         >
           columnA
         </div>
+        <p
+          hidden=""
+          id="euiDataGridCellHeader_generated-id_sorting"
+        />
         <div
           class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
         >
           <button
-            aria-hidden="true"
-            aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+            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"
@@ -56,29 +61,12 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
                 data-euiicon-type="boxesVertical"
               />
             </div>
-            <p
-              hidden=""
-              id="euiDataGridCellHeader_generated-id_content"
-            >
-              columnA
-              ,
-            </p>
-            <p
-              hidden=""
-              id="euiDataGridCellHeader_generated-id_actions"
-            >
-              Click to view column header actions
-            </p>
           </button>
         </div>
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_sorting"
-        />
       </div>
       <div
         aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-        aria-label="columnB"
+        aria-labelledby="euiDataGridCellHeader_generated-id_content"
         class="euiDataGridHeaderCell euiDataGridHeaderCell--string euiDataGridHeaderCell--hasColumnActions"
         data-gridcell-column-id="columnB"
         data-gridcell-column-index="1"
@@ -95,17 +83,22 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           style="margin-right: 0px;"
         />
         <div
+          aria-hidden="true"
           class="euiDataGridHeaderCell__content"
+          id="euiDataGridCellHeader_generated-id_content"
           title="columnB"
         >
           columnB
         </div>
+        <p
+          hidden=""
+          id="euiDataGridCellHeader_generated-id_sorting"
+        />
         <div
           class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
         >
           <button
-            aria-hidden="true"
-            aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+            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"
@@ -119,25 +112,8 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
                 data-euiicon-type="boxesVertical"
               />
             </div>
-            <p
-              hidden=""
-              id="euiDataGridCellHeader_generated-id_content"
-            >
-              columnB
-              ,
-            </p>
-            <p
-              hidden=""
-              id="euiDataGridCellHeader_generated-id_actions"
-            >
-              Click to view column header actions
-            </p>
           </button>
         </div>
-        <p
-          hidden=""
-          id="euiDataGridCellHeader_generated-id_sorting"
-        />
       </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 497b9b4c2ea..ef8f989d07d 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
@@ -3,7 +3,7 @@
 exports[`EuiDataGridHeaderCell renders 1`] = `
 <div
   aria-describedby="euiDataGridCellHeader_generated-id_sorting"
-  aria-label="someColumn"
+  aria-labelledby="euiDataGridCellHeader_generated-id_content"
   class="euiDataGridHeaderCell euiDataGridHeaderCell--numeric euiDataGridHeaderCell--hasColumnActions"
   data-gridcell-column-id="someColumn"
   data-gridcell-column-index="0"
@@ -20,17 +20,22 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
     style="margin-right: 0px;"
   />
   <div
+    aria-hidden="true"
     class="euiDataGridHeaderCell__content"
+    id="euiDataGridCellHeader_generated-id_content"
     title="someColumn"
   >
     someColumn
   </div>
+  <p
+    hidden=""
+    id="euiDataGridCellHeader_generated-id_sorting"
+  />
   <div
     class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
   >
     <button
-      aria-hidden="true"
-      aria-labelledby="euiDataGridCellHeader_generated-id_content euiDataGridCellHeader_generated-id_actions"
+      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-someColumn"
@@ -44,24 +49,7 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
           data-euiicon-type="boxesVertical"
         />
       </div>
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_content"
-      >
-        someColumn
-        ,
-      </p>
-      <p
-        hidden=""
-        id="euiDataGridCellHeader_generated-id_actions"
-      >
-        Click to view column header actions
-      </p>
     </button>
   </div>
-  <p
-    hidden=""
-    id="euiDataGridCellHeader_generated-id_sorting"
-  />
 </div>
 `;
diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
index e7e1fd9aebd..10560cc2c92 100644
--- a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
+++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
@@ -23,8 +23,7 @@ import React, {
 import { tabbable, FocusableElement } from 'tabbable';
 import { keys, useEuiMemoizedStyles } from '../../../../services';
 import { useGeneratedHtmlId } from '../../../../services/accessibility';
-import { EuiScreenReaderOnly } from '../../../accessibility';
-import { EuiI18n } from '../../../i18n';
+import { EuiI18n, useEuiI18n } from '../../../i18n';
 import { EuiIcon } from '../../../icon';
 import { EuiListGroup } from '../../../list_group';
 import { EuiPopover } from '../../../popover';
@@ -42,10 +41,10 @@ import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
 const CellContent: FunctionComponent<
   PropsWithChildren &
     HTMLAttributes<HTMLDivElement> & { title: string; arrow?: ReactNode }
-> = ({ children, title, arrow }) => {
+> = ({ children, title, arrow, ...rest }) => {
   return (
     <>
-      <div title={title} className="euiDataGridHeaderCell__content">
+      <div {...rest} title={title} className="euiDataGridHeaderCell__content">
         {children}
       </div>
       {arrow}
@@ -76,6 +75,10 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
         useContext(DataGridFocusContext);
 
       const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+      const togglePopover = useCallback(() => {
+        setIsPopoverOpen((isOpen) => !isOpen);
+      }, []);
+      const closePopover = useCallback(() => setIsPopoverOpen(false), []);
       const popoverArrowNavigationProps = usePopoverArrowNavigation();
 
       const columnActions = useMemo(() => {
@@ -111,8 +114,6 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
       const clickActionsButton = useCallback(() => {
         actionsButtonRef.current?.click();
       }, []);
-      const [isActionsButtonFocused, setIsActionsButtonFocused] =
-        useState(false);
 
       const { sortingArrow, ariaSort, sortingScreenReaderText } =
         useSortingUtils({
@@ -129,10 +130,6 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
         prefix: 'euiDataGridCellHeader',
         suffix: 'sorting',
       });
-      const actionsAriaId = useGeneratedHtmlId({
-        prefix: 'euiDataGridCellHeader',
-        suffix: 'actions',
-      });
 
       const classes = classnames(
         {
@@ -148,31 +145,14 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
       const title = displayAsText || id;
       const children = display || displayAsText || id;
 
-      const headerCellActionButton = (
-        <button
-          ref={actionsButtonRef}
-          className="euiDataGridHeaderCell__button"
-          css={emptyHoverStyles.text}
-          onClick={() => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen)}
-          onFocus={() => setIsActionsButtonFocused(true)}
-          onBlur={() => setIsActionsButtonFocused(false)}
-          aria-labelledby={`${contentAriaId} ${actionsAriaId}`}
-          aria-hidden={isActionsButtonFocused ? 'false' : 'true'} // prevent button being read on header cell focus
-          data-test-subj={`dataGridHeaderCellActionButton-${id}`}
-        >
-          <div className="euiDataGridHeaderCell__icon">
-            <EuiIcon type="boxesVertical" size="s" color="text" />
-          </div>
-          <p id={contentAriaId} hidden>
-            {title},
-          </p>
-          <p id={actionsAriaId} hidden>
-            <EuiI18n
-              token="euiDataGridHeaderCell.headerActions"
-              default="Click to view column header actions"
-            />
-          </p>
-        </button>
+      const actionsButtonAriaLabel = useEuiI18n(
+        'euiDataGridHeaderCell.actionsButtonAriaLabel',
+        '{title}. Click to view column header actions.',
+        { title }
+      );
+      const actionsEnterKeyInstructions = useEuiI18n(
+        'euiDataGridHeaderCell.actionsEnterKeyInstructions',
+        "Press the Enter key to view this column's actions"
       );
 
       return (
@@ -185,54 +165,68 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
           aria-sort={ariaSort}
           hasActionsPopover={showColumnActions}
           openActionsPopover={clickActionsButton}
-          aria-label={title}
+          aria-labelledby={contentAriaId}
           aria-describedby={sortingAriaId}
         >
-          {column.isResizable !== false && width != null ? (
-            <EuiDataGridColumnResizer
-              columnId={id}
-              columnWidth={width}
-              setColumnWidth={setColumnWidth}
-            />
-          ) : null}
-
-          {!showColumnActions ? (
-            <>
-              <CellContent title={title} arrow={sortingArrow}>
-                {children}
-              </CellContent>
-              {sortingScreenReaderText && (
-                <EuiScreenReaderOnly>
-                  <p>{sortingScreenReaderText}</p>
-                </EuiScreenReaderOnly>
-              )}
-            </>
-          ) : (
+          {(hasFocusTrap) => (
             <>
-              <CellContent title={title} arrow={sortingArrow}>
+              {column.isResizable !== false && width != null ? (
+                <EuiDataGridColumnResizer
+                  columnId={id}
+                  columnWidth={width}
+                  setColumnWidth={setColumnWidth}
+                />
+              ) : null}
+
+              <CellContent
+                title={title}
+                arrow={sortingArrow}
+                id={contentAriaId}
+                aria-hidden // VO reads out the content twice without this :T
+              >
                 {children}
               </CellContent>
-              <EuiPopover
-                display="block"
-                panelPaddingSize="none"
-                offset={7}
-                anchorPosition="downRight"
-                css={{ marginInlineStart: 'auto' }} // Align to right
-                button={headerCellActionButton}
-                isOpen={isPopoverOpen}
-                closePopover={() => setIsPopoverOpen(false)}
-                {...popoverArrowNavigationProps}
-              >
-                <EuiListGroup
-                  listItems={columnActions}
-                  gutterSize="none"
-                  data-test-subj={`dataGridHeaderCellActionGroup-${id}`}
-                />
-              </EuiPopover>
 
               <p id={sortingAriaId} hidden>
                 {sortingScreenReaderText}
               </p>
+
+              {showColumnActions && (
+                <EuiPopover
+                  display="block"
+                  panelPaddingSize="none"
+                  offset={7}
+                  anchorPosition="downRight"
+                  css={{ marginInlineStart: 'auto' }} // Align to right
+                  button={
+                    <button
+                      ref={actionsButtonRef}
+                      className="euiDataGridHeaderCell__button"
+                      css={emptyHoverStyles.text}
+                      onClick={togglePopover}
+                      aria-label={
+                        hasFocusTrap
+                          ? actionsButtonAriaLabel
+                          : actionsEnterKeyInstructions
+                      }
+                      data-test-subj={`dataGridHeaderCellActionButton-${id}`}
+                    >
+                      <div className="euiDataGridHeaderCell__icon">
+                        <EuiIcon type="boxesVertical" size="s" color="text" />
+                      </div>
+                    </button>
+                  }
+                  isOpen={isPopoverOpen}
+                  closePopover={closePopover}
+                  {...popoverArrowNavigationProps}
+                >
+                  <EuiListGroup
+                    listItems={columnActions}
+                    gutterSize="none"
+                    data-test-subj={`dataGridHeaderCellActionGroup-${id}`}
+                  />
+                </EuiPopover>
+              )}
             </>
           )}
         </EuiDataGridHeaderCellWrapper>