Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiDataGrid] Add keyboard shortcuts reference #6036

Merged
merged 16 commits into from
Nov 7, 2022
Merged

[EuiDataGrid] Add keyboard shortcuts reference #6036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
5152269
Add `:focus-within` support to EuiScreenReaderOnly showOnFocus
cee-chen Jul 7, 2022
1f45809
Set up keyboard shortcuts button + popover + styling
cee-chen Jul 7, 2022
8bbaac1
Set up showKeyboardShortcuts configuration
cee-chen Jul 7, 2022
380b4b4
Add documentation
cee-chen Jul 7, 2022
8cf2c1f
Update PR with recently added new `keyboard` icon and `kbd` styles
cee-chen Jul 18, 2022
ab66280
[PR feedback] Misc positioning
cee-chen Jul 18, 2022
dc1491f
[PR feedback] aria-labelledby
cee-chen Jul 19, 2022
bd24356
Popover supdates to account for EuiDescriptionList Emotion conversion
cee-chen Oct 27, 2022
25dccd0
Mobile/responsive styling improvements
cee-chen Oct 27, 2022
b6b7ece
i18n all remaining strings
cee-chen Oct 27, 2022
f4dcfa5
Add keyboard shortcut popover unit tests
cee-chen Oct 27, 2022
db15415
Fix failing toolbar unit test
cee-chen Oct 27, 2022
66e7cbc
Update snapshots
cee-chen Oct 27, 2022
c8c231b
changelog
cee-chen Oct 27, 2022
131408e
Update/fix datagrid E2E tests
cee-chen Oct 27, 2022
2fed236
[PR feedback] Copy
cee-chen Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src-docs/src/views/accessibility/screen_reader_focus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
EuiScreenReaderOnly,
EuiText,
EuiLink,
EuiToolTip,
EuiButtonIcon,
} from '../../../../src/components';

export default () => (
Expand All @@ -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>
);
1 change: 1 addition & 0 deletions src-docs/src/views/datagrid/_snippets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ inMemory={{ level: 'sorting' }}`,
showColumnSelector: false,
showDisplaySelector: false,
showSortSelector: false,
showKeyboardShortcuts: false,
showFullScreenSelector: false,
additionalControls: {
left: <EuiButtonEmpty size="xs" />,
Expand Down
2 changes: 2 additions & 0 deletions src-docs/src/views/datagrid/toolbar/_grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const DataGridStyle = ({
showColumnSelector,
showSortSelector,
showDisplaySelector,
showKeyboardShortcuts,
showFullScreenSelector,
allowDensity,
allowRowHeight,
Expand Down Expand Up @@ -114,6 +115,7 @@ const DataGridStyle = ({
showColumnSelector: toggleColumnSelector,
showSortSelector: showSortSelector,
showDisplaySelector: toggleDisplaySelector,
showKeyboardShortcuts: showKeyboardShortcuts,
showFullScreenSelector: showFullScreenSelector,
};

Expand Down
13 changes: 13 additions & 0 deletions src-docs/src/views/datagrid/toolbar/visibility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -76,6 +77,10 @@ const DataGrid = () => {
setAllowRowHeight(optionId === 'true');
};

const onShowKeyboardShortcutsChange = (optionId) => {
setShowKeyboardShortcuts(optionId === 'true');
};

const onShowFullScreenSelectorChange = (optionId) => {
setShowFullScreenSelector(optionId === 'true');
};
Expand Down Expand Up @@ -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(),
Expand All @@ -250,6 +262,7 @@ const DataGrid = () => {
showColumnSelector={showColumnSelector}
showSortSelector={showSortSelector}
showDisplaySelector={showDisplaySelector}
showKeyboardShortcuts={showKeyboardShortcuts}
showFullScreenSelector={showFullScreenSelector}
allowDensity={allowDensity}
allowRowHeight={allowRowHeight}
Expand Down
2 changes: 1 addition & 1 deletion src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
}
`
Expand Down
2 changes: 1 addition & 1 deletion src/components/accessibility/screen_reader_only/screen_reader_only.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
112 changes: 108 additions & 4 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@ Array [
>
<div
class="euiDataGrid__controls"
data-test-sub="dataGridControls"
data-test-subj="dataGridControls"
>
<div
class="euiDataGrid__leftControls"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -921,7 +947,7 @@ Array [
>
<div
class="euiDataGrid__controls"
data-test-sub="dataGridControls"
data-test-subj="dataGridControls"
>
<div
class="euiDataGrid__leftControls"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -1710,7 +1762,7 @@ Array [
>
<div
class="euiDataGrid__controls"
data-test-sub="dataGridControls"
data-test-subj="dataGridControls"
>
<div
class="euiDataGrid__leftControls"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -2154,7 +2232,7 @@ Array [
>
<div
class="euiDataGrid__controls"
data-test-sub="dataGridControls"
data-test-subj="dataGridControls"
>
<div
class="euiDataGrid__leftControls"
Expand Down Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions src/components/datagrid/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Loading