Skip to content

Commit 4fa290b

Browse files
jelbournwagnermaciel
jelbourn
authored and
wagnermaciel
committed
docs(multiple): table format keyboard shortcuts
Reformats all keyboard shortcut sections to tables and changes all `<kbd>` elements to stop using ALL CAPS, which can be read by screen-readers one letter at a time. (cherry picked from commit c875e87)
1 parent 311113c commit 4fa290b

File tree

6 files changed

+75
-67
lines changed

6 files changed

+75
-67
lines changed

‎src/cdk/stepper/stepper.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,12 @@ If you want to reset a stepper to its initial state, you can use the `reset` met
5050
resetting it will call `reset` on the underlying form control which clears the value.
5151

5252
### Keyboard interaction
53-
- <kbd>LEFT_ARROW</kbd>: Focuses the previous step header
54-
- <kbd>RIGHT_ARROW</kbd>: Focuses the next step header
55-
- <kbd>ENTER</kbd>, <kbd>SPACE</kbd>: Selects the step that the focus is currently on
56-
- <kbd>TAB</kbd>: Focuses the next tabbable element
57-
- <kbd>SHIFT</kbd>+<kbd>TAB</kbd>: Focuses the previous tabbable element
53+
| Keyboard shortcut | Action |
54+
|------------------------|---------------------------------|
55+
| <kbd>Left Arrow</kbd> | Focus the previous step header. |
56+
| <kbd>Right Arrow</kbd> | Focus the next step header. |
57+
| <kbd>Enter</kbd> | Select the focused step. |
58+
| <kbd>Space</kbd> | Select the focused step. |
5859

5960
### Accessibility
6061
Apart from the built-in keyboard support, the stepper doesn't apply any treatment. When implementing

