#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, [email protected]… |
Blocked By: | Blocking: |
Description (last modified by )
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)
Change History (38)
comment:1 Changed 14 years ago by
Cc: | Becky Gibson added |
---|---|
Owner: | changed from Becky Gibson to nathan |
Status: | new → assigned |
comment:2 Changed 14 years ago by
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 14 years ago by
Cc: | nathan added; Becky Gibson removed |
---|---|
Owner: | changed from nathan to Becky Gibson |
Status: | assigned → new |
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 14 years ago by
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 14 years ago by
Cc: | Nathan Toone added; nathan removed |
---|
comment:6 Changed 14 years ago by
Milestone: | 1.3 → 1.5 |
---|
comment:7 Changed 13 years ago by
Cc: | Adam Peller [email protected]… added |
---|---|
Milestone: | 1.5 → 1.4 |
comment:9 Changed 13 years ago by
comment:10 Changed 13 years ago by
Owner: | changed from Becky Gibson to Adam Peller |
---|---|
Status: | new → assigned |
Changed 13 years ago by
attempt at keyboard patch (Calendar only; still needs DateTextBox? interactions)
comment:11 Changed 13 years ago by
ok, here's a stab at my patch. _onKeyPress doesn't fire... I tried setting focus. What's the trick?
comment:12 Changed 13 years ago by
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 13 years ago by
(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 13 years ago by
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 13 years ago by
comment:16 Changed 13 years ago by
comment:17 Changed 13 years ago by
comment:18 Changed 13 years ago by
comment:19 Changed 13 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
Summary: | Calendar: keyboard support → Calendar: keyboard support and ARIA |
comment:21 Changed 13 years ago by
comment:22 Changed 13 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
Type: | task → enhancement |
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):
- 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).
- 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 13 years ago by
comment:24 Changed 13 years ago by
comment:25 Changed 13 years ago by
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 13 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
comment:27 Changed 13 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
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 13 years ago by
Description: | modified (diff) |
---|
comment:29 Changed 13 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
Tracking the event issue in #10001
comment:30 Changed 13 years ago by
comment:32 Changed 12 years ago by
comment:33 Changed 12 years ago by
comment:34 Changed 12 years ago by
comment:35 Changed 12 years ago by
(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!
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?