Merge pull request #1369 from edx/talbs/fix-a11y-modals

LMS: Close Modal Control Uses HTML <button> Element (resolves LMS-582)

lms/static/sass/_shame.scss

@@ -230,3 +230,15 @@
 footer .references {
   @include footer_references_style;
 }
+
+// ====================
+
+// modal semantic button resetting - overriding the poorly scoped button mixin styling
+.close-modal, button.close-modal {
+  @extend %ui-reset-button;
+
+  &:focus {
+    border: none !important;
+    outline: thin dotted !important;
+  }
+}

lms/static/sass/base/_extends.scss

@@ -84,3 +84,19 @@
     display: none;
   }
 }
+
+// ====================
+
+// needed utility extend for resetting poor basic <button> elem styling
+%ui-reset-button  {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  text-shadow: none !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+
+  &:focus {
+    // outline: thin dotted !important;
+  }
+}

lms/templates/dashboard.html

@@ -195,6 +195,8 @@
 
 <section id="email-settings-modal" class="modal">
   <div class="inner-wrapper" role="dialog" aria-labelledby="email-settings-title">
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
+
     <header>
       <h2 id="email-settings-title">${_('Email Settings for {course_number}').format(course_number='<span id="email_settings_course_number"></span>')}</h2>
       <hr/>
@@ -207,13 +209,13 @@
         <input type="submit" id="submit" value="${_('Save Settings')}" />
       </div>
     </form>
-    
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
 <section id="unenroll-modal" class="modal unenroll-modal">
   <div class="inner-wrapper" role="alertdialog" aria-labelledy="unenrollment-modal-title">
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
+
     <header>
       <h2 id="unenrollment-modal-title">${_('Are you sure you want to unregister from {course_number}?').format(course_number='<span id="unenroll_course_number"></span>')}</h2>
       <hr/>
@@ -228,13 +230,13 @@
         <input name="submit" type="submit" value="${_('Unregister')}" />
       </div>
     </form>
-
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
 <section id="password_reset_complete" class="modal">
   <div class="inner-wrapper" role="dialog" aria-labelledby="password-reset-email">
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
+
     <header>
       <h2 id="password-reset-email">${_('Password Reset Email Sent')}</h2>
       <hr/>
@@ -246,12 +248,13 @@
         </section>
       </form>
     </div>
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
 <section id="change_email" class="modal">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change_email_title">
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
+
     <header>
       <h2><span id="change_email_title">${_("Change Email")}</span></h2>
       <hr/>
@@ -275,12 +278,13 @@
         </fieldset>
       </form>
     </div>
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
 <section id="apply_name_change" class="modal">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change-name-title">
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
+
     <header>
       <h2 id="change-name-title">${_("Change your name")}</h2>
       <hr/>
@@ -303,6 +307,5 @@
         </fieldset>
       </form>
     </div>
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>

lms/templates/forgot_password_modal.html

@@ -3,6 +3,8 @@
 <%! from django.core.urlresolvers import reverse %>
 <section id="forgot-password-modal" class="modal" role="dialog" aria-label="${_('Password Reset')}">
   <div class="inner-wrapper">
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
+
     <div id="password-reset">
       <header>
         <h2>${_("Password Reset")}</h2>
@@ -30,10 +32,6 @@
         </div>
       </form>
     </div>
-
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
-      &#10005;
-    </a>
   </div>
 </section>
 

lms/templates/help_modal.html

@@ -15,7 +15,7 @@
 <section id="help-modal" class="modal" aria-hidden="true" role="dialog" aria-label='${_("{platform_name} Help").format(platform_name=settings.PLATFORM_NAME)}'>
   <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>
+    <button class="close-modal "tabindex="0">&#10005; <span class="sr">${_('Close Modal')}</span></button>
 
     <header>
       <h2>${_('{span_start}{platform_name}{span_end} Help').format(span_start='<span class="edx">', span_end='</span>', platform_name=settings.PLATFORM_NAME)}</h2>
@@ -53,7 +53,7 @@ discussion_link = get_discussion_link(course) if course else None
   </div>
 
   <div class="inner-wrapper" id="feedback_form_wrapper">
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
 
     <header></header>
 
@@ -81,7 +81,7 @@ discussion_link = get_discussion_link(course) if course else None
   </div>
 
   <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="0">
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}" tabindex="0">&#10005;</a>
+    <button class="close-modal "tabindex="0">&#10005; <span class="sr">${_('Close Modal')}</span></button>
 
     <header>
       <h2>${_('Thank You!')}</h2>

lms/templates/login_modal.html

@@ -5,6 +5,8 @@
 
 <section id="login-modal" class="modal login-modal">
   <div class="inner-wrapper">
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
+
     <header>
       <h2>${_("Log In")}</h2>
       <hr>
@@ -13,15 +15,15 @@
     <form id="login_form" class="login_form" method="post" data-remote="true" action="/login">
       <label for="login_email">${_("E-mail")}</label>
         <input id="login_email" type="email" name="email" placeholder="e.g. yourname@domain.com" />
-      
+
       <label for="login_password">${_("Password")}</label>
-        <input id="login_password" type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" />  
-      
+        <input id="login_password" type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" />
+
       <label for="login_remember_me" class="remember-me">
         <input id="login_remember_me" type="checkbox" name="remember" value="true" />
         ${_("Remember me")}
       </label>
-      
+
       <div class="submit">
         <input name="submit" type="submit" value="${_('Access My Courses')}">
       </div>
@@ -38,12 +40,6 @@
       </p>
 % endif
     </section>
-
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </a>
   </div>
 </section>
 
@@ -64,7 +60,7 @@
        $('#login_error').html(json.value).stop().css("display", "block");
      }
    });
-   
+
    // removing close link's default behavior
    $('#login-modal .close-modal').click(function(e) {
     e.preventDefault();

lms/templates/signup_modal.html

@@ -9,6 +9,8 @@
 
 <section id="signup-modal" class="modal signup-modal">
   <div class="inner-wrapper">
+    <button class="close-modal">&#10005; <span class="sr">${_('Close Modal')}</span></button>
+
     <div id="register">
       <header>
         <h2>${_('Sign Up for {span_start}{platform_name}{span_end}').format(span_start='<span class="edx">', span_end='</span>', platform_name=settings.PLATFORM_NAME)}</h2>
@@ -130,12 +132,6 @@
       % endif
 
     </div>
-
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
-      <div class="inner">
-        <p>&#10005;</p>
-      </div>
-    </a>
   </div>
 </section>