timepicker-ui
4.6.0GitHub
timepicker-ui
GitHub4.6.0
Guides / Accessibility

Date Picker Accessibility

@pglejzer/datepicker-ui, the companion of timepicker-ui, follows the WAI-ARIA date picker pattern and works with the keyboard and screen readers.

Roles and states

#

The day grid follows the WAI-ARIA date picker pattern: role="grid" with weekday column headers, a roving tabindex, aria-selected, aria-current="date" and aria-disabled.

  • The docked picker is a role="dialog" with aria-modal="false".
  • The modal is a native <dialog>.
  • The inline picker is a role="group".
  • Each surface has an aria-label.
  • The month and year menus are role="listbox" lists of role="option" items.

A polite live region announces month changes and selection changes: a day pick in single and multiple mode, and each pick in a range. The toggle button gets aria-expanded and an accessible name that includes the current value. The input gets aria-invalid when the typed text is rejected.

Keyboard

#
WhereKeys
Day gridArrow keys move by day and week. Left and Right swap in right-to-left layouts.
Day gridHome and End go to the first and last day of the month.
Day gridPage Up and Page Down change the month. With Shift they change the year.
Day gridEnter and Space select the focused day. In a single modal picker, Enter on the selected day confirms.
Day gridShift+M and Shift+Y open the month and year menu in the docked picker.
Day gridEscape closes an open menu. Otherwise it dismisses the picker.
Month and year menuUp and Down move, Home and End jump to the first and last item, Enter and Space pick.
Year gridArrow keys move through the three columns, Home and End jump, Enter and Space pick.
InputAlt+Down Arrow opens the picker. Enter commits the typed text.
Toggle elementEnter and Space open the picker when ui.toggleButton is not a <button>.

The header buttons for months and years and the footer buttons expose their shortcuts through aria-keyshortcuts and a title.

Focus

#

When the picker closes, focus returns to the input unless behavior.returnFocus is false.

index.ts
new DatepickerUI("#date", {
  behavior: { returnFocus: false },
}).create();

Reduced motion

#

Motion is off when ui.animation is false. With prefers-reduced-motion: reduce nothing slides, flips or resizes: month changes, view switches and opening and closing use short fades instead.

index.ts
new DatepickerUI("#date", {
  ui: { animation: false },
}).create();

Labels for assistive technology

#

All texts, the screen-reader ones included, can be translated through the labels group. See Localization.

#
Esc