Skip to content

Commit 665cf7a

Browse files
committed
add docs for datepicker keyboard
1 parent d61ae32 commit 665cf7a

File tree

3 files changed

+63
-7
lines changed

3 files changed

+63
-7
lines changed

src/lib/datepicker/datepicker.md

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -229,5 +229,54 @@ application root module.
229229
export class MyApp {}
230230
```
231231
### Accessibility
232-
The input box for datepicker should have a placeholder or be given a meaningful label via
233-
`aria-label` or `aria-labelledby`.
232+
The `MdDatepickerInput` directive adds `aria-haspopup` attribute to the native input element, and it
233+
triggers a calendar dialog with `role="dialog"`.
234+
235+
`MdDatepickerIntl` includes strings that are used for `aria-label`s. The datepicker input
236+
should have a placeholder or be given a meaningful label via `aria-label`, `aria-labelledby` or
237+
`MdDatepickerIntl`.
238+
239+
#### Keyboard shortcuts
240+
The keyboard shortcuts to handle datepicker are:
241+
242+
`ALT` + `DOWN_ARROR`: trigger calendar dialog
243+
244+
`ESCAPE`: close calendar dialog
245+
246+
247+
In month view:
248+
249+
`LEFT_ARROW`, `RIGHT_ARROW`, `UP_ARROW`, `DOWN_ARROW`: navigate through days
250+
251+
`HOME`: focus the first day of the month
252+
253+
`END`: focus the last day of the month
254+
255+
`PAGE_UP`: goes to previous month
256+
257+
`ALT` + `PAGE_UP`: goes to previous year
258+
259+
`PAGE_DOWN`: goes to next month
260+
261+
`ALT` + `PAGE_DOWN`: goes to next year
262+
263+
`ENTER`: select current focused date
264+
265+
266+
In year view:
267+
268+
`LEFT_ARROW`, `RIGHT_ARROW`, `UP_ARROW`, `DOWN_ARROW`: navigate through months
269+
270+
`HOME`: focus the first month of the year
271+
272+
`END`: focus the last month of the year
273+
274+
`PAGE_UP`: goes to previous year
275+
276+
`ALT` + `PAGE_UP`: goes to previous 10 years
277+
278+
`PAGE_DOWN`: goes to next year
279+
280+
`ALT` + `PAGE_DOWN`: goes to next 10 years
281+
282+
`ENTER`: select current focused month

src/lib/snack-bar/snack-bar.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export class MessageArchivedComponent {
7373
}
7474
```
7575
### Accessibility
76-
A snack-bar automatically goes away after a short time, so you can't count on the user seeing the
77-
message or having a chance to press the button. For this reason, you should consider offering an
78-
alternate way to perform any snack-bar action.
76+
Snack-bar messages are announced via an `aria-live` region. Focus is not moved to
77+
the snack-bar element, as this would be disruptive to a user in the middle of a
78+
workflow. For any action offered in the snack-bar, the application should offer the
79+
user an alternative way to perform the action (typically via keyboard shortcut).

src/lib/toolbar/toolbar.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,11 @@ use a neutral background color based on the current theme (light or dark). This
5151
`'primary'`, `'accent'`, or `'warn'`.
5252

5353
### Accessibility
54-
Toolbar items without text or labels should be given a meaningful label via `aria-label` or
55-
`aria-labelledby`.
54+
By default, the toolbar assumes that it will be used in a purely decorative fashion and thus sets
55+
no roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of `<div>`
56+
elements on the page.
57+
58+
Generally, the toolbar is used as a header where `role="header"` would be appropriate.
59+
60+
Only if the use-case of the toolbar match that of role="toolbar", the user should add the role and
61+
an appropriate label via `aria-label` or `aria-labelledby`.

0 commit comments

Comments
 (0)