[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
elastic · Nov 7, 2022 · a4493d9 · a4493d9
1 parent 787a47c
commit a4493d9
Show file tree

Hide file tree

Showing 20 changed files with 776 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';