Merge pull request #2851 from edx/giulio/high-a11y-issues-mar2014

High priority a11y issues march 2014

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -32,7 +32,7 @@ iframe[seamless]{
 div.problem-progress {
   display: inline-block;
   padding-left: 5px;
-  color: #999;
+  color: #666;
   font-weight: 100;
   font-size: em(16);
 }

common/static/coffee/src/discussion/utils.coffee

@@ -105,7 +105,7 @@ class @DiscussionUtil
       alertDiv = $("<div class='modal' role='alertdialog' id='discussion-alert' aria-describedby='discussion-alert-message'/>").css("display", "none")
       alertDiv.html(
         "<div class='inner-wrapper discussion-alert-wrapper'>" +
-        "  <button class='close-modal dismiss' aria-hidden='true'>&#10005;</button>" +
+        "  <button class='close-modal dismiss' aria-hidden='true'><i class='icon-remove'></i></button>" +
         "  <header><h2/><hr/></header>" +
         "  <p id='discussion-alert-message'/>" +
         "  <hr/>" +

lms/templates/dashboard.html

@@ -285,10 +285,11 @@
 
 <section id="email-settings-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="email-settings-title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -297,7 +298,7 @@
         ${_('Email Settings for {course_number}').format(course_number='<span id="email_settings_course_number"></span>')}
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
@@ -317,10 +318,11 @@
 
 <section id="password_reset_complete" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="password-reset-email">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -329,7 +331,7 @@
         ${_('Password Reset Email Sent')}
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
@@ -346,10 +348,11 @@
 
 <section id="change_email" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change_email_title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -358,7 +361,7 @@
         <span id="change_email_title">${_("Change Email")}</span>
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
@@ -389,10 +392,11 @@
 
 <section id="apply_name_change" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change-name-title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -401,7 +405,7 @@
         ${_("Change your name")}
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
@@ -431,10 +435,11 @@
 
 <section id="unenroll-modal" class="modal unenroll-modal" aria-hidden="true">
   <div class="inner-wrapper" role="alertdialog" aria-labelledy="unenrollment-modal-title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -443,7 +448,7 @@
         ${_('<span id="track-info"></span> {course_number}?  <span id="refund-info"></span>').format(course_number='<span id="unenroll_course_number"></span>')}
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>

lms/templates/forgot_password_modal.html

@@ -2,12 +2,13 @@
 <%! from microsite_configuration import microsite %>
 
 <%! from django.core.urlresolvers import reverse %>
-<section id="forgot-password-modal" class="modal" role="dialog" aria-label="${_('Password Reset')}">
+<section id="forgot-password-modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Password Reset')}">
   <div class="inner-wrapper">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i> 
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -63,6 +64,7 @@
       $("#forgot-password-modal").attr("aria-hidden", "true");
       $("#forgot-password-link").focus();
     };
+    
     var cycle_modal_tab = function(from_element_name, to_element_name) {
       $(from_element_name).on('keydown', function(e) {
           var keyCode = e.keyCode || e.which;
@@ -74,10 +76,9 @@
       });
     };
     $("#forgot-password-modal .close-modal").click(onModalClose);
-    $("#forgot-password-modal").focus()
-    cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email")
-    cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button")
-    cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal")
+    cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email");
+    cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button");
+    cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal");
 
     // Hitting the ESC key will exit the modal
     $("#forgot-password-modal").on("keydown", function(e) {

lms/templates/help_modal.html

@@ -18,10 +18,10 @@
   <div class="inner-wrapper" id="help_wrapper">
     ## TODO: find a way to refactor this
     <button class="close-modal "tabindex="0">
-      &#10005;
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -69,10 +69,10 @@ discussion_link = get_discussion_link(course) if course else None
 
   <div class="inner-wrapper" id="feedback_form_wrapper">
     <button class="close-modal">
-      &#10005;
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -103,10 +103,10 @@ discussion_link = get_discussion_link(course) if course else None
 
   <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="0">
     <button class="close-modal" tabindex="0">
-      &#10005;
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 

lms/templates/login.html

@@ -71,8 +71,9 @@
         }
       });
       $("#forgot-password-link").click(function() {
-        $("#forgot-password-modal .close-modal").focus()
-      })
+        $("#forgot-password-modal").show();
+        $("#forgot-password-modal .close-modal").focus();
+      });
 
     })(this);
 
