Merge pull request #288 from edx/giulio/accessibility-2

Round 2 Accessibility Changes

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

@@ -166,7 +166,6 @@ nav.sequence-nav {
         p {
           background: #333;
           color: #fff;
-          display: none;
           font-family: $sans-serif;
           line-height: lh();
           left: 0px;

lms/static/sass/_discussion.scss

@@ -257,7 +257,6 @@ body.discussion {
         font-size: 11px;
         line-height: 16px;
         color: #333;
-        outline: 0;
       }
     }
 
@@ -932,7 +931,6 @@ body.discussion {
       font-size: 11px;
       line-height: 16px;
       color: #333;
-      outline: 0;
     }
 
     .post-search {
@@ -959,7 +957,6 @@ body.discussion {
       font-size: 13px;
       line-height: 20px;
       color: #333;
-      outline: 0;
       cursor: pointer;
       pointer-events: none;
       @include transition(all .2s ease-out);
@@ -1642,7 +1639,6 @@ body.discussion {
     border-radius: 3px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
     @include transition(border-color .1s);
-    outline: 0;
 
     &:focus {
       border-color: #4697c1;

lms/static/sass/base/_base.scss

@@ -84,6 +84,14 @@ a:link, a:visited {
   }
 }
 
+a:focus {
+  /**
+   *  Add general focus styling here
+   *  for example:
+   *      outline: 3px groove $black;
+   **/
+}
+
 .content-wrapper {
   width: flex-grid(12);
   margin: 0 auto;

lms/static/sass/base/_reset.scss

@@ -9,9 +9,6 @@ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 10
 html, button, input, select, textarea { font-family: sans-serif; color: #222; }
 body { margin: 0; font-size: 1em; line-height: 1.4; }
 
-::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
-::selection { background: #fe57a1; color: #fff; text-shadow: none; }
-
 a { color: #00e; }
 a:visited { color: #551a8b; }
 a:hover { color: #06e; }

lms/static/sass/base/_variables.scss

@@ -61,6 +61,8 @@ $baseFontColor: rgb(60,60,60);
 $lighter-base-font-color: rgb(100,100,100);
 $text-color: $dark-gray;
 
+$dark-trans-bg: rgba(0, 0, 0, .75);
+
 $body-bg: rgb(250,250,250);
 $container-bg: $white;
 $header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
@@ -104,8 +106,6 @@ $border-color-4: rgb(252,252,252);
 $link-color: $blue;
 $link-color-d1: $m-blue;
 $link-hover: $pink;
-$selection-color-1: $pink;
-$selection-color-2: #444;
 $site-status-color: $pink;
 
 $button-color: $blue;

lms/static/sass/course/base/_base.scss

@@ -101,12 +101,6 @@ img {
   max-width: 100%;
 }
 
-::selection, ::-moz-selection, ::-webkit-selection {
-  background: $selection-color-2;
-  color: #fff;
-}
-
-
 .tooltip {
   position: absolute;
   top: 0;

lms/static/sass/course/courseware/_sidebar.scss

@@ -23,7 +23,7 @@ section.course-index {
     h3 {
       @include border-radius(0);
       margin: 0;
-      overflow: hidden;
+      overflow: visible;
 
       &:first-child {
         border: none;

lms/static/sass/course/layout/_courseware_header.scss

@@ -148,7 +148,7 @@ header.global.slim {
     float: left;
     font-size: 0.9em;
     font-weight: 600;
-    color: #777;
+    color: $lighter-base-font-color;
     letter-spacing: 0;
     margin-top: 9px;
     margin-bottom: 0;

lms/static/sass/multicourse/_account.scss

@@ -268,7 +268,7 @@
         @include transition(color 0.15s ease-in-out);
         display: block;
         margin-top: ($baseline/4);
-        color: tint($outer-border-color, 50%);
+        color: $lighter-base-font-color;
         font-size: em(13);
       }
 

lms/static/sass/multicourse/_dashboard.scss

@@ -561,7 +561,7 @@
       float: right;
       display: block;
       font-style: italic;
-      color: #a0a0a0;
+      color: $lighter-base-font-color;
       text-decoration: underline;
       font-size: .8em;
       margin-top: 32px;

lms/static/sass/shared/_course_object.scss

@@ -66,12 +66,17 @@
         width: 0;
       }
 
+      a {
+        position: relative;
+        display: block;
+      }
+
       a:hover {
         text-decoration: none;
       }
 
       .meta-info {
-        background: rgba(0,0,0, 0.6);
+        background: $dark-trans-bg;
         bottom: 6px;
         border: 1px solid rgba(0,0,0, 0.5);
         @include border-right-radius(2px);

lms/templates/course.html

@@ -19,7 +19,7 @@
       </header>
       <section class="info">
         <div class="cover-image">
-          <img src="${course_image_url(course)}">
+          <img src="${course_image_url(course)}" alt="${course.number} ${get_course_about_section(course, 'title')} Cover Image" />
         </div>
         <div class="desc">
           <p>${get_course_about_section(course, 'short_description')}</p>

lms/templates/courseware/courses.html

@@ -10,9 +10,9 @@
       <hgroup>
         <div class="logo">
           % if self.stanford_theme_enabled():
-            <img src="${static.url('themes/stanford/images/seal.png')}" />
+            <img src="${static.url('themes/stanford/images/seal.png')}" alt="Stanford Seal Logo" />
           % else:
-            <img src="${static.url('images/edx_bw.png')}" />
+            <img src="${static.url('images/edx_bw.png')}" alt="Black and White edX Logo" />
           % endif
         </div>
         % if self.stanford_theme_enabled():

lms/templates/dashboard.html

@@ -211,11 +211,11 @@
 
           % if course.id in show_courseware_links_for:
             <a href="${course_target}" class="cover">
-              <img src="${course_image_url(course)}" />
+              <img src="${course_image_url(course)}" alt="${course.number} ${course.display_name_with_default} Cover Image" />
             </a>
           % else:
             <div class="cover">
-              <img src="${course_image_url(course)}" />
+              <img src="${course_image_url(course)}" alt="${course.number} ${course.display_name_with_default} Cover Image" />
             </div>
           % endif
 

lms/templates/login.html

@@ -53,7 +53,7 @@
             location.href="${reverse('dashboard')}";
           }
         } else {
-          $('.message.submission-error').addClass('is-shown');
+          $('.message.submission-error').addClass('is-shown').focus();
           $('.message.submission-error .message-copy').html(json.value);
         }
       });
@@ -94,7 +94,7 @@
         <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
       </div>
 
-      <div role="alert" class="status message submission-error">
+      <div role="alert" class="status message submission-error" tabindex="-1">
         <h3 class="message-title">The following errors occured while logging you in: </h3>
         <ul class="message-copy">
           <li>Your email or password is incorrect</li>

lms/templates/register.html

@@ -54,7 +54,7 @@
           $('.message.submission-error').removeClass('is-shown');
           location.href="${reverse('dashboard')}";
        } else {
-         $('.status.message.submission-error').addClass('is-shown');
+         $('.status.message.submission-error').addClass('is-shown').focus();
          $('.status.message.submission-error .message-copy').html(json.value).stop().css("display", "block");
          $(".field-error").removeClass('field-error');
          $("[data-field='"+json.field+"']").addClass('field-error')
@@ -97,7 +97,7 @@
         <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
       </div>
 
-      <div role="alert" class="status message submission-error">
+      <div role="alert" class="status message submission-error" tabindex="-1">
         <h3 class="message-title">The following errors occured while processing your registration: </h3>
         <ul class="message-copy"> </ul>
       </div>

lms/templates/seq_module.html

@@ -16,7 +16,7 @@
            data-id="${item['id']}"
            data-element="${idx+1}"
            href="javascript:void(0);">
-            <p>${item['title']}</p>
+            <p class="sr">${item['title']}, ${item['type']}</p>
           </a>
         </li>
         % endfor