Skip to content

Commit

Permalink
add docs for datepicker keyboard
Browse files Browse the repository at this point in the history
  • Loading branch information
tinayuangao committed Aug 30, 2017
1 parent de8b955 commit e07db8d
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 7 deletions.
46 changes: 44 additions & 2 deletions src/lib/datepicker/datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -229,5 +229,47 @@ application root module.
export class MyApp {}
```
### Accessibility
The input box for datepicker should have a placeholder or be given a meaningful label via
`aria-label` or `aria-labelledby`.
The `MdDatepickerInput` directive adds `aria-haspopup` attribute to the native input element, and it
triggers a calendar dialog with `role="dialog"`.
`MdDatepickerIntl` includes strings that are used for `aria-label`s. The datepicker input
should have a placeholder or be given a meaningful label via `aria-label` or `aria-labelledby`.

#### Keyboard shortcuts
The keyboard shortcuts to handle datepicker are:
`ALT` + `DOWN_ARROR`: trigger calendar dialog
`ESCAPE`: close calendar dialog

In month view:
`LEFT_ARROW`, `RIGHT_ARROW`, `UP_ARROW`, `DOWN_ARROW`: navigate through days

`HOME`: focus the first day of the month

`END`: focus the last day of the month

`PAGE_UP`: goes to previous month

`ALT` + `PAGE_UP`: goes to previous year

`PAGE_DOWN`: goes to next month

`ALT` + `PAGE_DOWN`: goes to next year

`ENTER`: select current focused date


In year view:
`LEFT_ARROW`, `RIGHT_ARROW`, `UP_ARROW`, `DOWN_ARROW`: navigate through months

`HOME`: focus the first month of the year

`END`: focus the last month of the year

`PAGE_UP`: goes to previous year

`ALT` + `PAGE_UP`: goes to previous 10 years

`PAGE_DOWN`: goes to next year

`ALT` + `PAGE_DOWN`: goes to next 10 years

`ENTER`: select current focused month
7 changes: 4 additions & 3 deletions src/lib/snack-bar/snack-bar.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export class MessageArchivedComponent {
}
```
### Accessibility
A snack-bar automatically goes away after a short time, so you can't count on the user seeing the
message or having a chance to press the button. For this reason, you should consider offering an
alternate way to perform any snack-bar action.
Snack-bar messages are announced via an `aria-live` region. Focus is not moved to
the snack-bar element, as this would be disruptive to a user in the middle of a
workflow. For any action offered in the snack-bar, the application should offer the
user an alternative way to perform the action (typically via keyboard shortcut).
10 changes: 8 additions & 2 deletions src/lib/toolbar/toolbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,5 +51,11 @@ use a neutral background color based on the current theme (light or dark). This
`'primary'`, `'accent'`, or `'warn'`.

### Accessibility
Toolbar items without text or labels should be given a meaningful label via `aria-label` or
`aria-labelledby`.
By default, the toolbar assumes that it will be used in a purely decorative fashion and thus sets
no roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of `<div>`
elements on the page.

Generally, the toolbar is used as a header where `role="header"` would be appropriate.

Only if the use-case of the toolbar match that of role="toolbar", the user should add the role and
an appropriate label via `aria-label` or `aria-labelledby`.

0 comments on commit e07db8d

Please sign in to comment.