Fixed accessibility issues in Schedule Tab

Description

  1.  

    1.  

      1. Background
        (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.

  1.  

    1.  

      1.  

        1. Schedule Tab tree

  • Keep the table structure

  • Add screen reader text[4] 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”

  1.  

    1.  

      1.  

        1. Date picker
          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.

  1.  

    1.  

      1.  

        1. Save Changes
          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.

  1.  

    1.  

      1.  

        1. Other issues

  • The “Set date” and “Set time” links should really be buttons.

  • When you click them, focus[2] 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.

  1.  

    1.  

      1. 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”

  1.  

    1.  

      1. Testing

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

Issue https://github.com/mitocw/edx-platform/issues/22
issue https://github.com/jazkarta/edx-platform/issues/120
issue https://github.com/jazkarta/edx-platform/issues/63
issue https://github.com/jazkarta/edx-platform/issues/30
@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)

Activity

Show:
Sarina Canelake
August 6, 2015, 5:03 PM

could you please review this?

Sarina Canelake
July 29, 2015, 5:41 PM

FYI

Done

Assignee

Mark Sadecki

Reporter

Edx Admin [Administrator]

Labels

Contributor Name

Amir Qayyum Khan

Repo

edx/edx-platform

Customer

Epic Link

None

OSCM Assignee

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Blended Hour Utilization Percentage

None

edX Theme

None

edX Squad

None

Github Lines Added

None

Github Lines Deleted

None

Priority

Unset