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

Jump to bottom

[DataGrid] Add keyboard documentation #125

Merged
merged 2 commits into from
Jul 28, 2020
Merged

[DataGrid] Add keyboard documentation #125

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65d6558
added keyboard doc
dtassone Jul 28, 2020
dc555a9
Apply suggestions from code review
dtassone Jul 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 29 additions & 0 deletions packages/storybook/src/documentation/pages/accessibility.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { XGrid } from '@material-ui/x-grid';

<Meta title="1. Docs/12. Accessibility" component={XGrid} />

# Accessibility

Throughout our journey, accessibility has always been one of the core value of Material-UI components.
Hence the data-grid has no less than 70 accessibility standards implemented in our first beta version.

## Keyboard navigation

| Keys | Description |
| ---------------------------------------: | :------------------------------------------------ |
| <kbd>Tab</kbd> | Navigate between selectable elements |
| <kbd>Arrow Left</kbd> | Navigate between cell elements |
| <kbd>Arrow Bottom</kbd> | Navigate between cell elements |
| <kbd>Arrow Right</kbd> | Navigate between cell elements |
| <kbd>Arrow Up</kbd> | Navigate between cell elements |
| <kbd>Home</kbd> | Navigate to the first cell of the current row |
| <kbd>End</kbd> | Navigate to the last cell of the current row |
| <kbd>CMD/CTRL + Home</kbd> | Navigate to the first cell of the first row |
| <kbd>CMD/CTRL + End</kbd> | Navigate to the last cell of the last row |
| <kbd>Shift + Space</kbd> | Select the current row |
| <kbd>Shift + Space + Arrow Up/Down</kbd> | Select the current row and the row above or below |
| <kbd>Space</kbd> | Navigate to the next scrollable page |
| <kbd>Page Up</kbd> | Navigate to the next scrollable page |
| <kbd>Page Down</kbd> | Navigate to the previous scrollable page |
| <kbd>CMD/CTRL + A</kbd> | Select all rows |
| <kbd>CMD/CTRL + C</kbd> | Copy the currently selected row |