‎src/material/autocomplete/autocomplete.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,14 @@ autocomplete is attached to using the `matAutocompleteOrigin` directive together
100100
```
101101

102102
### Keyboard interaction
103-
- <kbd>Down Arrow</kbd>: Next option becomes active
104-
- <kbd>Up Arrow</kbd>: Previous option becomes active
105-
- <kbd>Enter</kbd>: Selects currently active item
106-
- <kbd>Escape</kbd>: Closes the autocomplete panel
107-
- <kbd>Alt + Up Arrow</kbd>: Closes the autocomplete panel
108-
- <kbd>Alt + Down Arrow</kbd>: Open the autocomplete panel if there are any matching options.
103+
| Keyboard shortcut | Action |
104+
|----------------------------------------|----------------------------------------------------------------|
105+
| <kbd>Down Arrow</kbd> | Navigate to the next option. |
106+
| <kbd>Up Arrow</kbd> | Navigate to the previous option. |
107+
| <kbd>Enter</kbd> | Select the active option. |
108+
| <kbd>Escape</kbd> | Close the autocomplete panel. |
109+
| <kbd>Alt</kbd> + <kbd>Up Arrow</kbd> | Close the autocomplete panel. |
110+
| <kbd>Alt</kbd> + <kbd>Down Arrow</kbd> | Open the autocomplete panel if there are any matching options. |
109111

110112
### Option groups
111113
`mat-option` can be collected into groups using the `mat-optgroup` element:
@@ -121,8 +123,8 @@ pattern, you should _not_ put other interactive controls, such as buttons or che
121123
an autocomplete option. Nesting interactive controls like this interferes with most assistive
122124
technology.
123125

124-
Always provide an accessible label for the autocomplete. This can be done
125-
via `<mat-label>` inside of `<mat-form-field>`, a native `<label>` element, the `aria-label`
126+
Always provide an accessible label for the autocomplete. This can be done by using a
127+
`<mat-label>` inside of `<mat-form-field>`, a native `<label>` element, the `aria-label`
126128
attribute, or the `aria-labelledby` attribute.
127129

128130
`MatAutocomplete` preserves focus on the text trigger, using `aria-activedescendant` to support

‎src/material/datepicker/datepicker.md

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -559,60 +559,60 @@ additional means of opening the pop-up, such as `MatDatepickerToggle`.
559559

560560
The datepicker supports the following keyboard shortcuts:
561561

562-
| Shortcut | Action |
562+
| Keyboard Shortcut | Action |
563563
|----------------------------------------|----------------------------|
564-
| <kbd>ALT</kbd> + <kbd>DOWN_ARROW</kbd> | Open the calendar pop-up |
565-
| <kbd>ESCAPE</kbd> | Close the calendar pop-up |
564+
| <kbd>Alt</kbd> + <kbd>Down Arrow</kbd> | Open the calendar pop-up |
565+
| <kbd>Escape</kbd> | Close the calendar pop-up |
566566

567567

568568
In month view:
569569

570570
| Shortcut | Action |
571571
|---------------------------------------|------------------------------------------|
572-
| <kbd>LEFT_ARROW</kbd> | Go to previous day |
573-
| <kbd>RIGHT_ARROW</kbd> | Go to next day |
574-
| <kbd>UP_ARROW</kbd> | Go to same day in the previous week |
575-
| <kbd>DOWN_ARROW</kbd> | Go to same day in the next week |
576-
| <kbd>HOME</kbd> | Go to the first day of the month |
577-
| <kbd>END</kbd> | Go to the last day of the month |
578-
| <kbd>PAGE_UP</kbd> | Go to the same day in the previous month |
579-
| <kbd>ALT</kbd> + <kbd>PAGE_UP</kbd> | Go to the same day in the previous year |
580-
| <kbd>PAGE_DOWN</kbd> | Go to the same day in the next month |
581-
| <kbd>ALT</kbd> + <kbd>PAGE_DOWN</kbd> | Go to the same day in the next year |
582-
| <kbd>ENTER</kbd> | Select current date |
572+
| <kbd>Left Arrow</kbd> | Go to previous day |
573+
| <kbd>Right Arrow</kbd> | Go to next day |
574+
| <kbd>Up Arrow</kbd> | Go to same day in the previous week |
575+
| <kbd>Down Arrow</kbd> | Go to same day in the next week |
576+
| <kbd>Home</kbd> | Go to the first day of the month |
577+
| <kbd>End</kbd> | Go to the last day of the month |
578+
| <kbd>Page up</kbd> | Go to the same day in the previous month |
579+
| <kbd>Alt</kbd> + <kbd>Page up</kbd> | Go to the same day in the previous year |
580+
| <kbd>Page Down</kbd> | Go to the same day in the next month |
581+
| <kbd>Alt</kbd> + <kbd>Page Down</kbd> | Go to the same day in the next year |
582+
| <kbd>Enter</kbd> | Select current date |
583583

584584

585585
In year view:
586586

587587
| Shortcut | Action |
588588
|---------------------------------------|-------------------------------------------|
589-
| <kbd>LEFT_ARROW</kbd> | Go to previous month |
590-
| <kbd>RIGHT_ARROW</kbd> | Go to next month |
591-
| <kbd>UP_ARROW</kbd> | Go up a row (back 4 months) |
592-
| <kbd>DOWN_ARROW</kbd> | Go down a row (forward 4 months) |
593-
| <kbd>HOME</kbd> | Go to the first month of the year |
594-
| <kbd>END</kbd> | Go to the last month of the year |
595-
| <kbd>PAGE_UP</kbd> | Go to the same month in the previous year |
596-
| <kbd>ALT</kbd> + <kbd>PAGE_UP</kbd> | Go to the same month 10 years back |
597-
| <kbd>PAGE_DOWN</kbd> | Go to the same month in the next year |
598-
| <kbd>ALT</kbd> + <kbd>PAGE_DOWN</kbd> | Go to the same month 10 years forward |
599-
| <kbd>ENTER</kbd> | Select current month |
589+
| <kbd>Left Arrow</kbd> | Go to previous month |
590+
| <kbd>Right Arrow</kbd> | Go to next month |
591+
| <kbd>Up Arrow</kbd> | Go up a row (back 4 months) |
592+
| <kbd>Down Arrow</kbd> | Go down a row (forward 4 months) |
593+
| <kbd>Home</kbd> | Go to the first month of the year |
594+
| <kbd>End</kbd> | Go to the last month of the year |
595+
| <kbd>Page Up</kbd> | Go to the same month in the previous year |
596+
| <kbd>Alt</kbd> + <kbd>Page up</kbd> | Go to the same month 10 years back |
597+
| <kbd>Page Down</kbd> | Go to the same month in the next year |
598+
| <kbd>Alt</kbd> + <kbd>Page Down</kbd> | Go to the same month 10 years forward |
599+
| <kbd>Enter</kbd> | Select current month |
600600

601601
In multi-year view:
602602

603603
| Shortcut | Action |
604604
|---------------------------------------|-------------------------------------------|
605-
| <kbd>LEFT_ARROW</kbd> | Go to previous year |
606-
| <kbd>RIGHT_ARROW</kbd> | Go to next year |
607-
| <kbd>UP_ARROW</kbd> | Go up a row (back 4 years) |
608-
| <kbd>DOWN_ARROW</kbd> | Go down a row (forward 4 years) |
609-
| <kbd>HOME</kbd> | Go to the first year in the current range |
610-
| <kbd>END</kbd> | Go to the last year in the current range |
611-
| <kbd>PAGE_UP</kbd> | Go back 24 years |
612-
| <kbd>ALT</kbd> + <kbd>PAGE_UP</kbd> | Go back 240 years |
613-
| <kbd>PAGE_DOWN</kbd> | Go forward 24 years |
614-
| <kbd>ALT</kbd> + <kbd>PAGE_DOWN</kbd> | Go forward 240 years |
615-
| <kbd>ENTER</kbd> | Select current year |
605+
| <kbd>Left Arrow</kbd> | Go to previous year |
606+
| <kbd>Right Arrow</kbd> | Go to next year |
607+
| <kbd>Up Arrow</kbd> | Go up a row (back 4 years) |
608+
| <kbd>Down Arrow</kbd> | Go down a row (forward 4 years) |
609+
| <kbd>Home</kbd> | Go to the first year in the current range |
610+
| <kbd>End</kbd> | Go to the last year in the current range |
611+
| <kbd>Page up</kbd> | Go back 24 years |
612+
| <kbd>Alt</kbd> + <kbd>Page up</kbd> | Go back 240 years |
613+
| <kbd>Page Down</kbd> | Go forward 24 years |
614+
| <kbd>Alt</kbd> + <kbd>Page Down</kbd> | Go forward 240 years |
615+
| <kbd>Enter</kbd> | Select current year |
616616

617617
### Troubleshooting
618618

‎src/material/menu/menu.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,14 @@ with a different set of data, depending on the trigger that opened it:
9090
```
9191

