Make the angularjs date picker calendar button more accessible
Bug #1796903 reported by
Jane Sandberg
This bug affects 1 person
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Fix Released
|
Medium
|
Unassigned | ||
3.1 |
Fix Released
|
Medium
|
Unassigned | ||
3.2 |
Fix Released
|
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.
tags: | added: pullrequest |
Changed in evergreen: | |
status: | Fix Committed → Fix Released |
To post a comment you must log in.
The branch is called: user/sandbergja /lp1796903_ accessible_ calendar_ button git.evergreen- ils.org/ ?p=working/ Evergreen. git;a=shortlog; h=refs/ heads/user/ sandbergja/ lp1796903_ accessible_ calendar_ button
Here is a link: http://
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