Fixed accessibility issues in Schedule Tab
(copied verbatim from *Mark Sadecki's* CCX Accessibility audit - July 17, 2015)
Unfortunately, there are some significant issues with the way the Schedule Table is implemented. In summary, there is nothing that programmatically indicates the relationship between the nested table rows. They only appear related visually by their padding-left. Also, the controls to expand/collapse have no accessible text and are not associated with the Section/Subsection/Unit name. All of these objects are conveyed as equal table rows.
Schedule Tab tree
Keep the table structure
Add screen reader text that follows each “title” in the Unit column that identifies it as a “Section”, “Subsection”, or “Unit”
Add screen reader text for each toggle control that indicates what clicking it will do (either “Expand” or - - “Collapse” this will toggle according to its current state)
Add controls before the table to “Expand All”/“Collapse All”
The accessibility of the date and time pickers associated with type=“date” and type=“time” input fields is the responsibility of the user agent. Some UAs will allow the user to manually type a date. For this to work though, it has to be in the right format. Suggest adding help text to these form fields which indicates what the acceptable format is e.g. yyyy-mm-dd or 2015–07–17. The current placeholder indicates that yyyy/mm/dd is acceptable. However Firefox and Safari accept the yyyy-mm-dd format. This makes the current placeholder misleading.
After adding a new unit to the schedule, the Save Changes block is added to the DOM. A screen reader user would not know this has happened. Since an action is required (“Save Changes”) it is appropriate to move focus to this new content. Suggest adding a tabindex=“–1” to this div and moving focus() to it. Saving Changes moves the focus back tot he Schedule a Unit div, and I think that is an acceptable workflow.
The “Set date” and “Set time” links should really be buttons.
When you click them, focus must be moved to the modal dialog that opens.
The date and time inputs in the dialog box suffer from the same label issues as in “Schedule a Unit” above
Focus must remain trapped in the dialog box until it is closed.
“Remove” links are all identical and provide no context. It would be helpful to add screen reader text that includes the name of the Unit that would be removed.
All of the toggle controls need accessible text.
All icon fonts ) need aria-hidden=“true” added to them.
*Studio Updates:* None.
*LMS Updates:* CCX schedule tab is now fix to meet edX Accessibility Guidelines.
What is done in this PR
Added Expand all button
Added Collapse all button
Added expand/collapse status to tree
Added labels to remove link, expand/collapse links
Made set date links, buttons in tree
Added focus to set date dialog
Added placeholder alternatives for screen readers in set date dialog
Trapped focus to set date until it is open
Added tab index to alerts like error message, save changes, all unit saved etc
Added labels and roles to alerts line error message, save changes, all unit saved etc
On any change made to schedule put focus to save changes alert.
Fixed date picker issues where it was showing 2 date picker on chrome and was accepting format mm/dd/yy where in other browsers it was taking format yyyy-mm-dd
Added screen reader text that follows each “title” in the Unit column that identifies it as a “Section”, “Subsection”, or “Unit”
You can use screen reading tools like chromeVox (A chrome browser plugin) or command+F5 on mac to verify this PR.
Also read http://edx-partner-course-staff.readthedocs.org/en/latest/getting_started/accessibility.html
@pdpinch @pwilkins @clrux
![screen shot 2015-07-28 at 7 22 50 pm](https://cloud.githubusercontent.com/assets/10431250/8935470/5b1bcdca-3566-11e5-87b5-51e311b4794a.png)
could you please review this?