Fixed explicit label issues related to CCX accessibility #9038

amir-qayyum-khan · 2015-07-24T10:13:17Z

Background

(copied verbatim from Mark Sadecki's CCX Accessibility audit - July 17, 2015)

"... Explicit labels are elements that programmatically associate form fields with accessible text. Many of the fields missing accessible labels in CCX have visible text labels already. They just need to be wrapped in <label> elements. <label> elements can be associated with input fields in one of two ways; an implied relationship is assumed if the input is a child of the <label> element, or, explicit relationships can be defined using a for attribute on the element that references an id attribute on the input."

Studio Updates: None.

LMS Updates: CCX Dashboard now has explicit labels to meet edX Accessibility Guidelines.

Instructor Dashboard

Membership Tab

“Email Addresses/Usernames” textarea now has an explicit label.

CCX Coach Dashboard

Schedule Tab

“Section” select menu now has an explicit label.
“Subsection” select menu now has an explicit label.
“Unit” select menu now has an explicit label.
“Start Date” now has explicit label
“Start Time” now has explicit label
“Due Date” now has explicit label
“Due Time” now has explicit label

Enrollment Tab

“Email Addresses/Usernames” textarea now has an explicit label.
“Auto Enroll” checkbox now has an explicit label.
“Notify users by email” checkbox now has an explicit label.

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 mitocw#21
EDX https://github.com/edx/edx-platform/pull/7855
EDX https://github.com/edx/edx-platform/pull/7921
EDX https://github.com/edx/edx-platform/pull/7873

@pdpinch @pwilkins
mitocw#26

openedx-webhooks · 2015-07-24T10:13:19Z

Thanks for the pull request, @amir-qayyum-khan! I've created OSPR-714 to keep track of it in JIRA. JIRA is a place for product owners to prioritize feature reviews by the engineering development teams.

Feel free to add as much of the following information to the ticket:

supporting documentation
edx-code email threads
timeline information ('this must be merged by XX date', and why that is)
partner information ('this is a course on edx.org')
any other information that can help Product understand the context for the PR

All technical communication about the code itself will still be done via the Github pull request interface. As a reminder, our process documentation is here.

pdpinch · 2015-07-24T12:18:01Z

first of two PRs @cptvitamin

sarina · 2015-07-24T14:00:00Z

@pdpinch FYI that Mark S is out until next Monday, 3 Aug. He will likely have lots to catch up on when he returns, so I'm sure he'll get to this when he can but it may be a few weeks.

downzer0 · 2015-07-28T20:25:15Z

lms/static/js/ccx/schedule.js

@@ -139,7 +139,7 @@ var edx = edx || {};
              return !node.hidden;});
            this.$el.html(schedule_template({chapters: this.showing}));
            $('table.ccx-schedule .sequential,.vertical').hide();
-            $('table.ccx-schedule .toggle-collapse').on('click', this.toggle_collapse);
+            $('table.ccx-schedule .unit a').on('click', this.toggle_collapse);


We prefer to target classnames rather than bare elements. Would you please provide a classname for this a and then use that classname here in place of it? An example might be:

$('.ccx-schedule .unit .toggle-collapse')...

Notice how we're not using any specific elements.

downzer0 · 2015-07-28T20:34:23Z

@amir-qayyum-khan Thanks for this work. I've provided some initial feedback. Once you address those minor things I will do another pass and check accessibility.

amir-qayyum-khan · 2015-07-29T09:42:03Z

Done @clrux

cc @pdpinch

downzer0 · 2015-07-30T14:12:28Z

@amir-qayyum-khan Thanks! Would you mind providing instructions in this PR's description for how to preview this locally? And if you are able, a sandbox to preview this would be great.

amir-qayyum-khan · 2015-08-10T12:50:53Z

Thanks. Done with changes that you guys suggested @cptvitamin and @clrux

cc @pdpinch

sarina · 2015-08-10T21:31:28Z

jenkins run python
jenkins run lettuce

amir-qayyum-khan · 2015-08-11T13:50:41Z

lms/templates/ccx/schedule.html

-        <label></label>
-        <input placeholder="Date" class="date" type="text" name="date"/ size="11">
-        <input placeholder="Time" class="time" type="text" name="time"/ size="6">
+        <label for="date" class="sr form-label">Enter date</label>


