Skip to content

Commit e07db8d

Browse files
committed
add docs for datepicker keyboard
1 parent de8b955 commit e07db8d

File tree

3 files changed

+56
-7
lines changed

3 files changed

+56
-7
lines changed

src/lib/datepicker/datepicker.md

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -229,5 +229,47 @@ 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+
`MdDatepickerIntl` includes strings that are used for `aria-label`s. The datepicker input
235+
should have a placeholder or be given a meaningful label via `aria-label` or `aria-labelledby`.
236+
237+
#### Keyboard shortcuts
238+
The keyboard shortcuts to handle datepicker are:
239+
`ALT` + `DOWN_ARROR`: trigger calendar dialog
240+
`ESCAPE`: close calendar dialog
241+
242+
In month view:
243+
`LEFT_ARROW`, `RIGHT_ARROW`, `UP_ARROW`, `DOWN_ARROW`: navigate through days
244+
245+
`HOME`: focus the first day of the month
246+
247+
`END`: focus the last day of the month
248+
249+
`PAGE_UP`: goes to previous month
250+
251+
`ALT` + `PAGE_UP`: goes to previous year
252+
253+
`PAGE_DOWN`: goes to next month
254+
255+
`ALT` + `PAGE_DOWN`: goes to next year
256+
257+
`ENTER`: select current focused date
258+
259+
260+
In year view:
261+
`LEFT_ARROW`, `RIGHT_ARROW`, `UP_ARROW`, `DOWN_ARROW`: navigate through months
262+
263+
`HOME`: focus the first month of the year
264+
265+
`END`: focus the last month of the year
266+
267+
`PAGE_UP`: goes to previous year
268+
269+
`ALT` + `PAGE_UP`: goes to previous 10 years
270+
271+
`PAGE_DOWN`: goes to next year
272+
273+
`ALT` + `PAGE_DOWN`: goes to next 10 years
274+
275+
`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)