Opened 10 years ago

Closed 9 years ago

#9918 closed enhancement (fixed)

DateTextBox: add focus and navigation for Calendar popup

Reported by: Adam Peller Owned by: Becky Gibson
Priority: high Milestone: 1.6
Component: Accessibility Version: 1.3.2
Keywords: Cc:
Blocked By: Blocking:

Description

Calendar is now accessible. Need to have a way to transfer focus to the popup (up/down arrow key?) and implement escape key to get out.

Change History (18)

comment:1 Changed 10 years ago by Adam Peller

See #6430

comment:2 Changed 10 years ago by bill

And also #9356 and #5151, maybe can be fixed by converting DateTextBox to extend _HasDropDown.

comment:3 Changed 10 years ago by Becky Gibson

would really like to get this into 1.4 but I have to deal with the a11y grid bugs first.

comment:4 Changed 10 years ago by Adam Peller

Milestone: tbd1.5

comment:5 Changed 10 years ago by Becky Gibson

Milestone: 1.5future

comment:6 Changed 9 years ago by Chris Mitchell

IBM#133281

comment:7 Changed 9 years ago by bill

Milestone: future1.6
Owner: changed from Becky Gibson to bill
Status: newassigned
Summary: a11y: add focus and navigation to datetextbox popupDateTextBox: add focus and navigation for Calendar popup

(In [22556]) Fix Calendar to handle keypress events forwarded from DateTextBox, thus making the DateTextBox's calendar drop down keyboard accessible.

Remaining issues include:

  • Needs review for screen reader support (if that's possible to support). One possible modification is to make every keystroke change the value in the <input> field, so that the screen reader knows what happened. But need to worry about how to handle disabled dates in the calendar.
  • Automated tests
  • ENTER key handling: in Calendar, every arrow key press changes the Calendar's value, firing onChange(). Note the difference from ColorPalette, which only fires onChange() upon the ENTER/SPACE key. The difference is because ColorPalette cells gets focus and using the arrow keys just changes the focused cell, rather than changing the value... whereas Calendar as a drop down doesn't focus at all.

Normally onChange() makes dijit.popup() report an onExecute event, which then makes _HasDropDown close the drop down. Working around this now by adding an explicit onExecute() method to Calendar which is only called on the ENTER/SPACE key. But I only intended the onExecute() callback to be used for fancy drop downs like TooltipDialog. Maybe there's a better way to handle this, perhaps flagging Calendar as an always-fires-onchange type widget and monitoring for ENTER key in _HasDropDown itself.

  • Fix key repeat. Typematic never worked for TimeTextBox because of complications with forwarding the key events from the TimeTextBox to the _TimePicker. However, key repeat did work because we were attaching to the onkeypress event. _HasDropDown currently attaches to onkeyup rather than onkeypress. Switching it to onkeypress is not trivial, because _HasDropDown also has an onkeydown handler which calls evt.preventDefault(), which on IE makes the onkeypress event not fire for ENTER/SPACE key. (In other words, need to be careful that we don't break ENTER/SPACE key handling.)

comment:8 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:9 Changed 9 years ago by bill

(In [22562]) Removing some unneeded dojo.hitch() calls and unnecessarily long timeouts. My experience is (and my tests show) that long timeouts are needed when the drop down is shown/hidden, due to iframe creation slowness on IE6, but otherwise even IE6 runs fast. Refs #9918.

comment:10 in reply to:  7 Changed 9 years ago by ben hockey

Replying to bill:

(In [22556]) Fix Calendar to handle keypress events forwarded from DateTextBox, thus making the DateTextBox's calendar drop down keyboard accessible.

it seems that this change has stopped the calendar from working as a drop down in a DropDownButton?. clicking on a date no longer closes the drop down. it looks like the fix might be as simple as calling this.onExecute() from _onDayClick but not sure if that's right.

comment:11 Changed 9 years ago by bill

You are right, thanks for catching that.

comment:12 Changed 9 years ago by bill

(In [22579]) Need to call onExecute() on mouse click, in addition to keyboard "click" via ENTER key. Refs #9918 !strict.

comment:13 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:14 Changed 9 years ago by bill

Owner: changed from bill to Becky Gibson
Status: assignednew

All this needs now is review/fixes for screen reader support. Becky, can you do that?

comment:15 Changed 9 years ago by Becky Gibson

Status: newassigned

Yes - will review and get working with screen reader. Will need to context shift so may be a few weeks.

comment:16 Changed 9 years ago by Becky Gibson

I updated the doc at http://docs.dojocampus.org/dijit/Calendar to add the accessibility information for Calendar.

comment:18 Changed 9 years ago by Becky Gibson

Resolution: fixed
Status: assignedclosed

final fix in [23410] closing.

Note: See TracTickets for help on using tickets.