Added additional information like formats of date and time for screen readers in https://github.com/edx/edx-platform/pull/9114

pdpinch · 2015-08-14T11:53:30Z

@cptvitamin @clrux this PR is currently on sandbox2o.mitx.mit.edu. Ping me or @pwilkins if you need an account.

cptvitamin · 2015-08-14T12:55:19Z

lms/templates/ccx/schedule.underscore

@@ -13,7 +13,7 @@
      <% _.each(chapters, function(chapter) { %>
        <tr class="chapter collapsed" data-location="<%= chapter.location %>" data-depth="1">
          <td class="unit">
-            <a href="#"><i class="fa fa-caret-right toggle-collapse"></i></a>
+            <a href="#" class="toggle-collapse"><i class="fa fa-caret-right"></i></a>


these should really be <buttons>

More importantly, they have no text value. At the very least you should have screen reader text that describes the control "Toggle chapter display" with an aria-expanded attribute that describes the current state (true or false)

Needs rebase. Done this in #9114
https://github.com/edx/edx-platform/pull/9114/files#diff-f15570680848e2d23dbfad465e79372dR26

cptvitamin · 2015-08-14T12:58:03Z

With the exception of the issues on those toggle links, everything here looks great. @amir-qayyum-khan

downzer0 · 2015-08-14T13:03:35Z

And a few more from me:

Instructor

Management tab, the "revoke access" icon needs aria-hidden="true"
If you leave the username or email blank when adding new staff, an error message appears but it is not announced.
- Add aria-live="polite" to the .member-lists-management so when an error message appears, it is announced. This will maintain focus on the input element.

Coach

Enrollment, when adding a student to a list, the student never appears, nor is there confirmation that he or she was added successfully (and no error messages if they weren't)

pdpinch · 2015-08-17T03:04:27Z

@amir-qayyum-khan can you rebase this?

…rshp team management to fix #21

amir-qayyum-khan · 2015-08-17T09:04:24Z

Done @cptvitamin and @clrux .

@clrux please created a PR https://github.com/edx/edx-platform/pull/9335 for issue
Enrollment, when adding a student to a list, the student never appears, nor is there confirmation that he or she was added successfully (and no error messages if they weren't)

cc @pdpinch

cptvitamin · 2015-08-17T14:19:11Z

lms/templates/ccx/enrollment.html

@@ -45,7 +46,7 @@
  </form>
 </div>

-<div class="member-lists-management" style="float:left;width:50%">
+<div class="member-lists-management" style="float:left;width:50%" aria-live="polite">


@amir-qayyum-khan what kind of information in this div do you expect to change? I only ask because putting an aria-live region on such a large area can make the page unnecessarily chatty. Sometimes its necessary to limit the scope with the aria-relevant attribute.

@cptvitamin I do inject error message here. I got this idea from feedback => 2nd point in section membership https://github.com/edx/edx-platform/pull/9038#issuecomment-131098884
Because this and issue below are same (identical layouts)

cptvitamin · 2015-08-17T14:22:02Z

This is looking very nice 👍

sarina · 2015-08-17T16:47:03Z

@cptvitamin can you go ahead and merge this, or is more work needed?

cptvitamin · 2015-08-17T18:31:29Z

👍

Fixed explicit label issues related to CCX accessibility

openedx-webhooks added open-source-contribution PR author is not from Axim or 2U needs triage labels Jul 24, 2015

amir-qayyum-khan force-pushed the fix/aq/extended_labels_issues_ccx branch 2 times, most recently from 308864c to b1a1b8f Compare July 24, 2015 10:21

openedx-webhooks added awaiting prioritization and removed needs triage labels Jul 24, 2015

downzer0 reviewed Jul 28, 2015
View reviewed changes

openedx-webhooks added waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. and removed awaiting prioritization labels Jul 28, 2015

amir-qayyum-khan force-pushed the fix/aq/extended_labels_issues_ccx branch from f08801b to 98f7aa5 Compare July 29, 2015 09:40

openedx-webhooks added engineering review and removed waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. labels Jul 29, 2015

openedx-webhooks added waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. and removed engineering review labels Jul 30, 2015

amir-qayyum-khan force-pushed the fix/aq/extended_labels_issues_ccx branch 2 times, most recently from 29898c1 to 302849c Compare August 10, 2015 12:47

amir-qayyum-khan reviewed Aug 11, 2015
View reviewed changes

amir-qayyum-khan force-pushed the fix/aq/extended_labels_issues_ccx branch from 302849c to 41be17b Compare August 13, 2015 18:50

pdpinch mentioned this pull request Aug 13, 2015

Fixed accessibility related issues in CCX #9304

Closed

cptvitamin reviewed Aug 14, 2015
View reviewed changes

amir-qayyum-khan force-pushed the fix/aq/extended_labels_issues_ccx branch 2 times, most recently from 716a487 to 9d3a988 Compare August 17, 2015 08:27

Fixed explicit labels related issues on CCX coach dashboard and membe…

e18fa2f

…rshp team management to fix #21

amir-qayyum-khan force-pushed the fix/aq/extended_labels_issues_ccx branch from 9d3a988 to e18fa2f Compare August 17, 2015 08:28

amir-qayyum-khan mentioned this pull request Aug 17, 2015

Added error message in enrollment tab inside CCX coach dashboard #9335

Merged

cptvitamin reviewed Aug 17, 2015
View reviewed changes

openedx-webhooks added waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. and removed awaiting prioritization labels Aug 17, 2015

openedx-webhooks added engineering review and removed waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. labels Aug 17, 2015

cptvitamin pushed a commit that referenced this pull request Aug 17, 2015

Merge pull request #9038 from mitocw/fix/aq/extended_labels_issues_ccx

19604a4

Fixed explicit label issues related to CCX accessibility

cptvitamin merged commit 19604a4 into openedx:master Aug 17, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed explicit label issues related to CCX accessibility #9038

Fixed explicit label issues related to CCX accessibility #9038

amir-qayyum-khan commented Jul 24, 2015

openedx-webhooks commented Jul 24, 2015

pdpinch commented Jul 24, 2015

sarina commented Jul 24, 2015

downzer0 Jul 28, 2015

downzer0 commented Jul 28, 2015

amir-qayyum-khan commented Jul 29, 2015

downzer0 commented Jul 30, 2015

amir-qayyum-khan commented Aug 10, 2015

sarina commented Aug 10, 2015

amir-qayyum-khan Aug 11, 2015

pdpinch commented Aug 14, 2015

cptvitamin Aug 14, 2015

cptvitamin Aug 14, 2015

amir-qayyum-khan Aug 15, 2015

cptvitamin commented Aug 14, 2015

downzer0 commented Aug 14, 2015

pdpinch commented Aug 17, 2015

amir-qayyum-khan commented Aug 17, 2015

cptvitamin Aug 17, 2015

amir-qayyum-khan Aug 17, 2015

cptvitamin commented Aug 17, 2015

sarina commented Aug 17, 2015

cptvitamin commented Aug 17, 2015

Fixed explicit label issues related to CCX accessibility #9038

Fixed explicit label issues related to CCX accessibility #9038

Conversation

amir-qayyum-khan commented Jul 24, 2015

Background

Instructor Dashboard

Membership Tab

CCX Coach Dashboard

Schedule Tab

Enrollment Tab

Testing

openedx-webhooks commented Jul 24, 2015

pdpinch commented Jul 24, 2015

sarina commented Jul 24, 2015

downzer0 Jul 28, 2015

Choose a reason for hiding this comment

downzer0 commented Jul 28, 2015

amir-qayyum-khan commented Jul 29, 2015

downzer0 commented Jul 30, 2015

amir-qayyum-khan commented Aug 10, 2015

sarina commented Aug 10, 2015

amir-qayyum-khan Aug 11, 2015

Choose a reason for hiding this comment

pdpinch commented Aug 14, 2015

cptvitamin Aug 14, 2015

Choose a reason for hiding this comment

cptvitamin Aug 14, 2015

Choose a reason for hiding this comment

amir-qayyum-khan Aug 15, 2015

Choose a reason for hiding this comment

cptvitamin commented Aug 14, 2015

downzer0 commented Aug 14, 2015

Instructor

Coach

pdpinch commented Aug 17, 2015

amir-qayyum-khan commented Aug 17, 2015

cptvitamin Aug 17, 2015

Choose a reason for hiding this comment

amir-qayyum-khan Aug 17, 2015

Choose a reason for hiding this comment

cptvitamin commented Aug 17, 2015

sarina commented Aug 17, 2015

cptvitamin commented Aug 17, 2015