From a4493d9037eae9110c6ab4fbf672abb15c2709d9 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Mon, 7 Nov 2022 14:55:57 -0800
Subject: [PATCH] [EuiDataGrid] Add keyboard shortcuts reference (#6036)

* Add `:focus-within` support to EuiScreenReaderOnly showOnFocus

- which expands/makes the prop more flexible for, e.g. buttons wrapped in tooltips or popovers

* Set up keyboard shortcuts button + popover + styling

* Set up showKeyboardShortcuts configuration

- if set to false, visually hide but still allow keyboard users to focus/access the info

* Add documentation

* Update PR with recently added new `keyboard` icon and `kbd` styles

* [PR feedback] Misc positioning

- Move keyboard shortcuts button to leftmost position in icon controls

- Add EuiPopoverTitle

* [PR feedback] aria-labelledby

* Popover supdates to account for EuiDescriptionList Emotion conversion

* Mobile/responsive styling improvements

* i18n all remaining strings

* Add keyboard shortcut popover unit tests

* Fix failing toolbar unit test

* Update snapshots

* changelog

* Update/fix datagrid E2E tests

* [PR feedback] Copy
---
 .../accessibility/screen_reader_focus.tsx     |  12 +
 src-docs/src/views/datagrid/_snippets.tsx     |   1 +
 src-docs/src/views/datagrid/toolbar/_grid.js  |   2 +
 .../src/views/datagrid/toolbar/visibility.js  |  13 +
 .../screen_reader_only.styles.ts              |   2 +-
 .../screen_reader_only/screen_reader_only.tsx |   2 +-
 .../__snapshots__/data_grid.test.tsx.snap     | 112 ++++++-
 src/components/datagrid/_index.scss           |   1 +
 .../keyboard_shortcuts.test.tsx.snap          | 263 +++++++++++++++++
 .../_data_grid_keyboard_shortcuts.scss        |  17 ++
 .../controls/data_grid_toolbar.test.tsx       |  25 +-
 .../datagrid/controls/data_grid_toolbar.tsx   |  14 +-
 src/components/datagrid/controls/index.ts     |   1 +
 .../controls/keyboard_shortcuts.test.tsx      |  27 ++
 .../datagrid/controls/keyboard_shortcuts.tsx  | 275 ++++++++++++++++++
 src/components/datagrid/data_grid.spec.tsx    |   6 +
 src/components/datagrid/data_grid.tsx         |   6 +-
 src/components/datagrid/data_grid_types.ts    |   6 +
 .../datagrid/utils/scrolling.spec.tsx         |   2 +-
 upcoming_changelogs/6036.md                   |   2 +
 20 files changed, 776 insertions(+), 13 deletions(-)
 create mode 100644 src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
 create mode 100644 src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss
 create mode 100644 src/components/datagrid/controls/keyboard_shortcuts.test.tsx
 create mode 100644 src/components/datagrid/controls/keyboard_shortcuts.tsx
 create mode 100644 upcoming_changelogs/6036.md

diff --git a/src-docs/src/views/accessibility/screen_reader_focus.tsx b/src-docs/src/views/accessibility/screen_reader_focus.tsx
index b145df42fea..af16f2f4462 100644
--- a/src-docs/src/views/accessibility/screen_reader_focus.tsx
+++ b/src-docs/src/views/accessibility/screen_reader_focus.tsx
@@ -4,6 +4,8 @@ import {
   EuiScreenReaderOnly,
   EuiText,
   EuiLink,
+  EuiToolTip,
+  EuiButtonIcon,
 } from '../../../../src/components';
 
 export default () => (
@@ -14,5 +16,15 @@ export default () => (
         <EuiLink href="#/utilities/accessibility">Link text</EuiLink>
       </EuiScreenReaderOnly>
     </p>
+    <p>
+      This tooltip + button is visible on focus within:{' '}
+      <EuiScreenReaderOnly showOnFocus>
+        <span>
+          <EuiToolTip content="Information">
+            <EuiButtonIcon iconType="iInCircle" aria-label="Information" />
+          </EuiToolTip>
+        </span>
+      </EuiScreenReaderOnly>
+    </p>
   </EuiText>
 );
diff --git a/src-docs/src/views/datagrid/_snippets.tsx b/src-docs/src/views/datagrid/_snippets.tsx
index 1680b638853..66f82019fcd 100644
--- a/src-docs/src/views/datagrid/_snippets.tsx
+++ b/src-docs/src/views/datagrid/_snippets.tsx
@@ -70,6 +70,7 @@ inMemory={{ level: 'sorting' }}`,
   showColumnSelector: false,
   showDisplaySelector: false,
   showSortSelector: false,
+  showKeyboardShortcuts: false,
   showFullScreenSelector: false,
   additionalControls: {
     left: <EuiButtonEmpty size="xs" />,
diff --git a/src-docs/src/views/datagrid/toolbar/_grid.js b/src-docs/src/views/datagrid/toolbar/_grid.js
index 0afb8f04460..4121f53ee54 100644
--- a/src-docs/src/views/datagrid/toolbar/_grid.js
+++ b/src-docs/src/views/datagrid/toolbar/_grid.js
@@ -48,6 +48,7 @@ const DataGridStyle = ({
   showColumnSelector,
   showSortSelector,
   showDisplaySelector,
+  showKeyboardShortcuts,
   showFullScreenSelector,
   allowDensity,
   allowRowHeight,
@@ -114,6 +115,7 @@ const DataGridStyle = ({
     showColumnSelector: toggleColumnSelector,
     showSortSelector: showSortSelector,
     showDisplaySelector: toggleDisplaySelector,
+    showKeyboardShortcuts: showKeyboardShortcuts,
     showFullScreenSelector: showFullScreenSelector,
   };
 
diff --git a/src-docs/src/views/datagrid/toolbar/visibility.js b/src-docs/src/views/datagrid/toolbar/visibility.js
index 26d356f0646..f885a69099e 100644
--- a/src-docs/src/views/datagrid/toolbar/visibility.js
+++ b/src-docs/src/views/datagrid/toolbar/visibility.js
@@ -49,6 +49,7 @@ const DataGrid = () => {
   const [showColumnSelector, setShowColumnSelector] = useState(true);
   const [allowHideColumns, setAllowHideColumns] = useState(true);
   const [allowOrderingColumns, setAllowOrderingColumns] = useState(true);
+  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState(true);
   const [showFullScreenSelector, setShowFullScreenSelector] = useState(true);
   const [toolbarType, setToolbarType] = useState('true');
 
@@ -76,6 +77,10 @@ const DataGrid = () => {
     setAllowRowHeight(optionId === 'true');
   };
 
+  const onShowKeyboardShortcutsChange = (optionId) => {
+    setShowKeyboardShortcuts(optionId === 'true');
+  };
+
   const onShowFullScreenSelectorChange = (optionId) => {
     setShowFullScreenSelector(optionId === 'true');
   };
@@ -232,6 +237,13 @@ const DataGrid = () => {
                 </ul>
               )}
 
+              <li>
+                {createItem('Show keyboard shortcuts', {
+                  idSelected: showKeyboardShortcuts.toString(),
+                  onChange: onShowKeyboardShortcutsChange,
+                })}
+              </li>
+
               <li>
                 {createItem('Show full screen', {
                   idSelected: showFullScreenSelector.toString(),
@@ -250,6 +262,7 @@ const DataGrid = () => {
         showColumnSelector={showColumnSelector}
         showSortSelector={showSortSelector}
         showDisplaySelector={showDisplaySelector}
+        showKeyboardShortcuts={showKeyboardShortcuts}
         showFullScreenSelector={showFullScreenSelector}
         allowDensity={allowDensity}
         allowRowHeight={allowRowHeight}
diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
index f0c020090d1..3599923538a 100644
--- a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
+++ b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
@@ -38,7 +38,7 @@ export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => ({
   euiScreenReaderOnly: showOnFocus
     ? css`
         // The :active selector is necessary for Safari which removes :focus when a button is pressed
-        &:not(:focus):not(:active) {
+        &:not(:focus):not(:active):not(:focus-within) {
           ${euiScreenReaderOnly()}
         }
       `
diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx
index 2893915e6d3..b86114c9847 100644
--- a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx
+++ b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx
@@ -19,7 +19,7 @@ export interface EuiScreenReaderOnlyProps {
   children: ReactElement;
 
   /**
-   * For keyboard navigation, force content to display visually upon focus.
+   * For keyboard navigation, force content to display visually upon focus/focus-within.
    */
   showOnFocus?: boolean;
   className?: string;
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 83d56c7cfa9..7223dba7ccc 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -476,7 +476,7 @@ Array [
     >
       <div
         class="euiDataGrid__controls"
-        data-test-sub="dataGridControls"
+        data-test-subj="dataGridControls"
       >
         <div
           class="euiDataGrid__leftControls"
@@ -517,6 +517,32 @@ Array [
         <div
           class="euiDataGrid__rightControls"
         >
+          <div
+            class="euiPopover emotion-euiPopover"
+            data-test-subj="dataGridKeyboardShortcutsPopover"
+          >
+            <div
+              class="euiPopover__anchor css-16vtueo-render"
+            >
+              <span
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+              >
+                <button
+                  aria-label="Keyboard shortcuts"
+                  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+                  data-test-subj="dataGridKeyboardShortcutsButton"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiButtonIcon__icon"
+                    color="inherit"
+                    data-euiicon-type="keyboard"
+                  />
+                </button>
+              </span>
+            </div>
+          </div>
           <div
             class="euiPopover emotion-euiPopover"
             data-test-subj="dataGridDisplaySelectorPopover"
@@ -921,7 +947,7 @@ Array [
     >
       <div
         class="euiDataGrid__controls"
-        data-test-sub="dataGridControls"
+        data-test-subj="dataGridControls"
       >
         <div
           class="euiDataGrid__leftControls"
@@ -962,6 +988,32 @@ Array [
         <div
           class="euiDataGrid__rightControls"
         >
+          <div
+            class="euiPopover emotion-euiPopover"
+            data-test-subj="dataGridKeyboardShortcutsPopover"
+          >
+            <div
+              class="euiPopover__anchor css-16vtueo-render"
+            >
+              <span
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+              >
+                <button
+                  aria-label="Keyboard shortcuts"
+                  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+                  data-test-subj="dataGridKeyboardShortcutsButton"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiButtonIcon__icon"
+                    color="inherit"
+                    data-euiicon-type="keyboard"
+                  />
+                </button>
+              </span>
+            </div>
+          </div>
           <div
             class="euiPopover emotion-euiPopover"
             data-test-subj="dataGridDisplaySelectorPopover"
@@ -1710,7 +1762,7 @@ Array [
     >
       <div
         class="euiDataGrid__controls"
-        data-test-sub="dataGridControls"
+        data-test-subj="dataGridControls"
       >
         <div
           class="euiDataGrid__leftControls"
@@ -1748,6 +1800,32 @@ Array [
         <div
           class="euiDataGrid__rightControls"
         >
+          <div
+            class="euiPopover emotion-euiPopover"
+            data-test-subj="dataGridKeyboardShortcutsPopover"
+          >
+            <div
+              class="euiPopover__anchor css-16vtueo-render"
+            >
+              <span
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+              >
+                <button
+                  aria-label="Keyboard shortcuts"
+                  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+                  data-test-subj="dataGridKeyboardShortcutsButton"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiButtonIcon__icon"
+                    color="inherit"
+                    data-euiicon-type="keyboard"
+                  />
+                </button>
+              </span>
+            </div>
+          </div>
           <div
             class="euiPopover emotion-euiPopover"
             data-test-subj="dataGridDisplaySelectorPopover"
@@ -2154,7 +2232,7 @@ Array [
     >
       <div
         class="euiDataGrid__controls"
-        data-test-sub="dataGridControls"
+        data-test-subj="dataGridControls"
       >
         <div
           class="euiDataGrid__leftControls"
@@ -2192,6 +2270,32 @@ Array [
         <div
           class="euiDataGrid__rightControls"
         >
+          <div
+            class="euiPopover emotion-euiPopover"
+            data-test-subj="dataGridKeyboardShortcutsPopover"
+          >
+            <div
+              class="euiPopover__anchor css-16vtueo-render"
+            >
+              <span
+                class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+              >
+                <button
+                  aria-label="Keyboard shortcuts"
+                  class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+                  data-test-subj="dataGridKeyboardShortcutsButton"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiButtonIcon__icon"
+                    color="inherit"
+                    data-euiicon-type="keyboard"
+                  />
+                </button>
+              </span>
+            </div>
+          </div>
           <div
             class="euiPopover emotion-euiPopover"
             data-test-subj="dataGridDisplaySelectorPopover"
diff --git a/src/components/datagrid/_index.scss b/src/components/datagrid/_index.scss
index e85006fc93e..f2ac50334ec 100644
--- a/src/components/datagrid/_index.scss
+++ b/src/components/datagrid/_index.scss
@@ -9,3 +9,4 @@
 @import 'controls/data_grid_column_selector';
 @import 'controls/data_grid_column_sorting';
 @import 'controls/data_grid_display';
+@import 'controls/data_grid_keyboard_shortcuts';
diff --git a/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
new file mode 100644
index 00000000000..7ca2c1f6b8c
--- /dev/null
+++ b/src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap
@@ -0,0 +1,263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useDataGridKeyboardShortcuts returns a popover containing a list of keyboard shortcuts 1`] = `
+<body>
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    <div
+      class="euiPopover euiPopover-isOpen emotion-euiPopover"
+      data-test-subj="dataGridKeyboardShortcutsPopover"
+    >
+      <div
+        class="euiPopover__anchor css-16vtueo-render"
+      >
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+        >
+          <button
+            aria-label="Keyboard shortcuts"
+            class="euiButtonIcon euiButtonIcon--xSmall emotion-euiButtonIcon-empty-text-hoverStyles"
+            data-test-subj="dataGridKeyboardShortcutsButton"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="keyboard"
+            />
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    data-euiportal="true"
+  >
+    <div
+      aria-hidden="true"
+      data-aria-hidden="true"
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      aria-hidden="true"
+      data-aria-hidden="true"
+      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="false"
+    >
+      <div
+        aria-describedby="generated-id"
+        aria-live="off"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-bottom"
+        data-autofocus="true"
+        data-popover-open="true"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: 16px; left: -22px; z-index: 2000;"
+        tabindex="0"
+      >
+        <div
+          class="emotion-euiPopoverArrow-bottom"
+          data-popover-arrow="bottom"
+          style="left: 10px; top: 0px;"
+        />
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a dialog. To close this dialog, hit escape.
+        </p>
+        <div>
+          <div
+            class="euiPopoverTitle emotion-euiPopoverTitle-m-s"
+          >
+            <h2
+              id="generated-id"
+            >
+              Keyboard shortcuts
+            </h2>
+          </div>
+          <div
+            class="euiText euiDataGrid__keyboardShortcuts emotion-euiText-xs"
+          >
+            <dl
+              aria-labelledby="generated-id"
+              class="euiDescriptionList emotion-euiDescriptionList-column-center"
+              data-type="column"
+            >
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Up arrow
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Move one cell up
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Down arrow
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Move one cell down
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Right arrow
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Move one cell right
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Left arrow
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Move one cell left
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Home
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Move to the first cell of the current row
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  End
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Move to the last cell of the current row
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Ctrl
+                </kbd>
+                 
+                <kbd>
+                  Home
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Move to the first cell of the current page
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Ctrl
+                </kbd>
+                 
+                <kbd>
+                  End
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Move to the last cell of the current page
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Page Up
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Go to the last row of the previous page
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Page Down
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Go to the first row of the next page
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Enter
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Open cell details and actions
+              </dd>
+              <dt
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+              >
+                <kbd>
+                  Escape
+                </kbd>
+              </dt>
+              <dd
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+              >
+                Close cell details and actions
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      data-aria-hidden="true"
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
diff --git a/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss b/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss
new file mode 100644
index 00000000000..bc991600e2b
--- /dev/null
+++ b/src/components/datagrid/controls/_data_grid_keyboard_shortcuts.scss
@@ -0,0 +1,17 @@
+.euiDataGrid__keyboardShortcuts {
+  display: block;
+  max-inline-size: $euiSizeXXL * 10;
+  max-block-size: 80vh;
+  overflow-y: auto;
+  overflow-block: auto;
+
+  .euiDescriptionList {
+    .euiDescriptionList__title {
+      width: 25%;
+    }
+
+    .euiDescriptionList__description {
+      width: 75%;
+    }
+  }
+}
diff --git a/src/components/datagrid/controls/data_grid_toolbar.test.tsx b/src/components/datagrid/controls/data_grid_toolbar.test.tsx
index 9c7e0bfff7f..2d7bfa9299f 100644
--- a/src/components/datagrid/controls/data_grid_toolbar.test.tsx
+++ b/src/components/datagrid/controls/data_grid_toolbar.test.tsx
@@ -23,6 +23,7 @@ describe('EuiDataGridToolbar', () => {
     isFullScreen: false,
     fullScreenSelector: <div>mock fullscreen selector</div>,
     displaySelector: <div>mock style selector</div>,
+    keyboardShortcuts: <div>mock keyboard shortcuts</div>,
     columnSelector: <div>mock column selector</div>,
     columnSorting: <div>mock column sorting</div>,
   };
@@ -33,7 +34,7 @@ describe('EuiDataGridToolbar', () => {
     expect(component).toMatchInlineSnapshot(`
       <div
         className="euiDataGrid__controls"
-        data-test-sub="dataGridControls"
+        data-test-subj="dataGridControls"
       >
         <div
           className="euiDataGrid__leftControls"
@@ -48,6 +49,9 @@ describe('EuiDataGridToolbar', () => {
         <div
           className="euiDataGrid__rightControls"
         >
+          <div>
+            mock keyboard shortcuts
+          </div>
           <div>
             mock style selector
           </div>
@@ -67,14 +71,24 @@ describe('EuiDataGridToolbar', () => {
     expect(component).toMatchInlineSnapshot(`
       <div
         className="euiDataGrid__controls"
-        data-test-sub="dataGridControls"
+        data-test-subj="dataGridControls"
       >
         <div
           className="euiDataGrid__leftControls"
         />
         <div
           className="euiDataGrid__rightControls"
-        />
+        >
+          <EuiScreenReaderOnly
+            showOnFocus={true}
+          >
+            <span>
+              <div>
+                mock keyboard shortcuts
+              </div>
+            </span>
+          </EuiScreenReaderOnly>
+        </div>
       </div>
     `);
   });
@@ -99,7 +113,7 @@ describe('EuiDataGridToolbar', () => {
     expect(component).toMatchInlineSnapshot(`
       <div
         className="euiDataGrid__controls"
-        data-test-sub="dataGridControls"
+        data-test-subj="dataGridControls"
       >
         <div
           className="euiDataGrid__leftControls"
@@ -114,6 +128,9 @@ describe('EuiDataGridToolbar', () => {
           <div>
             world
           </div>
+          <div>
+            mock keyboard shortcuts
+          </div>
         </div>
       </div>
     `);
diff --git a/src/components/datagrid/controls/data_grid_toolbar.tsx b/src/components/datagrid/controls/data_grid_toolbar.tsx
index 1cf496c1aaa..4c30a18d35b 100644
--- a/src/components/datagrid/controls/data_grid_toolbar.tsx
+++ b/src/components/datagrid/controls/data_grid_toolbar.tsx
@@ -14,6 +14,7 @@ import {
   EuiDataGridToolBarAdditionalControlsOptions,
   EuiDataGridToolBarAdditionalControlsLeftOptions,
 } from '../data_grid_types';
+import { EuiScreenReaderOnly } from '../../accessibility';
 import { IS_JEST_ENVIRONMENT } from '../../../utils';
 
 // When below this number the grid only shows the right control icon buttons
@@ -25,6 +26,7 @@ export const EuiDataGridToolbar = ({
   toolbarVisibility,
   isFullScreen,
   fullScreenSelector,
+  keyboardShortcuts,
   displaySelector,
   columnSelector,
   columnSorting,
@@ -35,7 +37,7 @@ export const EuiDataGridToolbar = ({
     : gridWidth > minSizeForControls || isFullScreen;
 
   return (
-    <div className="euiDataGrid__controls" data-test-sub="dataGridControls">
+    <div className="euiDataGrid__controls" data-test-subj="dataGridControls">
       {hasRoomForGridControls && (
         <div className="euiDataGrid__leftControls">
           {renderAdditionalControls(toolbarVisibility, 'left.prepend')}
@@ -56,6 +58,16 @@ export const EuiDataGridToolbar = ({
       )}
       <div className="euiDataGrid__rightControls">
         {renderAdditionalControls(toolbarVisibility, 'right')}
+        {checkOrDefaultToolBarDisplayOptions(
+          toolbarVisibility,
+          'showKeyboardShortcuts'
+        ) ? (
+          keyboardShortcuts
+        ) : (
+          <EuiScreenReaderOnly showOnFocus>
+            <span>{keyboardShortcuts}</span>
+          </EuiScreenReaderOnly>
+        )}
         {checkOrDefaultToolBarDisplayOptions(
           toolbarVisibility,
           'showDisplaySelector'
diff --git a/src/components/datagrid/controls/index.ts b/src/components/datagrid/controls/index.ts
index 62f5a1435b4..5c4a98c398d 100644
--- a/src/components/datagrid/controls/index.ts
+++ b/src/components/datagrid/controls/index.ts
@@ -9,6 +9,7 @@
 export { useDataGridColumnSelector } from './column_selector';
 export { useDataGridColumnSorting } from './column_sorting';
 export { useDataGridDisplaySelector, startingStyles } from './display_selector';
+export { useDataGridKeyboardShortcuts } from './keyboard_shortcuts';
 export { useDataGridFullScreenSelector } from './fullscreen_selector';
 export {
   checkOrDefaultToolBarDisplayOptions,
diff --git a/src/components/datagrid/controls/keyboard_shortcuts.test.tsx b/src/components/datagrid/controls/keyboard_shortcuts.test.tsx
new file mode 100644
index 00000000000..2cd0f124cba
--- /dev/null
+++ b/src/components/datagrid/controls/keyboard_shortcuts.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { render, waitForEuiPopoverOpen } from '../../../test/rtl';
+import { useDataGridKeyboardShortcuts } from './keyboard_shortcuts';
+
+describe('useDataGridKeyboardShortcuts', () => {
+  it('returns a popover containing a list of keyboard shortcuts', async () => {
+    const { result } = renderHook(() => useDataGridKeyboardShortcuts());
+    const { baseElement, getByTestSubject, rerender } = render(
+      <>{result.current.keyboardShortcuts}</>
+    );
+
+    act(() => getByTestSubject('dataGridKeyboardShortcutsButton').click());
+    rerender(<>{result.current.keyboardShortcuts}</>);
+    await waitForEuiPopoverOpen();
+
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/src/components/datagrid/controls/keyboard_shortcuts.tsx b/src/components/datagrid/controls/keyboard_shortcuts.tsx
new file mode 100644
index 00000000000..9d01a3ceb79
--- /dev/null
+++ b/src/components/datagrid/controls/keyboard_shortcuts.tsx
@@ -0,0 +1,275 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useState, useMemo, ReactNode } from 'react';
+
+import { useGeneratedHtmlId } from '../../../services';
+import { EuiButtonIcon } from '../../button';
+import { EuiToolTip } from '../../tool_tip';
+import { EuiPopover, EuiPopoverTitle } from '../../popover';
+import { EuiDescriptionList } from '../../description_list';
+import { EuiText } from '../../text';
+import { useEuiI18n, EuiI18n } from '../../i18n';
+
+export const useDataGridKeyboardShortcuts = (): {
+  keyboardShortcuts: ReactNode;
+} => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const title = useEuiI18n('euiKeyboardShortcuts.title', 'Keyboard shortcuts');
+  const titleId = useGeneratedHtmlId();
+
+  const keyboardShortcuts = useMemo(
+    () => (
+      <EuiPopover
+        data-test-subj="dataGridKeyboardShortcutsPopover"
+        isOpen={isOpen}
+        closePopover={() => setIsOpen(false)}
+        anchorPosition="downRight"
+        button={
+          <EuiToolTip content={title} delay="long">
+            <EuiButtonIcon
+              size="xs"
+              iconType="keyboard"
+              color="text"
+              data-test-subj="dataGridKeyboardShortcutsButton"
+              onClick={() => setIsOpen(!isOpen)}
+              aria-label={title}
+            />
+          </EuiToolTip>
+        }
+      >
+        <EuiPopoverTitle paddingSize="s">
+          <h2 id={titleId}>{title}</h2>
+        </EuiPopoverTitle>
+        <EuiText className="euiDataGrid__keyboardShortcuts" size="xs">
+          <EuiDescriptionList
+            aria-labelledby={titleId}
+            type="column"
+            align="center"
+            compressed
+            gutterSize="s"
+            listItems={[
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.upArrowTitle"
+                      default="Up arrow"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.upArrowDescription"
+                    default="Move one cell up"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.downArrowTitle"
+                      default="Down arrow"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.downArrowDescription"
+                    default="Move one cell down"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.rightArrowTitle"
+                      default="Right arrow"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.rightArrowDescription"
+                    default="Move one cell right"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.leftArrowTitle"
+                      default="Left arrow"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.leftArrowDescription"
+                    default="Move one cell left"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.homeTitle"
+                      default="Home"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.homeDescription"
+                    default="Move to the first cell of the current row"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.endTitle"
+                      default="End"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.endDescription"
+                    default="Move to the last cell of the current row"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <>
+                    <kbd>
+                      <EuiI18n
+                        token="euiKeyboardShortcuts.ctrl"
+                        default="Ctrl"
+                      />
+                    </kbd>{' '}
+                    <kbd>
+                      <EuiI18n
+                        token="euiKeyboardShortcuts.homeTitle"
+                        default="Home"
+                      />
+                    </kbd>
+                  </>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.ctrlHomeDescription"
+                    default="Move to the first cell of the current page"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <>
+                    <kbd>
+                      <EuiI18n
+                        token="euiKeyboardShortcuts.ctrl"
+                        default="Ctrl"
+                      />
+                    </kbd>{' '}
+                    <kbd>
+                      <EuiI18n
+                        token="euiKeyboardShortcuts.endTitle"
+                        default="End"
+                      />
+                    </kbd>
+                  </>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.ctrlEndDescription"
+                    default="Move to the last cell of the current page"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.pageUpTitle"
+                      default="Page Up"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.pageUpDescription"
+                    default="Go to the last row of the previous page"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.pageDownTitle"
+                      default="Page Down"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.pageDownDescription"
+                    default="Go to the first row of the next page"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.enterTitle"
+                      default="Enter"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.enterDescription"
+                    default="Open cell details and actions"
+                  />
+                ),
+              },
+              {
+                title: (
+                  <kbd>
+                    <EuiI18n
+                      token="euiKeyboardShortcuts.escapeTitle"
+                      default="Escape"
+                    />
+                  </kbd>
+                ),
+                description: (
+                  <EuiI18n
+                    token="euiKeyboardShortcuts.escapeDescription"
+                    default="Close cell details and actions"
+                  />
+                ),
+              },
+            ]}
+          />
+        </EuiText>
+      </EuiPopover>
+    ),
+    [isOpen, title, titleId]
+  );
+
+  return { keyboardShortcuts };
+};
diff --git a/src/components/datagrid/data_grid.spec.tsx b/src/components/datagrid/data_grid.spec.tsx
index c6e3949f921..7be81fb1d05 100644
--- a/src/components/datagrid/data_grid.spec.tsx
+++ b/src/components/datagrid/data_grid.spec.tsx
@@ -268,6 +268,12 @@ describe('EuiDataGrid', () => {
           'dataGridColumnSelectorButton'
         );
         cy.realPress('Tab');
+        cy.focused().should(
+          'have.attr',
+          'data-test-subj',
+          'dataGridKeyboardShortcutsButton'
+        );
+        cy.realPress('Tab');
         cy.focused().should(
           'have.attr',
           'data-test-subj',
diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
index bf858177a02..e15135cd541 100644
--- a/src/components/datagrid/data_grid.tsx
+++ b/src/components/datagrid/data_grid.tsx
@@ -24,6 +24,7 @@ import {
   useDataGridDisplaySelector,
   startingStyles,
   useDataGridFullScreenSelector,
+  useDataGridKeyboardShortcuts,
   checkOrDefaultToolBarDisplayOptions,
   EuiDataGridToolbar,
 } from './controls';
@@ -271,10 +272,12 @@ export const EuiDataGrid = forwardRef<EuiDataGridRefProps, EuiDataGridProps>(
     const { cellPopoverContext, cellPopover } = useCellPopover();
 
     /**
-     * Toolbar & fullscreen
+     * Toolbar, keyboard shortcuts, & fullscreen
      */
     const showToolbar = !!toolbarVisibility;
 
+    const { keyboardShortcuts } = useDataGridKeyboardShortcuts();
+
     const {
       isFullScreen,
       setIsFullScreen,
@@ -384,6 +387,7 @@ export const EuiDataGrid = forwardRef<EuiDataGridRefProps, EuiDataGridProps>(
                     toolbarVisibility={toolbarVisibility}
                     isFullScreen={isFullScreen}
                     fullScreenSelector={fullScreenSelector}
+                    keyboardShortcuts={keyboardShortcuts}
                     displaySelector={displaySelector}
                     columnSelector={columnSelector}
                     columnSorting={columnSorting}
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index f6cfb0d0a2e..180ed1f2c3c 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -39,6 +39,7 @@ export interface EuiDataGridToolbarProps {
   toolbarVisibility: boolean | EuiDataGridToolBarVisibilityOptions;
   isFullScreen: boolean;
   fullScreenSelector: ReactNode;
+  keyboardShortcuts: ReactNode;
   displaySelector: ReactNode;
   columnSelector: ReactNode;
   columnSorting: ReactNode;
@@ -779,6 +780,11 @@ export interface EuiDataGridToolBarVisibilityOptions {
    * Allows the ability for the user to sort rows based upon column values
    */
   showSortSelector?: boolean;
+  /**
+   * Displays a popover listing all keyboard controls and shortcuts for the data grid.
+   * If set to `false`, the toggle will be visually hidden, but still focusable by keyboard and screen reader users.
+   */
+  showKeyboardShortcuts?: boolean;
   /**
    * Allows user to be able to fullscreen the data grid. If set to `false` make sure your grid fits within a large enough panel to still show the other controls.
    */
diff --git a/src/components/datagrid/utils/scrolling.spec.tsx b/src/components/datagrid/utils/scrolling.spec.tsx
index dbdbf4b5eeb..90b851e823c 100644
--- a/src/components/datagrid/utils/scrolling.spec.tsx
+++ b/src/components/datagrid/utils/scrolling.spec.tsx
@@ -37,7 +37,7 @@ describe('useScroll', () => {
   describe('cell focus', () => {
     it('fully scrolls cells into view (accounting for sticky headers, rows, and scrollbars)', () => {
       cy.realMount(<EuiDataGrid {...baseProps} />);
-      cy.repeatRealPress('Tab', 3);
+      cy.repeatRealPress('Tab', 4);
       cy.realPress('ArrowDown');
 
       cy.realPress('End');
diff --git a/upcoming_changelogs/6036.md b/upcoming_changelogs/6036.md
new file mode 100644
index 00000000000..85b40b6475b
--- /dev/null
+++ b/upcoming_changelogs/6036.md
@@ -0,0 +1,2 @@
+- Added a keyboard shortcuts popover to `EuiDataGrid`'s toolbar. This can be visually hidden via `toolbarVisibility.showKeyboardShortcuts`, but will always remain accessible to keyboard and screen reader users.
+- `EuiScreenReaderOnly`'s `showOnFocus` prop now also shows on focus within its children