Skip to content

Commit c875e87

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.
1 parent 0df3a5c commit c875e87

File tree

6 files changed

+75
-67
lines changed

6 files changed

+75
-67
lines changed

‎src/cdk/stepper/stepper.md

+6-5
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

+10-8
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

+36-36
Original file line numberDiff line numberDiff line change
@@ -582,60 +582,60 @@ additional means of opening the pop-up, such as `MatDatepickerToggle`.
582582

583583
The datepicker supports the following keyboard shortcuts:
584584

585-
| Shortcut | Action |
585+
| Keyboard Shortcut | Action |
586586
|----------------------------------------|----------------------------|
587-
| <kbd>ALT</kbd> + <kbd>DOWN_ARROW</kbd> | Open the calendar pop-up |
588-
| <kbd>ESCAPE</kbd> | Close the calendar pop-up |
587+
| <kbd>Alt</kbd> + <kbd>Down Arrow</kbd> | Open the calendar pop-up |
588+
| <kbd>Escape</kbd> | Close the calendar pop-up |
589589

590590

591591
In month view:
592592

593593
| Shortcut | Action |
594594
|---------------------------------------|------------------------------------------|
595-
| <kbd>LEFT_ARROW</kbd> | Go to previous day |
596-
| <kbd>RIGHT_ARROW</kbd> | Go to next day |
597-
| <kbd>UP_ARROW</kbd> | Go to same day in the previous week |
598-
| <kbd>DOWN_ARROW</kbd> | Go to same day in the next week |
599-
| <kbd>HOME</kbd> | Go to the first day of the month |
600-
| <kbd>END</kbd> | Go to the last day of the month |
601-
| <kbd>PAGE_UP</kbd> | Go to the same day in the previous month |
602-
| <kbd>ALT</kbd> + <kbd>PAGE_UP</kbd> | Go to the same day in the previous year |
603-
| <kbd>PAGE_DOWN</kbd> | Go to the same day in the next month |
604-
| <kbd>ALT</kbd> + <kbd>PAGE_DOWN</kbd> | Go to the same day in the next year |
605-
| <kbd>ENTER</kbd> | Select current date |
595+
| <kbd>Left Arrow</kbd> | Go to previous day |
596+
| <kbd>Right Arrow</kbd> | Go to next day |
597+
| <kbd>Up Arrow</kbd> | Go to same day in the previous week |
598+
| <kbd>Down Arrow</kbd> | Go to same day in the next week |
599+
| <kbd>Home</kbd> | Go to the first day of the month |
600+
| <kbd>End</kbd> | Go to the last day of the month |
601+
| <kbd>Page up</kbd> | Go to the same day in the previous month |
602+
| <kbd>Alt</kbd> + <kbd>Page up</kbd> | Go to the same day in the previous year |
603+
| <kbd>Page Down</kbd> | Go to the same day in the next month |
604+
| <kbd>Alt</kbd> + <kbd>Page Down</kbd> | Go to the same day in the next year |
605+
| <kbd>Enter</kbd> | Select current date |
606606

607607

608608
In year view:
609609

610610
| Shortcut | Action |
611611
|---------------------------------------|-------------------------------------------|
612-
| <kbd>LEFT_ARROW</kbd> | Go to previous month |
613-
| <kbd>RIGHT_ARROW</kbd> | Go to next month |
614-
| <kbd>UP_ARROW</kbd> | Go up a row (back 4 months) |
615-
| <kbd>DOWN_ARROW</kbd> | Go down a row (forward 4 months) |
616-
| <kbd>HOME</kbd> | Go to the first month of the year |
617-
| <kbd>END</kbd> | Go to the last month of the year |
618-
| <kbd>PAGE_UP</kbd> | Go to the same month in the previous year |
619-
| <kbd>ALT</kbd> + <kbd>PAGE_UP</kbd> | Go to the same month 10 years back |
620-
| <kbd>PAGE_DOWN</kbd> | Go to the same month in the next year |
621-
| <kbd>ALT</kbd> + <kbd>PAGE_DOWN</kbd> | Go to the same month 10 years forward |
622-
| <kbd>ENTER</kbd> | Select current month |
612+
| <kbd>Left Arrow</kbd> | Go to previous month |
613+
| <kbd>Right Arrow</kbd> | Go to next month |
614+
| <kbd>Up Arrow</kbd> | Go up a row (back 4 months) |
615+
| <kbd>Down Arrow</kbd> | Go down a row (forward 4 months) |
616+
| <kbd>Home</kbd> | Go to the first month of the year |
617+
| <kbd>End</kbd> | Go to the last month of the year |
618+
| <kbd>Page Up</kbd> | Go to the same month in the previous year |
619+
| <kbd>Alt</kbd> + <kbd>Page up</kbd> | Go to the same month 10 years back |
620+
| <kbd>Page Down</kbd> | Go to the same month in the next year |
621+
| <kbd>Alt</kbd> + <kbd>Page Down</kbd> | Go to the same month 10 years forward |
622+
| <kbd>Enter</kbd> | Select current month |
623623

624624
In multi-year view:
625625

626626
| Shortcut | Action |
627627
|---------------------------------------|-------------------------------------------|
628-
| <kbd>LEFT_ARROW</kbd> | Go to previous year |
629-
| <kbd>RIGHT_ARROW</kbd> | Go to next year |
630-
| <kbd>UP_ARROW</kbd> | Go up a row (back 4 years) |
631-
| <kbd>DOWN_ARROW</kbd> | Go down a row (forward 4 years) |
632-
| <kbd>HOME</kbd> | Go to the first year in the current range |
633-
| <kbd>END</kbd> | Go to the last year in the current range |
634-
| <kbd>PAGE_UP</kbd> | Go back 24 years |
635-
| <kbd>ALT</kbd> + <kbd>PAGE_UP</kbd> | Go back 240 years |
636-
| <kbd>PAGE_DOWN</kbd> | Go forward 24 years |
637-
| <kbd>ALT</kbd> + <kbd>PAGE_DOWN</kbd> | Go forward 240 years |
638-
| <kbd>ENTER</kbd> | Select current year |
628+
| <kbd>Left Arrow</kbd> | Go to previous year |
629+
| <kbd>Right Arrow</kbd> | Go to next year |
630+
| <kbd>Up Arrow</kbd> | Go up a row (back 4 years) |
631+
| <kbd>Down Arrow</kbd> | Go down a row (forward 4 years) |
632+
| <kbd>Home</kbd> | Go to the first year in the current range |
633+
| <kbd>End</kbd> | Go to the last year in the current range |
634+
| <kbd>Page up</kbd> | Go back 24 years |
635+
| <kbd>Alt</kbd> + <kbd>Page up</kbd> | Go back 240 years |
636+
| <kbd>Page Down</kbd> | Go forward 24 years |
637+
| <kbd>Alt</kbd> + <kbd>Page Down</kbd> | Go forward 240 years |
638+
| <kbd>Enter</kbd> | Select current year |
639639

640640
### Troubleshooting
641641

‎src/material/menu/menu.md

+8-6
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

+9-5
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

+6-7
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)