Flatpickr: Keyboard/focus accessibility issues

Created on 4 Feb 2018  路  1Comment  路  Source: flatpickr/flatpickr

Issue 1: Losing focus in document after aborting selection

Related: #895, #1149

Steps to reproduce:

  1. Tab to flatpickr instance to open it
  2. Press an arrow key to navigate the calendar
  3. Press Esc to abort selection
  4. Press Tab to continue focus navigation in the document

Actual behaviour: Focus returns to the beginning of the document
Expected behaviour: Focus returns to input element or continues to the next focusable element after the input

Issue 2: Calendar arrow key navigation fails for some examples

Not sure exactly what the precondition is for this but the issue can be reproduced deterministically for the following examples:

  • minDate field 1 (but it works fine for the maxDate example and both minDate and maxDate example)
  • all examples under disabling dates and enabling dates

Steps to reproduce:

  1. Tab to or click in one of the affected flatpickr instances to open it
  2. Press an arrow key to navigate the calendar

Desired behaviour: Calendar should navigate
Actual behaviour: Nothing happens

Issue 3: Unmanaged keyboard trap in timepicker

Related: #986 馃憠 Fixed in #1441

Steps to reproduce:

  1. Tab to or click in any flatpickr instance with the time picker
  2. Navigate to the time picker fields by pressing the arrow keys (or Enter if accompanied by a calendar)
  3. Press Tab a few times

Desired behaviour: Focus should cycle between the flatpickr elements.

  • Date and time picker: calendar :point_right: hour :point_right: minute :point_right: [AM/PM, if 12-hour] :point_right: calendar
  • Time only: hour :point_right: minute :point_right: [AM/PM, if 12-hour] :point_right: hour

Actual behaviour: Focus escapes the flatpickr instance and returns to the beginning of the document. I've also noticed that Shift+Tab also manages to escape the keyboard trap.

Reproduction Link

All issues can be reproduced on the examples page: https://chmln.github.io/flatpickr/examples/

Your Environment

  • flatpickr version used: 4.2.4
  • Browser name and version: Chrome 64, Firefox 58
  • OS and version: Linux Mint 18.2

Most helpful comment

any news about solution to the accessibilities issues?

accessibility is the only reason that i can't push this date picker in my work

>All comments

any news about solution to the accessibilities issues?

accessibility is the only reason that i can't push this date picker in my work

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mchaves-ciandt picture mchaves-ciandt  路  3Comments

pimskie picture pimskie  路  3Comments

zlepper picture zlepper  路  3Comments

719media picture 719media  路  3Comments

PierreGirbau picture PierreGirbau  路  3Comments