Calendar: keyboard support and ARIA

[bill]

Add keyboard access to Calendar, ]and to DateTextBox to navigate down to the calendar -- moved to #9918]

Taken from ​IBM Design Leadership recommendations.

[nathan]

I can work on this as a part of the work I'm doing for #6416.

The issue I see is with the key bindings. I think that PgUp/PgDn? would make sense for prev/next month. Possibly <SHIFT>PgUp/PgDn? for prev/next year?

The problem is with day changing. We could use Up/Down? to move between weeks, and left/right to move between days, - but one issue I see is that Left/Right? could cause problems - since you usually want to have them available for moving around within the text box. The flip side of that is you could use Up/Down? for prev/next day - but that would not be very easy to move between weeks...

What are thoughts on this?

[nathan]

Also (I don't know where else to put this comment), the patch from #6416 will fix the bug in _DateTimeTextBox where pressing the down arrow will NOT re-show the dialog box (which I noticed was another issue on your spreadsheet). I encountered that bug during the development of the #6416 - but didn't log a separate issue for it.

[nathan]

Reassigning back to becky...some of the work in #6416 might apply to this - but it appears, after speaking with her, that this ticket is meant to track a much larger work than originally I had thought.

[bill]

Assuming we keep focus within the <input> box, like on ComboBox, it seems like left/right arrow should navigate within the calendar (when the drop down is showing), and navigate within the <input> when the drop down is closed. Maybe not ideal but seems like the best compromise?

[Becky Gibson]

from July, 2009 - might be out of date

[Adam Peller]

(In [20045]) Add ARIA markup to Calendar template. Refs #6430

[Adam Peller]

(In [20046]) clarify description comment, hopefully will become unneeded soon. Refs #6430 !strict

[Adam Peller]

attempt at keyboard patch (Calendar only; still needs DateTextBox? interactions)

[Adam Peller]

ok, here's a stab at my patch. _onKeyPress doesn't fire... I tried setting focus. What's the trick?

[bill]

Cool, thanks for working on that.

I assume the problem is that the Calendar doesn't have focus. You mentioned above that you tried setting focus but all I see in the code is a TODO about it. Focus needs to be set onclick, otherwise calendar will never get it's initial focus event. (Although, I'm not sure about the a11y implications, I suspect with DateTextBox focus should stay on the <input> and DateTextBox should delegate the keyboard events to the calendar to process.)

The other thing about focus (assuming we want Calendar to be a stand alone widget) is that there should always be one node that has tabIndex != -1, so that a user can tab into the Calendar. Perhaps the node corresponding to the currently selected value, although David has requested that focus and selection be independent (in general for widgets, not specifically for Calendar).

[Adam Peller]

(In [20063]) First pass at keyboard accessibility for Calendar (does not fully address DateTextBox? containment) Refs #6430. !strict Also, fix event doc summaries. Refs #9820

[Adam Peller]

needs automated tests. Also, if the standalone widget passes a11y, we should rename to dijit.Calendar (and probably provide an alias for _Calendar, even though it was private)

[Becky Gibson]

(In [20103]) refs #6430 add simple support for screen reader to speak the current date as arrow through calendar. !strict

[Adam Peller]

(In [20109]) Reference dojo.date using member var Refs #6430 !strict

[Adam Peller]

(In [20116]) Rename _Calendar to Calendar now that we have a11y. Refs #6430 !strict

[Adam Peller]

(In [20117]) Finish _Calendar->Calendar move. Put a stub in, even though it's a private class. Mark it 1.5 but may leave it around longer. Refs #6430 !strict

[bill]

(In [20140]) Remove obsolete comment, refs #6430 !strict

[bill]

(In [20141]) Use tabIndex via attributeMap so that developer can set it. Refs #6430 !strict. Also fixed some comment tabbing.

[bill]

Thanks for working on this. I think there are a few things that need to get done before closing the ticket (and before the 1.4 beta):

1. onChange should only be called when selecting a date via space/enter key. This is to be consistent with ColorPalette and so it's possible to use calendar as a drop down. Using the arrow keys should be like moving the mouse, just affecting hover position (typically arrow keys affect focus position, etc. that you've put focus onto the Calendar.domNode itself).

2. robot tests. You can copy what's in Calendar_mouse.html and just modify it to make sure keyboard is working

There are some other TODO's in the code too, but those can wait.

Note that this ticket originally listed DateTextBox a11y, but Adam split that off to #9918.

[bill]

(In [20191]) Convert dijit._Calendar references to dijit.Calendar. Refs #6430 !strict.

[Adam Peller]

(In [20324]) first attempt at an automated Calendar keyboard test. DOH Robot doesn't seem to hook up with the test. Refs #6430

[bill]

Cool, the test is working for me (I tried it on Safari4/mac)... I can see the different values getting highlighted by the arrow key movement.

[Adam Peller]

(In [20334]) Add to robot calendar tests. Fixes #6430

[bill]

Thanks for adding the tests. Also the onChange behavior needs to be changed, as I wrote above: onChange should only be called when selecting a date via space/enter key. This is to be consistent with ColorPalette? and so it's possible to use calendar as a drop down. Using the arrow keys should be like moving the mouse, just affecting hover position (typically arrow keys affect focus position, etc. that you've put focus onto the Calendar.domNode itself).

[Adam Peller]

Tracking the event issue in #10001

[Adam Peller]

(In [20763]) Account for bidi in keyboard navigation. Refs #6430 !strict

[Adam Peller]

(In [20764]) better to use widget ltr method. Refs #6430 !strict

[bill]

(In [21690]) focusable element before and after calendar, so it's easie to test calendar focus. refs #6430.

[bill]

Note that there are some unresolved issues, which I've filed as separate tickets #11483 and #11484.

[bill]

(In [22561]) Keyboard tests for DateTextBox, working around the known issue #11483, #11484, and the lack of key repeat support. Should add tests for navigation across disabled dates, and for key repeat, after those features are working. Refs #6430, #9918, #11483, #11484.

[bill]

(In [22665]) Calendar: separate focus and selection handling, so that (like ColorPalette and Tree), arrow keys navigate and ENTER/SPACE selects the date (fixes #10001 !strict). This allows navigation across disabled dates (refs #6430, fixes #11484), and completes keyboard support for DateTextBox, although it still needs screen reader work (refs #9918).

Also seems to have fixed the ctrl-page-up/down problem on FF/mac (fixes #11483).

Also merged in Calendar.set("value", ..., priorityChange) support from neonstalwart (fixes #11331), thanks!

[bill]

(In [23457]) Adding Calendar_a11y.html test to suite. Refs #6430.