Skip to content

Commit fe2881d

Browse files
lazarljubenovicjelbourn
authored andcommitted
docs: normalize keyboard interaction headers and add escape key (#15241)
Also normalized the sections a bit (titles, tenses, and usage of period). Fixes #15165
1 parent 35982a5 commit fe2881d

File tree

6 files changed

+12
-8
lines changed

6 files changed

+12
-8
lines changed

src/cdk/stepper/stepper.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ resetting it will call `reset` on the underlying form control which clears the v
5454
- <kbd>RIGHT_ARROW</kbd>: Focuses the next step header
5555
- <kbd>ENTER</kbd>, <kbd>SPACE</kbd>: Selects the step that the focus is currently on
5656
- <kbd>TAB</kbd>: Focuses the next tabbable element
57-
- <kbd>TAB</kbd>+<kbd>SHIFT</kbd>: Focuses the previous tabbable element
57+
- <kbd>SHIFT</kbd>+<kbd>TAB</kbd>: Focuses the previous tabbable element
5858

5959
### Accessibility
6060
The CDK stepper is treated as a tabbed view for accessibility purposes, so it is given

src/lib/autocomplete/autocomplete.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,10 @@ autocomplete is attached to using the `matAutocompleteOrigin` directive together
112112
```
113113

114114
### Keyboard interaction
115-
- <kbd>DOWN_ARROW</kbd>: Next option becomes active.
116-
- <kbd>UP_ARROW</kbd>: Previous option becomes active.
117-
- <kbd>ENTER</kbd>: Select currently active item.
115+
- <kbd>DOWN_ARROW</kbd>: Next option becomes active
116+
- <kbd>UP_ARROW</kbd>: Previous option becomes active
117+
- <kbd>ENTER</kbd>: Selects currently active item
118+
- <kbd>ESCAPE</kbd>: Closes the autocomplete panel
118119

119120
### Option groups
120121
`mat-option` can be collected into groups using the `mat-optgroup` element:

src/lib/datepicker/datepicker.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ the native input and toggle button elements respectively, and they trigger a cal
346346
should have a placeholder or be given a meaningful label via `aria-label`, `aria-labelledby` or
347347
`MatDatepickerIntl`.
348348

349-
#### Keyboard shortcuts
349+
#### Keyboard interaction
350350

351351
The datepicker supports the following keyboard shortcuts:
352352

src/lib/menu/menu.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,9 @@ with a different set of data, depending on the trigger that opened it:
137137
- <kbd>DOWN_ARROW</kbd>: Focuses the next menu item
138138
- <kbd>UP_ARROW</kbd>: Focuses previous menu item
139139
- <kbd>RIGHT_ARROW</kbd>: Opens the menu item's sub-menu
140-
- <kbd>LEFT_ARROW</kbd>: Closes the current menu, if it is a sub-menu.
140+
- <kbd>LEFT_ARROW</kbd>: Closes the current menu, if it is a sub-menu
141141
- <kbd>ENTER</kbd>: Activates the focused menu item
142+
- <kbd>ESCAPE</kbd>: Closes the menu
142143

143144
### Accessibility
144145
Menu triggers or menu items without text or labels should be given a meaningful label via

src/lib/stepper/stepper.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,9 +234,11 @@ The stepper can now show error states by simply providing the `showError` option
234234
### Keyboard interaction
235235
- <kbd>LEFT_ARROW</kbd>: Focuses the previous step header
236236
- <kbd>RIGHT_ARROW</kbd>: Focuses the next step header
237+
- <kbd>HOME</kbd>: Focuses the first step header
238+
- <kbd>END</kbd>: Focuses the last step header
237239
- <kbd>ENTER</kbd>, <kbd>SPACE</kbd>: Selects the step that the focus is currently on
238240
- <kbd>TAB</kbd>: Focuses the next tabbable element
239-
- <kbd>TAB</kbd>+<kbd>SHIFT</kbd>: Focuses the previous tabbable element
241+
- <kbd>SHIFT</kbd>+<kbd>TAB</kbd>: Focuses the previous tabbable element
240242

241243
### Localizing labels
242244
Labels used by the stepper are provided through `MatStepperIntl`. Localization of these messages

src/lib/tabs/tabs.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ Tabs without text or labels should be given a meaningful label via `aria-label`
126126
`aria-labelledby`. For `MatTabNav`, the `<nav>` element should have a label as well.
127127

128128

129-
#### Keyboard shortcuts
129+
#### Keyboard interaction
130130

131131
| Shortcut | Action |
132132
|----------------------|----------------------------|

0 commit comments

Comments
 (0)