From f708806118b2952cefebf395cfdf4e9ccde14cdb Mon Sep 17 00:00:00 2001
From: Xavier Antoviaque <xavier@antoviaque.org>
Date: Mon, 9 Sep 2013 08:17:15 -0300
Subject: [PATCH 1/6] accessibility: Add `aria-describedby` to login/forgot
 password (LMS-602)

Also adding the email description to the login page and applying the
same aria attribute to the correspondin input on that page.

From LMS-602:

> There is additional explanatory text, marked up in a span element after
> the email input. The input elements should be explicitly associated with
> this additional text using the aria-describedby attribute. This will
> require an ID to be assigned to the span element.
---
 lms/templates/forgot_password_modal.html | 4 ++--
 lms/templates/login.html                 | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/lms/templates/forgot_password_modal.html b/lms/templates/forgot_password_modal.html
index e4c0c02e33..0c3a971ecc 100644
--- a/lms/templates/forgot_password_modal.html
+++ b/lms/templates/forgot_password_modal.html
@@ -19,8 +19,8 @@
           <ol class="list-input">
             <li class="field required text" id="field-email">
               <label for="pwd_reset_email">${_("Your E-mail Address")}</label>
-              <input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" />
-              <span class="tip tip-input">${_("This is the email address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
+              <input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" aria-describedby="pwd_reset_email-tip" />
+              <span class="tip tip-input" id="pwd_reset_email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
             </li>
           </ol>
         </fieldset>
diff --git a/lms/templates/login.html b/lms/templates/login.html
index b737255a0d..5fbc64d304 100644
--- a/lms/templates/login.html
+++ b/lms/templates/login.html
@@ -113,7 +113,8 @@
         <ol class="list-input">
           <li class="field required text" id="field-email">
             <label for="email">${_('E-mail')}</label>
-            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" />
+            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" aria-described-by="email-tip" />
+            <span class="tip tip-input" id="email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
           </li>
           <li class="field required password" id="field-password">
             <label for="password">${_('Password')}</label>

From 9147051e7a5354eda5ae1ccf963c05ba013c8680 Mon Sep 17 00:00:00 2001
From: Xavier Antoviaque <xavier@antoviaque.org>
Date: Mon, 9 Sep 2013 11:49:26 -0300
Subject: [PATCH 2/6] accessibility: Focus on error messages in Help modal
 (LMS-584)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

> To make this change explicit to assistive technology, focus should be
> moved programmatically to this div after it has been made visible. To
> allow the div to be focused via scripting (without adding it to the
> regular focus order that keyboard users cycle through), a tabindex=”-1”
> should be added.

> In addition, the invalid fields should be given a an
> aria-invalid="true" attribute.
---
 lms/templates/help_modal.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index a0a0eca9c3..0e9c7c24f5 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -60,7 +60,7 @@ discussion_link = get_discussion_link(course) if course else None
     <header></header>
 
     <form id="feedback_form" class="feedback_form" method="post" data-remote="true" action="/submit_feedback">
-      <div id="feedback_error" class="modal-form-error"></div>
+      <div id="feedback_error" class="modal-form-error" tabindex="-1"></div>
 % if not user.is_authenticated():
       <label data-field="name">${_('Name*')}</label>
       <input name="name" type="text">
@@ -88,7 +88,7 @@ discussion_link = get_discussion_link(course) if course else None
     </div>
   </div>
 
-  <div class="inner-wrapper" id="feedback_success_wrapper">
+  <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="-1">
     <header>
       <h2>${_('Thank You!')}</h2>
       <hr>
@@ -182,16 +182,17 @@ discussion_link = get_discussion_link(course) if course else None
     $("#feedback_form").on("ajax:success", function(event, data, status, xhr) {
         $("#feedback_form_wrapper").css("display", "none");
         $("#feedback_success_wrapper").css("display", "block");
+        $("#feedback_success_wrapper").focus();
     });
     $("#feedback_form").on("ajax:error", function(event, xhr, status, error) {
-        $(".field-error").removeClass("field-error");
+        $(".field-error").removeClass("field-error").removeAttr("aria-invalid");
         var responseData;
         try {
             responseData = jQuery.parseJSON(xhr.responseText);
         } catch(err) {
         }
         if (responseData) {
-            $("[data-field='"+responseData.field+"']").addClass("field-error");
+            $("[data-field='"+responseData.field+"']").addClass("field-error").attr("aria-invalid", "true");
             $("#feedback_error").html(responseData.error).stop().css("display", "block");
         } else {
             // If no data (or malformed data) is returned, a server error occurred
@@ -217,6 +218,8 @@ discussion_link = get_discussion_link(course) if course else None
             });
 %endif
         }
+        // Make change explicit to assistive technology
+        $("#feedback_error").focus();
     });
 })(this)
 </script>

