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