Skip to content

Commit

Permalink
[EuiDataGrid] Simplify & DRY out cell/header focus (#7448)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Jan 8, 2024
1 parent 7f161ae commit e67ef5d
Show file tree
Hide file tree
Showing 45 changed files with 1,802 additions and 1,307 deletions.
7 changes: 7 additions & 0 deletions changelogs/upcoming/7448.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
**Accessibility**

- `EuiDataGrid`'s keyboard/screenreader experience has been tweaked to be more consistent for varying complex data:
- 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
109 changes: 29 additions & 80 deletions src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, { Fragment } from 'react';
import React from 'react';
import { Link } from 'react-router-dom';

import { GuideSectionTypes } from '../../../components';
import {
EuiDataGrid,
EuiCode,
EuiCallOut,
EuiBasicTable,
EuiSpacer,
EuiText,
EuiListGroupItem,
} from '../../../../../src';
Expand Down Expand Up @@ -64,7 +62,7 @@ export const DataGridCellsExample = {
],
title: 'Cell actions',
text: (
<Fragment>
<>
<p>
In addition to making a cell expandable, you can add more custom
actions by setting <EuiCode>columns.cellActions</EuiCode>. These
Expand Down Expand Up @@ -97,7 +95,7 @@ export const DataGridCellsExample = {
<EuiCode>cellAction</EuiCode> each, while the country column
provides 2 <EuiCode>cellAction</EuiCode>s.
</p>
</Fragment>
</>
),
props: {
EuiDataGrid,
Expand Down Expand Up @@ -157,7 +155,7 @@ export const DataGridCellsExample = {
},
],
text: (
<Fragment>
<>
<p>
<strong>EuiDataGrid</strong> tracks and manages complicated focus
state management based upon the content of the individual inner
Expand All @@ -166,93 +164,44 @@ export const DataGridCellsExample = {
<h3>Initial focus</h3>
<ul>
<li>
When tabbing to the grid before it has received focus, the first
cell of either the header (if it is interaction) or first content
When tabbing to the grid before it has received focus, the header
cell is focused.
</li>
<li>Datagrid does not auto-focus on mount / page load</li>
<li>
When removing focus from the grid and then returning, the last
focused cell remains focused.
When tabbing away from the grid and then returning, the last
focused cell will regain focus.
</li>
<li>
If the last focused cell has been scrolled out of view, the first
header cell receives focus instead.
</li>
</ul>
<h3>Click and key events</h3>
<ul>
<li>
Clicking on an interactive cell (not its content) should focus on
the cell, or if it has only one interactive element the focus
should shift to the element.
Clicking on an interactive cell or its content should focus on the
cell.
</li>
<li>
The up, down, left, and right arrow keys can be pressed to
navigate between cells.
</li>
<li>
For expandable cells, either the Enter or F2 keys can be pressed
interchangeably to toggle the cell popover. The Escape key will
close the popover.
</li>
<li>
Clicking on an interactive element within a cell the focus should
always remain on that element, not shift to the cell or another
element unless a subsequent user action changes it.
For non-expandable cells with interactive content, either the
Enter or F2 keys can be pressed to enter a focus trap, allowing
users to Tab between the cell's content. The Escape key will exit
the cell trap.
</li>
<li>
Enter or F2 can be used interchangeably to enter inner cell focus
if the logic below allows it.
For non-expandable cells with no interactive content, the cell
alone will receive focus, with no inner content action.
</li>
</ul>
<h3>
The content and expandability of the cells dictate the focus target
of the cell
</h3>
<p>
The following combinations of focus are maintained to provide for a
good balance between accessibility and ease of use while navigating
the grid with your keyboard.
</p>
<EuiBasicTable
columns={[
{
field: 'expandable',
name: 'Expandablity',
},
{
field: 'contents',
name: 'Cell contains',
},
{
field: 'result',
name: 'Resulting focus',
width: '50%',
mobileOptions: {
width: '100%',
},
},
]}
items={[
{
id: '1',
expandable: 'Not expandable',
contents: 'No interactive elements',
result:
'Cell alone receives the focus, with no possible inner focus action',
},
{
id: '2',
expandable: 'Not expandable',
contents: 'Single interactive element',
result:
'The single inner element within the cell receives focus',
},
{
id: '3',
expandable: 'Not expandable',
contents: 'Multiple interactive elements',
result:
'The cell will allow a non-expanding focus trap on Enter keyDown',
},
{
id: '4',
expandable: 'Is expandable',
contents:
'Any combination of interactive / non-interactive elements',
result: 'The cell will focus on the expansion action',
},
]}
/>
<EuiSpacer />
<EuiCallOut
color="warning"
title="Don't turn off cell expansion when the width of the column is unknown"
Expand All @@ -265,7 +214,7 @@ export const DataGridCellsExample = {
when you cannot control the width can lead to hidden focus because
the content is truncated.
</EuiCallOut>
</Fragment>
</>
),
demo: <DataGridFocus />,
},
Expand Down
49 changes: 26 additions & 23 deletions src-docs/src/views/datagrid/cells_popovers/focus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,20 +56,7 @@ export default () => {
const columns = [
{
id: 'no-interactives not expandable',
display: (
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonIcon
aria-label="column settings"
iconType="gear"
onClick={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBadge>0 interactive</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
),
display: <EuiBadge>0 interactive</EuiBadge>,
isExpandable: false,
actions: false,
},
Expand All @@ -95,21 +82,23 @@ export default () => {
},
{
id: 'one-interactive not expandable',
display: <EuiBadge>1 interactive</EuiBadge>,
display: (
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
<EuiButtonIcon
aria-label="column settings"
iconType="gear"
onClick={() => {}}
/>
<EuiBadge>1 interactive</EuiBadge>
</EuiFlexGroup>
),
isExpandable: false,
actions: false,
},
{
id: 'one-interactives is expandable',
display: (
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonIcon
aria-label="column settings"
iconType="gear"
onClick={() => {}}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiToken
iconType="expandMini"
Expand All @@ -128,7 +117,21 @@ export default () => {
},
{
id: 'two-interactives not expandable',
display: <EuiBadge>2 interactive</EuiBadge>,
display: (
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
<EuiButtonIcon
aria-label="column settings"
iconType="gear"
onClick={() => {}}
/>
<EuiButtonIcon
aria-label="column settings"
iconType="gear"
onClick={() => {}}
/>
<EuiBadge>2 interactive</EuiBadge>
</EuiFlexGroup>
),
isExpandable: false,
actions: false,
},
Expand Down
Loading

0 comments on commit e67ef5d

Please sign in to comment.