9292
### Keyboard interaction
93-
- <kbd>DOWN_ARROW</kbd>: Focuses the next menu item
94-
- <kbd>UP_ARROW</kbd>: Focuses previous menu item
95-
- <kbd>RIGHT_ARROW</kbd>: Opens the menu item's sub-menu
96-
- <kbd>LEFT_ARROW</kbd>: Closes the current menu, if it is a sub-menu
97-
- <kbd>ENTER</kbd>: Activates the focused menu item
98-
- <kbd>ESCAPE</kbd>: Closes the menu
93+
| Keyboard shortcut | Action |
94+
|------------------------|---------------------------------------------|
95+
| <kbd>Down Arrow</kbd> | Focus the next menu item. |
96+
| <kbd>Up Arrow</kbd> | Focus the previous menu item. |
97+
| <kbd>Left Arrow</kbd> | Close the current menu if it is a sub-menu. |
98+
| <kbd>Right Arrow</kbd> | Opens the current menu item's sub-menu. |
99+
| <kbd>Enter</kbd> | Activate the focused menu item. |
100+
| <kbd>Escape</kbd> | Close all open menus. |
99101

100102
### Accessibility
101103

‎src/material/select/select.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -135,10 +135,14 @@ globally cause input errors to show when the input is dirty and invalid.
135135
```
136136

137137
### Keyboard interaction
138-
139-
- <kbd>DOWN_ARROW</kbd>: Focus next option
140-
- <kbd>UP_ARROW</kbd>: Focus previous option
141-
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd>: Select focused item
138+
| Keyboard shortcut | Action |
139+
|----------------------------------------|-----------------------------------------------------------------------|
140+
| <kbd>Down Arrow</kbd> | Navigate to the next option. |
141+
| <kbd>Up Arrow</kbd> | Navigate to the previous option. |
142+
| <kbd>Enter</kbd> | If closed, open the select panel. If open, selects the active option. |
143+
| <kbd>Escape</kbd> | Close the select panel. |
144+
| <kbd>Alt</kbd> + <kbd>Up Arrow</kbd> | Close the select panel. |
145+
| <kbd>Alt</kbd> + <kbd>Down Arrow</kbd> | Open the select panel if there are any matching options. |
142146

143147
### Accessibility
144148
When possible, prefer a native `<select>` element over `MatSelect`. The native control
@@ -149,7 +153,7 @@ specification](https://www.w3.org/TR/wai-aria-1.2). The combobox trigger control
149153
element opened in a pop-up. Previous versions of the ARIA specification
150154
required that `role="combobox"` apply to a text input control, but the 1.2 version of the
151155
specification supports a wider variety of interaction patterns. This newer usage of ARIA works
152-
in all browser and screen-reader combinations supports by Angular Material.
156+
in all browser and screen-reader combinations supported by Angular Material.
153157

154158
Because the pop-up uses the `role="listbox"` pattern, you should _not_ put other interactive
155159
controls, such as buttons or checkboxes, inside a select option. Nesting interactive controls like

‎src/material/stepper/stepper.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -191,13 +191,12 @@ viewport.
191191
<!-- example(stepper-responsive) -->
192192

193193
### Keyboard interaction
194-
- <kbd>LEFT_ARROW</kbd>: Focuses the previous step header
195-
- <kbd>RIGHT_ARROW</kbd>: Focuses the next step header
196-
- <kbd>HOME</kbd>: Focuses the first step header
197-
- <kbd>END</kbd>: Focuses the last step header
198-
- <kbd>ENTER</kbd>, <kbd>SPACE</kbd>: Selects the step that the focus is currently on
199-
- <kbd>TAB</kbd>: Focuses the next tabbable element
200-
- <kbd>SHIFT</kbd>+<kbd>TAB</kbd>: Focuses the previous tabbable element
194+
| Keyboard shortcut | Action |
195+
|------------------------|---------------------------------|
196+
| <kbd>Left Arrow</kbd> | Focus the previous step header. |
197+
| <kbd>Right Arrow</kbd> | Focus the next step header. |
198+
| <kbd>Enter</kbd> | Select the focused step. |
199+
| <kbd>Space</kbd> | Select the focused step. |
201200

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

0 commit comments

Comments
 (0)