Skip to content

docs: normalize keyboard interaction sections and add escape key #15241

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

Merged
merged 1 commit into from
Feb 22, 2019
Merged

docs: normalize keyboard interaction sections and add escape key #15241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/cdk/stepper/stepper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ resetting it will call `reset` on the underlying form control which clears the v
- <kbd>RIGHT_ARROW</kbd>: Focuses the next step header
- <kbd>ENTER</kbd>, <kbd>SPACE</kbd>: Selects the step that the focus is currently on
- <kbd>TAB</kbd>: Focuses the next tabbable element
- <kbd>TAB</kbd>+<kbd>SHIFT</kbd>: Focuses the previous tabbable element
- <kbd>SHIFT</kbd>+<kbd>TAB</kbd>: Focuses the previous tabbable element

### Accessibility
The CDK stepper is treated as a tabbed view for accessibility purposes, so it is given
Expand Down
7 changes: 4 additions & 3 deletions src/lib/autocomplete/autocomplete.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,9 +112,10 @@ autocomplete is attached to using the `matAutocompleteOrigin` directive together
```

### Keyboard interaction
- <kbd>DOWN_ARROW</kbd>: Next option becomes active.
- <kbd>UP_ARROW</kbd>: Previous option becomes active.
- <kbd>ENTER</kbd>: Select currently active item.
- <kbd>DOWN_ARROW</kbd>: Next option becomes active
- <kbd>UP_ARROW</kbd>: Previous option becomes active
- <kbd>ENTER</kbd>: Selects currently active item
- <kbd>ESCAPE</kbd>: Closes the autocomplete panel

### Option groups
`mat-option` can be collected into groups using the `mat-optgroup` element:
Expand Down
2 changes: 1 addition & 1 deletion src/lib/datepicker/datepicker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@ the native input and toggle button elements respectively, and they trigger a cal
should have a placeholder or be given a meaningful label via `aria-label`, `aria-labelledby` or
`MatDatepickerIntl`.

#### Keyboard shortcuts
#### Keyboard interaction

The datepicker supports the following keyboard shortcuts:

Expand Down
3 changes: 2 additions & 1 deletion src/lib/menu/menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,9 @@ with a different set of data, depending on the trigger that opened it:
- <kbd>DOWN_ARROW</kbd>: Focuses the next menu item
- <kbd>UP_ARROW</kbd>: Focuses previous menu item
- <kbd>RIGHT_ARROW</kbd>: Opens the menu item's sub-menu
- <kbd>LEFT_ARROW</kbd>: Closes the current menu, if it is a sub-menu.
- <kbd>LEFT_ARROW</kbd>: Closes the current menu, if it is a sub-menu
- <kbd>ENTER</kbd>: Activates the focused menu item
- <kbd>ESCAPE</kbd>: Closes the menu

### Accessibility
Menu triggers or menu items without text or labels should be given a meaningful label via
Expand Down
4 changes: 3 additions & 1 deletion src/lib/stepper/stepper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,9 +234,11 @@ The stepper can now show error states by simply providing the `showError` option
### Keyboard interaction
- <kbd>LEFT_ARROW</kbd>: Focuses the previous step header
- <kbd>RIGHT_ARROW</kbd>: Focuses the next step header
- <kbd>HOME</kbd>: Focuses the first step header
- <kbd>END</kbd>: Focuses the last step header
- <kbd>ENTER</kbd>, <kbd>SPACE</kbd>: Selects the step that the focus is currently on
- <kbd>TAB</kbd>: Focuses the next tabbable element
- <kbd>TAB</kbd>+<kbd>SHIFT</kbd>: Focuses the previous tabbable element
- <kbd>SHIFT</kbd>+<kbd>TAB</kbd>: Focuses the previous tabbable element

### Localizing labels
Labels used by the stepper are provided through `MatStepperIntl`. Localization of these messages
Expand Down
2 changes: 1 addition & 1 deletion src/lib/tabs/tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ Tabs without text or labels should be given a meaningful label via `aria-label`
`aria-labelledby`. For `MatTabNav`, the `<nav>` element should have a label as well.


#### Keyboard shortcuts
#### Keyboard interaction

| Shortcut | Action |
|----------------------|----------------------------|
Expand Down