Skip to content

Commit

Permalink
Add screen reader text for Enter key behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen committed Jan 4, 2024
1 parent 0bcef9b commit 41ed92e
Show file tree
Hide file tree
Showing 8 changed files with 102 additions and 0 deletions.
1 change: 1 addition & 0 deletions changelogs/upcoming/7448.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@
- Headers are now always navigable by arrow key, regardless of whether the header cells contain interactive content
- Non-expandable cells containing any amount of interactive content now must be entered via Enter or F2 keypress
- Expandable cells continue to be toggled via Enter or F2 keypress
- `EuiDataGrid` now provides a direct screen reader hint for Enter key behavior for expandable & interactive cells
48 changes: 48 additions & 0 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -725,6 +725,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
-
A, column 1, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -773,6 +775,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
-
B, column 2, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -821,6 +825,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
-
A, column 1, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -869,6 +875,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
-
B, column 2, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -917,6 +925,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
-
A, column 1, row 3
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -965,6 +975,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
-
B, column 2, row 3
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -1348,6 +1360,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
-
A, column 2, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -1396,6 +1410,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
-
B, column 3, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -1496,6 +1512,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
-
A, column 2, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -1544,6 +1562,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
-
B, column 3, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -1644,6 +1664,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
-
A, column 2, row 3
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -1692,6 +1714,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
-
B, column 3, row 3
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2036,6 +2060,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
-
A, column 1, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2084,6 +2110,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
-
B, column 2, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2132,6 +2160,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
-
A, column 1, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2180,6 +2210,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
-
B, column 2, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2228,6 +2260,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
-
A, column 1, row 3
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2276,6 +2310,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
-
B, column 2, row 3
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2592,6 +2628,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
-
A, column 1, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2640,6 +2678,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
-
B, column 2, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2688,6 +2728,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
-
A, column 1, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2736,6 +2778,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
-
B, column 2, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2784,6 +2828,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
-
A, column 1, row 3
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -2832,6 +2878,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
-
B, column 2, row 3
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down
8 changes: 8 additions & 0 deletions src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,8 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
>
-
columnA, column 1, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -187,6 +189,8 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
>
-
columnB, column 2, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -239,6 +243,8 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
>
-
columnA, column 1, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -287,6 +293,8 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
>
-
columnB, column 2, row 2
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down
4 changes: 4 additions & 0 deletions src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,8 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
>
-
columnA, column 1, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down Expand Up @@ -192,6 +194,8 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
>
-
columnB, column 2, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down
2 changes: 2 additions & 0 deletions src/components/datagrid/body/cell/__snapshots__/data_grid_cell.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ exports[`EuiDataGridCell renders 1`] = `
>
-
someColumn, column 1, row 1
.
Press the Enter key to expand this cell.
</p>
<div
class="euiDataGridRowCell__actions"
Expand Down
9 changes: 9 additions & 0 deletions src/components/datagrid/body/cell/data_grid_cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,15 @@ const EuiDataGridCellContent: FunctionComponent<
row: ariaRowIndex,
}}
/>
{cellActions && (
<>
{'. '}
<EuiI18n
token="euiDataGridCell.expansionEnterPrompt"
default="Press the Enter key to expand this cell."
/>
</>
)}
</p>
</EuiScreenReaderOnly>
);
Expand Down
17 changes: 17 additions & 0 deletions src/components/datagrid/body/cell/focus_utils.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,23 @@ describe('HandleInteractiveChildren', () => {
});

describe('FocusTrappedChildren', () => {
it('renders a screen reader hint', () => {
const cell = getCellWithInteractiveChildren();
const { container } = render(<FocusTrappedChildren cellEl={cell} />);
expect(container.childNodes[1]).toMatchInlineSnapshot(`
<div
data-focus-lock-disabled="disabled"
>
<p
class="emotion-euiScreenReaderOnly"
>
-
Press the Enter key to interact with this cell's contents.
</p>
</div>
`);
});

describe('on enter', () => {
it('enables the focus trap, all interactive children, and moves focus to the first focusable child', () => {
const cell = getCellWithInteractiveChildren();
Expand Down
13 changes: 13 additions & 0 deletions src/components/datagrid/body/cell/focus_utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import { tabbable } from 'tabbable';

import { keys } from '../../../../services';
import { EuiFocusTrap } from '../../../focus_trap';
import { EuiScreenReaderOnly } from '../../../accessibility';
import { EuiI18n } from '../../../i18n';

/**
* This internal utility component is used by all cells, both header and body/footer cells.
Expand Down Expand Up @@ -120,6 +122,17 @@ export const FocusTrappedChildren: FunctionComponent<
clickOutsideDisables={true}
>
{children}

<EuiScreenReaderOnly>
<p>
{' - '}
<EuiI18n
// eslint-disable-next-line local/i18n
token="euiDataGridCell.focusTrapEnterPrompt"
default="Press the Enter key to interact with this cell's contents."
/>
</p>
</EuiScreenReaderOnly>
</EuiFocusTrap>
);
};
Expand Down

0 comments on commit 41ed92e

Please sign in to comment.