Opened 11 years ago

Closed 10 years ago

Last modified 9 years ago

#6430 closed enhancement (fixed)

Calendar: keyboard support and ARIA

Reported by: bill Owned by: Adam Peller
Priority: high Milestone: 1.4
Component: Accessibility Version: 1.1.0
Keywords: ibm Cc: Nathan Toone, Adam Peller, dltodd@…
Blocked By: Blocking:

Description (last modified by Adam Peller)

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

Taken from IBM Design Leadership recommendations.

Attachments (2)

bg_calendar.patch (12.0 KB) - added by Becky Gibson 10 years ago.
from July, 2009 - might be out of date
cal.patch (3.7 KB) - added by Adam Peller 10 years ago.
attempt at keyboard patch (Calendar only; still needs DateTextBox? interactions)

Download all attachments as: .zip

Change History (38)

comment:1 Changed 11 years ago by nathan

Cc: Becky Gibson added
Owner: changed from Becky Gibson to nathan
Status: newassigned

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?

comment:2 Changed 11 years ago by 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.

comment:3 Changed 11 years ago by nathan

Cc: nathan added; Becky Gibson removed
Owner: changed from nathan to Becky Gibson
Status: assignednew

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.

comment:4 Changed 11 years ago by 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?

comment:5 Changed 11 years ago by Nathan Toone

Cc: Nathan Toone added; nathan removed

comment:6 Changed 11 years ago by bill

Milestone: 1.31.5

Changed 10 years ago by Becky Gibson

Attachment: bg_calendar.patch added

from July, 2009 - might be out of date

comment:7 Changed 10 years ago by Adam Peller

Cc: Adam Peller dltodd@… added
Milestone: 1.51.4

comment:8 Changed 10 years ago by Adam Peller

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

comment:9 Changed 10 years ago by Adam Peller

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

comment:10 Changed 10 years ago by Adam Peller

Owner: changed from Becky Gibson to Adam Peller
Status: newassigned

Changed 10 years ago by Adam Peller

Attachment: cal.patch added

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

comment:11 Changed 10 years ago by Adam Peller

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

comment:12 Changed 10 years ago by 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).

comment:13 Changed 10 years ago by 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

comment:14 Changed 10 years ago by 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)

comment:15 Changed 10 years ago by Becky Gibson

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

comment:16 Changed 10 years ago by Adam Peller

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

comment:17 Changed 10 years ago by Adam Peller

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

comment:18 Changed 10 years ago by 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

comment:19 Changed 10 years ago by Adam Peller

Resolution: fixed
Status: assignedclosed
Summary: Calendar: keyboard supportCalendar: keyboard support and ARIA

comment:20 Changed 10 years ago by bill

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

comment:21 Changed 10 years ago by bill

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

comment:22 Changed 10 years ago by bill

Resolution: fixed
Status: closedreopened
Type: taskenhancement

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).
  1. 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.

comment:23 Changed 10 years ago by bill

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

comment:24 Changed 10 years ago by 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

comment:25 Changed 10 years ago by 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.

comment:26 Changed 10 years ago by Adam Peller

Resolution: fixed
Status: reopenedclosed

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

comment:27 Changed 10 years ago by bill

Resolution: fixed
Status: closedreopened

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).

comment:28 Changed 10 years ago by Adam Peller

Description: modified (diff)

comment:29 Changed 10 years ago by Adam Peller

Resolution: fixed
Status: reopenedclosed

Tracking the event issue in #10001

comment:30 Changed 10 years ago by Adam Peller

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

comment:31 Changed 10 years ago by Adam Peller

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

comment:32 Changed 9 years ago by bill

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

comment:33 Changed 9 years ago by bill

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

comment:34 Changed 9 years ago by 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.

comment:35 Changed 9 years ago by 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!

comment:36 Changed 9 years ago by bill

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

Note: See TracTickets for help on using tickets.