Follow the ARIA design pattern for the datepicker component

[Veyfeyken]

Problem

• The datepicker cannot be openend with the keyboard or a screenreader. The icon that opens the datepicker is an empty span.

<span class="fa fa-calendar is-clickable"></span>

• The ARIA role="application" on the parent div puts screenreaders in a different mode, this overrides all normal navigation methods. In short, never use role="application" unless it's absolutely necessary. It rarely is.

<div class="m-datepicker__nav" role="application" aria-label="Datumkiezer dagen" aria-hidden="false">

• The modal dialog is not modal. It's possible the navigate outside the modal with the keyboard or a screenreader.
• Every button has been given an aria-label with the full date. Although well intended, this seems counterproductive. If you follow the ARIA design pattern and markup, there is no need to add aria-labels on the buttons. The extra verbosity may slow the user down.

Suggestion

Follow the ARIA design pattern for datepicker dialog.

Articles and demo

• ARIA design pattern for modal dialog
• Example of datepicker dialog