Make the angularjs date picker calendar button more accessible

Bug #1796903 reported by Jane Sandberg on 2018-10-09
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Medium
Unassigned
3.1
Medium
Unassigned
3.2
Medium
Unassigned

Bug Description

Currently, there is no text in this element that would give a screen reader user any indication of what the button does.

We should do the following to make this button more usable:

* Add an aria-label to the button element
* Add an aria-pressed attribute to the button element that is true when datePickerIsOpen, false when !datePickerIsOpen
* Change the <i> to a <span> for better semantics / consistency with other icons in the Web client.
* Add a title attribute to the <span> to provide a tooltip for sighted mouse users.

Branch forthcoming.

Jane Sandberg (sandbej) wrote :

The branch is called: user/sandbergja/lp1796903_accessible_calendar_button
Here is a link: http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sandbergja/lp1796903_accessible_calendar_button

Also note that this commit *only* helps with the button to open the calendar. There are upstream issues with the calendar itself (e.g. https://github.com/angular-ui/bootstrap/issues/5520)

Testing notes from the commit:
    1) After applying this commit, navigate to a place in the Web client
    that includes a date picker (such as the checkin screen).
    2) Hover over the calendar button with your mouse and confirm that a
    tooltip appears.
    3) Verify that the button element has an aria-label attribute.
    4) Verify that the button element has an aria-pressed attribute that
    is false when the date picker is closed; true when it is open.
    5) Use a screen reader (like NVDA or ChromeVox). Verify that when you
    tab over to the date picker, the user is informed of the aria-label
    and aria-pressed values

Jane Sandberg (sandbej) on 2018-10-09
tags: added: pullrequest
Galen Charlton (gmc) wrote :

I've pushed a signoff of Jane's patch along with a suggested followup to

user/gmcharlt/lp1796903_angularjs_datepicker_a11y
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/gmcharlt/lp1796903_angularjs_datepicker_a11y

Jane Sandberg (sandbej) wrote :

Thanks, Galen. Signoff branch here: user/sandbergja/lp1796903_angularjs_datepicker_a11y_signedoff

tags: added: signedoff
Changed in evergreen:
milestone: none → 3.3.3
Galen Charlton (gmc) wrote :

Pushed to master, rel_3_3, rel_3_2, and rel_3_1. Thanks, Jane!

Changed in evergreen:
importance: Undecided → Medium
status: New → Confirmed
status: Confirmed → Fix Committed
Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers

Remote bug watches

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