Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(datepicker): make widget accessible
Browse files Browse the repository at this point in the history
 * keyboard navigation
 * WAI-ARIA roles
 * popup will close on escape on input or calendar
 * handle focus when closing popup

Closes #1922

BREAKING CHANGES: popup calendar does not open on input focus
  • Loading branch information
bekos committed Apr 13, 2014
1 parent de5a25e commit 2423f6d
Show file tree
Hide file tree
Showing 8 changed files with 590 additions and 127 deletions.
283 changes: 212 additions & 71 deletions src/datepicker/datepicker.js

Large diffs are not rendered by default.

21 changes: 19 additions & 2 deletions src/datepicker/docs/readme.md
Expand Up @@ -7,7 +7,7 @@ Everything is formatted using the [date filter](http://docs.angularjs.org/api/ng

### Datepicker Settings ###

All settings can be provided as attributes in the `<datepicker>` or globally configured through the `datepickerConfig`.
All settings can be provided as attributes in the `datepicker` or globally configured through the `datepickerConfig`.

* `ng-model` <i class="glyphicon glyphicon-eye-open"></i>
:
Expand Down Expand Up @@ -65,7 +65,7 @@ All settings can be provided as attributes in the `<datepicker>` or globally con
_(Default: 'EEE')_ :
Format of day in week header.

* `format-day-title-`
* `format-day-title`
_(Default: 'MMMM yyyy')_ :
Format of title when selecting day.

Expand Down Expand Up @@ -110,3 +110,20 @@ Specific settings for the `datepicker-popup`, that can globally configured throu
* `datepicker-append-to-body`
_(Default: false)_:
Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`. For global configuration, use `datepickerPopupConfig.appendToBody`.

### Keyboard Support ###

Depending on datepicker's current mode, the date may reffer either to day, month or year. Accordingly, the term view reffers either to a month, year or year range.

* `Left`: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
* `Right`: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
* `Up`: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.
* `Down`: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.
* `PgUp`: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.
* `PgDn`: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.
* `Home`: Move to the first date of the view.
* `End`: Move to the last date of the view.
* `Enter`/`Space`: Select date.
* `Ctrl`+`Up`: Move to an upper mode.
* `Ctrl`+`Down`: Move to a lower mode.
* `Esc`: Will close popup, and move focus to the input.

0 comments on commit 2423f6d

Please sign in to comment.