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 [ >
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + +
    +