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 [
>
+
+
+
+
+
+
+
+
+
+
+
+
+ You are in a dialog. To close this dialog, hit escape.
+
+
+
+
+ Keyboard shortcuts
+
+
+
+
+ -
+
+ Up arrow
+
+
+ -
+ Move one cell up
+
+ -
+
+ Down arrow
+
+
+ -
+ Move one cell down
+
+ -
+
+ Right arrow
+
+
+ -
+ Move one cell right
+
+ -
+
+ Left arrow
+
+
+ -
+ Move one cell left
+
+ -
+
+ Home
+
+
+ -
+ Move to the first cell of the current row
+
+ -
+
+ End
+
+
+ -
+ Move to the last cell of the current row
+
+ -
+
+ Ctrl
+
+
+
+ Home
+
+
+ -
+ Move to the first cell of the current page
+
+ -
+
+ Ctrl
+
+
+
+ End
+
+
+ -
+ Move to the last cell of the current page
+
+ -
+
+ Page Up
+
+
+ -
+ Go to the last row of the previous page
+
+ -
+
+ Page Down
+
+
+ -
+ Go to the first row of the next page
+
+ -
+
+ Enter
+
+
+ -
+ Open cell details and actions
+
+ -
+
+ Escape
+
+
+ -
+ Close cell details and actions
+
+
+
+
+
+
+
+
+