@@ -137,7 +138,7 @@
             <label for="password">${_('Password')}</label>
             <input id="password" type="password" name="password" value="" required aria-required="true" />
             <span class="tip tip-input">
-              <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw" id="forgot-password-link" tabindex="-1" role="button" aria-haspopup="true">${_('Forgot password?')}</a>
+              <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw" id="forgot-password-link" role="button" aria-haspopup="true">${_('Forgot password?')}</a>
             </span>
           </li>
         </ol>

lms/templates/login_modal.html

@@ -5,10 +5,11 @@
 
 <section id="login-modal" class="modal login-modal">
   <div class="inner-wrapper">
-      <button class="close-modal">&#10005;
+      <button class="close-modal">
+        <i class="icon-remove"></i>
         <span class="sr">
           ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-          ${_('Close Modal')}
+          ${_('Close')}
       </span>
     </button>
 

lms/templates/modal/_modal-settings-language.html

@@ -7,10 +7,11 @@
 
 <section id="change_language" class="modal modal-settings-language" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change_language_title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -19,7 +20,7 @@
         <span id="change_language_title">${_("Change Preferred Language")}</span>
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>

lms/templates/modal/accessible_confirm.html

 <%! from django.utils.translation import ugettext as _ %>
 <div id="accessibile-confirm-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="accessibile-confirm-title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close Modal')}

lms/templates/signup_modal.html

@@ -10,10 +10,11 @@
 
 <section id="signup-modal" class="modal signup-modal">
   <div class="inner-wrapper">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 

lms/templates/wiki/edit.html

@@ -45,10 +45,10 @@
   </div>
   <section id="previewModal" class="modal" aria-hidden="true">
     <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
-      <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+      <button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
 
       <header>
-        <h2 id="preview-title">{% trans "Wiki Preview" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+        <h2 id="preview-title">{% trans "Wiki Preview" %}<span class="sr">, {% trans "window open" %}</span></h2>
         <hr/>
       </header>
 

lms/templates/wiki/history.html

@@ -201,10 +201,10 @@
   <input type="hidden" name="r" value="" />
   <section id="previewRevisionModal" class="modal" aria-hidden="true">
     <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
-      <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+      <button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
 
       <header>
-        <h2 id="preview-title">{% trans "Wiki Revision Preview" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+        <h2 id="preview-title">{% trans "Wiki Revision Preview" %}<span class="sr">, {% trans "window open" %}</span></h2>
         <hr/>
       </header>
       <div class="modal-body">
@@ -232,10 +232,10 @@
 
   <section id="mergeModal" class="modal" aria-hidden="true">
     <div class="inner-wrapper" role="dialog" aria-labelledby="merge-title">
-      <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+      <button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
 
       <header>
-        <h2 id="merge-title">{% trans "Merge Revision" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+        <h2 id="merge-title">{% trans "Merge Revision" %}<span class="sr">, {% trans "window open" %}</span></h2>
         <hr/>
       </header>
       <div class="modal-header">

lms/templates/wiki/includes/cheatsheet.html

 {% load i18n %}
 <section id="cheatsheetModal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="cheatsheet-title">
-    <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+    <button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
 
     <header>
-      <h2 id="cheatsheet-title">{% trans "Wiki Cheatsheet" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+      <h2 id="cheatsheet-title">{% trans "Wiki Cheatsheet" %}<span class="sr">, {% trans "window open" %}</span></h2>
       <hr/>
     </header>
     <div id="cheatsheet-body" class="modal-body">