Merge pull request #902 from antoviaque/accessibility

Help Modal - Accessibility Fixes

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);
-        }
-      }
 
       &:hover {
-        p {
         color: $base-font-color;
-        }
+        text-decoration: none;
       }
     }
   }

lms/templates/dashboard.html

@@ -372,11 +372,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>
 
@@ -397,11 +393,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>
 
@@ -418,11 +410,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>
 
@@ -451,11 +439,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>
 
@@ -483,10 +467,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>

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>
@@ -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>

lms/templates/help_modal.html

@@ -12,8 +12,11 @@
   <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">
+    ## 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,20 +50,15 @@ 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
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
   </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">
-      <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">
@@ -77,18 +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>
-
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
   </div>
 
-  <div class="inner-wrapper" id="feedback_success_wrapper">
+  <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>
@@ -112,21 +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>
-
-    <div class="close-modal">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </div>
   </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-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();
@@ -135,6 +139,10 @@ 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);
+        $("#help_wrapper .close-modal").focus();
     });
     showFeedback = function(event, issue_type, title, subject_label, details_label) {
         $("#help_wrapper").css("display", "none");
@@ -143,8 +151,19 @@ 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");
+    $("#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,
@@ -182,16 +201,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 +237,8 @@ discussion_link = get_discussion_link(course) if course else None
             });
 %endif
         }
+        // Make change explicit to assistive technology
+        $("#feedback_error").focus();
     });
 })(this)
 </script>

lms/templates/login.html

@@ -121,7 +121,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>

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>

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>