From 4629ce73f6401691afce6e1de14b954579714eab Mon Sep 17 00:00:00 2001
From: Xavier Antoviaque <xavier@antoviaque.org>
Date: Mon, 9 Sep 2013 15:26:39 -0300
Subject: [PATCH 3/6] accessibility: Add aria-hidden attribute to the help
 modal (LMS-584)

Added a 'aria-hidden="true"' attribute to the modal initially, then
toggle the value of that attribute to "false" when the modal is shown.
Also remove the attribute when the modal is closed, whether it's through
a click on the close button or on the overlay.
---
 lms/templates/help_modal.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index 0e9c7c24f5..14c5543e07 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -12,7 +12,7 @@
   <a href="#help-modal" rel="leanModal">${_("Help")}</a>
 </div>
 
-<section id="help-modal" class="modal">
+<section id="help-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" id="help_wrapper">
     <header>
       <h2>${_('{span_start}{platform_name}{span_end} Help').format(span_start='<span class="edx">', span_end='</span>', platform_name=settings.PLATFORM_NAME)}</h2>
@@ -127,6 +127,11 @@ discussion_link = get_discussion_link(course) if course else None
 
 <script type="text/javascript">
 (function() {
+    var onModalClose = function() {
+        $(".help-modal .close-modal").off("click");
+        $("#lean_overlay").off("click");
+        $("#help-modal").attr("aria-hidden", "true");
+    };
     $(".help-tab").click(function() {
         $(".field-error").removeClass("field-error");
         $("#feedback_form")[0].reset();
@@ -135,6 +140,9 @@ discussion_link = get_discussion_link(course) if course else None
         $("#feedback_error").css("display", "none");
         $("#feedback_success_wrapper").css("display", "none");
         $("#help_wrapper").css("display", "block");
+        $("#help-modal").attr("aria-hidden", "false");
+        $("#help-modal .close-modal").click(onModalClose);
+        $("#lean_overlay").click(onModalClose);
     });
     showFeedback = function(event, issue_type, title, subject_label, details_label) {
         $("#help_wrapper").css("display", "none");

From 23eab5c5bdfd3dc49652b812c8b2f64791d6161d Mon Sep 17 00:00:00 2001
From: Xavier Antoviaque <xavier@antoviaque.org>
Date: Mon, 9 Sep 2013 16:43:44 -0300
Subject: [PATCH 4/6] accessibility: Replace close modal button <div> by <a>
 link (LMS-582)

The close button for the modal dialog was marked up as a paragraph,
containing a graphical text character, inside two div elements, with an
associated click event. This made the button unusable for keyboard
users.

Replaced <divs> with a link element (<a role="button"), adapted the CSS
accordingly, and updated the existing <a> modal close buttons.
---
 lms/static/sass/shared/_modal.scss       | 20 ++++++---------
 lms/templates/dashboard.html             | 32 +++++-------------------
 lms/templates/forgot_password_modal.html |  2 +-
 lms/templates/help_modal.html            | 20 +++------------
 lms/templates/login_modal.html           |  2 +-
 lms/templates/signup_modal.html          |  2 +-
 6 files changed, 20 insertions(+), 58 deletions(-)

diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index f3233b6f00..19036a769f 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/lms/static/sass/shared/_modal.scss
@@ -282,21 +282,15 @@
       right: 2px;
       top: 0px;
       z-index: 3;
-
-      .inner {
-        p {
-          color: $lighter-base-font-color;
-          font: normal 1.2rem/1.2rem $sans-serif;
-          text-align: center;
-          text-shadow: 0 1px rgba(255,255,255, 0.8);
-          @include transition(all 0.15s ease-out 0s);
-        }
-      }
+      color: $lighter-base-font-color;
+      font: normal 1.2rem/1.2rem $sans-serif;
+      text-align: center;
+      text-shadow: 0 1px rgba(255,255,255, 0.8);
+      @include transition(all 0.15s ease-out 0s);
 
       &:hover {
-        p {
-          color: $base-font-color;
-        }
+        color: $base-font-color;
+        text-decoration: none;
       }
     }
   }
diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html
index 7b077aec43..48087ec2d9 100644
--- a/lms/templates/dashboard.html
+++ b/lms/templates/dashboard.html
@@ -359,12 +359,8 @@
         <input type="submit" id="submit" value="Save Settings" />
       </div>
     </form>
-
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
+    
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
@@ -385,11 +381,7 @@
       </div>
     </form>
 
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
@@ -406,11 +398,7 @@
         </section>
       </form>
     </div>
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
@@ -439,11 +427,7 @@
         </fieldset>
       </form>
     </div>
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
@@ -471,10 +455,6 @@
         </fieldset>
       </form>
     </div>
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
diff --git a/lms/templates/forgot_password_modal.html b/lms/templates/forgot_password_modal.html
index 0c3a971ecc..8c2791fbf3 100644
--- a/lms/templates/forgot_password_modal.html
+++ b/lms/templates/forgot_password_modal.html
@@ -31,7 +31,7 @@
       </form>
     </div>
 
-    <a href="#" class="close-modal" title="Close Modal">
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
       <div class="inner">
         <p>&#10005;</p>
       </div>
diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index 14c5543e07..22e7176cc4 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -49,11 +49,7 @@ discussion_link = get_discussion_link(course) if course else None
     </div>
 
 ## TODO: find a way to refactor this
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
+  <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 
   <div class="inner-wrapper" id="feedback_form_wrapper">
@@ -80,12 +76,8 @@ discussion_link = get_discussion_link(course) if course else None
         <input name="submit" type="submit" value="Submit">
       </div>
     </form>
-
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
+  
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 
   <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="-1">
@@ -117,11 +109,7 @@ discussion_link = get_discussion_link(course) if course else None
     )}
     </p>
 
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
index 03aebfe1b4..3052388864 100644
--- a/lms/templates/login_modal.html
+++ b/lms/templates/login_modal.html
@@ -39,7 +39,7 @@
 % endif
     </section>
 
