Replace jscalendar with JQuery UI calendar

Bug #1267239 reported by Jono M
8
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Fix Released
Wishlist
Robert Lyon

Bug Description

Currently the DHTML date picker widget (for example the date field on /artefact/plans/edit/task.php) is not easy to navigate using a keyboard since it opens below all other elements and does not have focus set to it - this is confusing for screen reader users since activating the button appears to do nothing.

The current date picker could be modified to be made accessible, or it could be replaced with another library (such as a variant of jQuery UI datepicker)

Note that screen readers users can still enter dates manually so this is not essential for WCAG compliance.

Affects latest master (using Orca 3.4.2)

Revision history for this message
Kristina Hoeppner (kris-hoeppner) wrote :

See bug #1259685 for more info on what JQuery is doing so that we don't potentially replicate what already exists when we come back to this.

Changed in mahara:
status: New → Confirmed
Robert Lyon (robertl-9)
Changed in mahara:
milestone: none → 1.10.0
assignee: nobody → Robert Lyon (robertl-9)
status: Confirmed → In Progress
Revision history for this message
Aaron Wells (u-aaronw) wrote :

Reposting Robert's comment from Bug 1259685:

This roadmap for the jQuery UI datepicker is interesting so I'll a link to it here
http://wiki.jqueryui.com/w/page/12137778/Datepicker

It sounds like they are trying to get some usability issues sorted out.

If we can get Datepicker and timepicker plugin (possible option)
http://trentrichardson.com/examples/timepicker/

going with keyboard accessibility that would be most useful.

Question is should we wait until others have sorted this issue - or should we take a look at sorting this ourselves?

As I understand it, the current date/time picker is not keyboard accessible, so something will need to be done.

Revision history for this message
Robert Lyon (robertl-9) wrote :
Revision history for this message
Mahara Bot (dev-mahara) wrote :

Patch for "master" branch: https://reviews.mahara.org/3413

Revision history for this message
Mahara Bot (dev-mahara) wrote : A patch has been submitted for review

Patch for "master" branch: https://reviews.mahara.org/3414

Revision history for this message
Mahara Bot (dev-mahara) wrote :

Patch for "master" branch: https://reviews.mahara.org/3416

Revision history for this message
Mahara Bot (dev-mahara) wrote :

Patch for "master" branch: https://reviews.mahara.org/3415

Revision history for this message
Robert Lyon (robertl-9) wrote : Re: Datepicker is not keyboard-accessible

Have split this patch up into multiple patches to deal with the adding of timepicker, adjusting timepicker, adjusting pieform calendar element, and removing of old jscalendar:
https://reviews.mahara.org/3413
https://reviews.mahara.org/3414
https://reviews.mahara.org/3415
https://reviews.mahara.org/3416

Revision history for this message
Mahara Bot (dev-mahara) wrote : A change has been merged

Reviewed: https://reviews.mahara.org/3413
Committed: http://gitorious.org/mahara/mahara/commit/0fe114ca8b5e39d39cdeb6e62505ecbb18632731
Submitter: Yuliya Bozhko (<email address hidden>)
Branch: master

commit 0fe114ca8b5e39d39cdeb6e62505ecbb18632731
Author: Robert Lyon <email address hidden>
Date: Fri Jun 6 09:21:03 2014 +1200

Adding the jquery-ui timepicker addon (Bug 1267239)

To work with datepicker (part of jquery-ui) to allow for calendar to
pick time as well

Change-Id: I46ea265818cdad5acc5a38d20337311cfe09e352
Signed-off-by: Robert Lyon <email address hidden>

Aaron Wells (u-aaronw)
Changed in mahara:
milestone: 1.10.0 → 1.11.0
milestone: 1.11.0 → 1.10.0
summary: - Datepicker is not keyboard-accessible
+ Replace Datepicker with JQuery UI calendar
summary: - Replace Datepicker with JQuery UI calendar
+ Replace jscalendar with JQuery UI calendar
Revision history for this message
Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/3414
Committed: http://gitorious.org/mahara/mahara/commit/bdac0f06557fffc89833e7456967dcfadc1b299c
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit bdac0f06557fffc89833e7456967dcfadc1b299c
Author: Robert Lyon <email address hidden>
Date: Fri Jun 6 09:27:09 2014 +1200

Adding keybindings to timepicker (Bug #1267239)

Can now adjust hour/minute values with keyboard

The key bindings added for timepicker:
(to avoid clashes with existing key bindings)
ALT+UP: Move hour slider up one step
ALT+DOWN: Move hour slider down one step
SHIFT+LEFT: Move minute slider down one step
SHIFT+RIGHT: Move minute slider up one step

Change-Id: If073908f070eada92dfa4d010f28ed53f7ac3b04
Signed-off-by: Robert Lyon <email address hidden>

Revision history for this message
Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/3415
Committed: http://gitorious.org/mahara/mahara/commit/3340ef27d6ead60bf9e3aa9950d777e38bcf9a8c
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 3340ef27d6ead60bf9e3aa9950d777e38bcf9a8c
Author: Robert Lyon <email address hidden>
Date: Fri Jun 6 09:33:43 2014 +1200

Updating calendar pieform element to use datepicker/timepicker

(Bug #1267239)

The datepicker is now keyboard accessible but not fully screenreader
accessible - but the folks at datepicker are working on that

The key bindings you need to know for datepicker:
PAGE UP: Move to the previous month.
PAGE DOWN: Move to the next month.
CTRL+PAGE UP: Move to the previous year.
CTRL+PAGE DOWN: Move to the next year.
CTRL+HOME: Move to the current month. Open the datepicker if closed.
CTRL+LEFT: Move to the previous day.
CTRL+RIGHT: Move to the next day.
CTRL+UP: Move to the previous week.
CTRL+DOWN: Move the next week.
ENTER: Select the focused date.
ESC: Close the datepicker

The key bindings added for timepicker:
(to avoid clashes with existing key bindings)
ALT+UP: Move hour slider up one step
ALT+DOWN: Move hour slider down one step
SHIFT+LEFT: Move minute slider down one step
SHIFT+RIGHT: Move minute slider up one step

Also added the prev/next year button options

Change-Id: Iff857ba9efb23fd123de6af8f78ceffee9c0ac79
Signed-off-by: Robert Lyon <email address hidden>

Revision history for this message
Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/3416
Committed: http://gitorious.org/mahara/mahara/commit/9d7fa081b6365ac08fb1c20c2482dd1d42cab0bb
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 9d7fa081b6365ac08fb1c20c2482dd1d42cab0bb
Author: Robert Lyon <email address hidden>
Date: Fri Jun 6 09:37:25 2014 +1200

Removing old jscalendar (Bug #1267239)

We are now using jQuery-ui datepicker + timepicker

Change-Id: I518490fb04a224a08fc3853386ab5e0eee7d2964
Signed-off-by: Robert Lyon <email address hidden>

Robert Lyon (robertl-9)
Changed in mahara:
status: In Progress → Fix Committed
Aaron Wells (u-aaronw)
Changed in mahara:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Related blueprints

Remote bug watches

Bug watches keep track of this bug in other bug trackers.