From a4493d9037eae9110c6ab4fbf672abb15c2709d9 Mon Sep 17 00:00:00 2001 From: Constance 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 () => ( Link text

+

+ This tooltip + button is visible on focus within:{' '} + + + + + + + +

); 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: , 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 = () => { )} +
  • + {createItem('Show keyboard shortcuts', { + idSelected: showKeyboardShortcuts.toString(), + onChange: onShowKeyboardShortcutsChange, + })} +
    • +
  • {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 [ >
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + +
    +