-    <a href="#" class="close-modal" title="Close Modal">
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
       <div class="inner">
         <p>&#10005;</p>
       </div>
diff --git a/lms/templates/signup_modal.html b/lms/templates/signup_modal.html
index a9d709ba60..0416eea82b 100644
--- a/lms/templates/signup_modal.html
+++ b/lms/templates/signup_modal.html
@@ -131,7 +131,7 @@
 
     </div>
 
-    <a href="#" class="close-modal" title="${_('Close Modal')}">
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
       <div class="inner">
         <p>&#10005;</p>
       </div>

From aee5af533273fb92e997cacfe89576871919511b Mon Sep 17 00:00:00 2001
From: Xavier Antoviaque <xavier@antoviaque.org>
Date: Mon, 9 Sep 2013 17:49:50 -0300
Subject: [PATCH 5/6] accessibility: Manage keyboard focus on help modal dialog
 (LMS-581)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modal dialogs should manage keyboard focus, ensuring that users can't
tab out of the modal dialog and back into the page itself (effectively
moving “behind” the dimmed modal). On the last focusable element of the
dialog, return focus back to the first focusable element.

Also move the close button to the start of the dialog's section, making
it the first focusable URL, to ensure focus matches the visual
representation of the dialog.
---
 lms/templates/help_modal.html | 42 ++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index 22e7176cc4..3875240696 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -14,6 +14,9 @@
 
 <section id="help-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" id="help_wrapper">
+    ## TODO: find a way to refactor this
+    <a href="#" role="button" class="close-modal" tabindex="0" title="${_('Close Modal')}">&#10005;</a>
+
     <header>
       <h2>${_('{span_start}{platform_name}{span_end} Help').format(span_start='<span class="edx">', span_end='</span>', platform_name=settings.PLATFORM_NAME)}</h2>
       <hr>
@@ -47,12 +50,11 @@ discussion_link = get_discussion_link(course) if course else None
       <a href="#" id="feedback_link_suggestion">${_('Make a suggestion')}</a>
       <a href="#" id="feedback_link_question">${_('Ask a question')}</a>
     </div>
