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

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

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>

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>

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>
 

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>