-
-## TODO: find a way to refactor this
-  <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 
   <div class="inner-wrapper" id="feedback_form_wrapper">
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
+
     <header></header>
 
     <form id="feedback_form" class="feedback_form" method="post" data-remote="true" action="/submit_feedback">
@@ -73,14 +75,14 @@ discussion_link = get_discussion_link(course) if course else None
       <input name="course_id" type="hidden" value="${course.id | h}">
 % endif
       <div class="submit">
-        <input name="submit" type="submit" value="Submit">
+        <input name="submit" type="submit" value="Submit" id="feedback_submit">
       </div>
     </form>
-  
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 
   <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="-1">
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
+
     <header>
       <h2>${_('Thank You!')}</h2>
       <hr>
@@ -104,22 +106,31 @@ discussion_link = get_discussion_link(course) if course else None
     ).format(
         open_time=open_time,
         close_time=close_time,
-        link_start='<a href="{}" target="_blank">'.format(marketing_link('FAQ')),
+        link_start='<a href="{}" target="_blank" id="feedback-faq-link">'.format(marketing_link('FAQ')),
         link_end='</a>'
     )}
     </p>
-
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
 <script type="text/javascript">
 (function() {
     var onModalClose = function() {
-        $(".help-modal .close-modal").off("click");
-        $("#lean_overlay").off("click");
-        $("#help-modal").attr("aria-hidden", "true");
-    };
+            $(".help-modal .close-modal").off("click");
+            $("#lean_overlay").off("click");
+            $("#help-modal").attr("aria-hidden", "true");
+            $(".help-tab").focus();
+        },
+        cycle_modal_tab = function(from_element_name, to_element_name) {
+            $(from_element_name).on('keydown', function(e) {
+                var keyCode = e.keyCode || e.which;
+                if (keyCode === 9) {
+                    e.preventDefault();
+                    $(to_element_name).focus();
+                }
+            });
+        };
+
     $(".help-tab").click(function() {
         $(".field-error").removeClass("field-error");
         $("#feedback_form")[0].reset();
@@ -131,6 +142,7 @@ discussion_link = get_discussion_link(course) if course else None
         $("#help-modal").attr("aria-hidden", "false");
         $("#help-modal .close-modal").click(onModalClose);
         $("#lean_overlay").click(onModalClose);
+        $("#help_wrapper .close-modal").focus();
     });
     showFeedback = function(event, issue_type, title, subject_label, details_label) {
         $("#help_wrapper").css("display", "none");
@@ -139,8 +151,12 @@ discussion_link = get_discussion_link(course) if course else None
         $("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>");
         $("#feedback_form_wrapper label[data-field='subject']").html(subject_label);
         $("#feedback_form_wrapper label[data-field='details']").html(details_label);
+        $("#feedback_form_wrapper .close-modal").focus();
         event.preventDefault();
     };
+    cycle_modal_tab("#feedback_link_question", "#help_wrapper .close-modal");
+    cycle_modal_tab("#feedback_submit", "#feedback_form_wrapper .close-modal");
+    cycle_modal_tab("#feedback_faq_link", "#feedback_success_wrapper .close-modal");
     $("#feedback_link_problem").click(function(event) {
         showFeedback(
             event,

From 8d2297eb620c25d62b478402b4cf26c69efafda9 Mon Sep 17 00:00:00 2001
From: Xavier Antoviaque <xavier@antoviaque.org>
Date: Mon, 9 Sep 2013 18:10:33 -0300
Subject: [PATCH 6/6] accessibility: Allow to close help modal with "escape"
 key (LMS-581)

Users should be able to close the modal with the "escape" key.
---
 lms/templates/help_modal.html | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index 3875240696..4fe43ef7c3 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -157,6 +157,13 @@ discussion_link = get_discussion_link(course) if course else None
     cycle_modal_tab("#feedback_link_question", "#help_wrapper .close-modal");
     cycle_modal_tab("#feedback_submit", "#feedback_form_wrapper .close-modal");
     cycle_modal_tab("#feedback_faq_link", "#feedback_success_wrapper .close-modal");
+    $("#help-modal").on("keydown", function(e) {
+        var keyCode = e.keyCode || e.which;
+        if (keyCode === 27) {
+            e.preventDefault();
+            $("#help_wrapper .close-modal").click();
+        }
+    });
     $("#feedback_link_problem").click(function(event) {
         showFeedback(
             event,