lms - adds back in missing/previously added .sr screen reader-focused styling…

lms - adds back in missing/previously added .sr screen reader-focused styling and references in place of the .visuallyhidden application

lms/static/sass/base/_base.scss

@@ -209,7 +209,7 @@ mark {
 }
 
 .sr {
-  @include text-sr();
+  @extend .text-sr;
 }
 
 .help-tab {

lms/static/sass/base/_mixins.scss

@@ -14,18 +14,6 @@
   overflow: hidden;
 }
 
-// hidden elems - screenreaders
-@mixin text-sr() {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
 @mixin vertically-and-horizontally-centered ( $height, $width ) {
   left: 50%;
   margin-left: -$width / 2;
@@ -49,4 +37,18 @@
 //-----------------
 @mixin login_register_h1_style {}
 
-@mixin footer_references_style {}
\ No newline at end of file
+@mixin footer_references_style {}
+
+// ====================
+
+// extends -hidden elems - screenreaders
+.text-sr {
+  border: 0;
+  clip: rect(1px 1px 1px 1px);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

lms/templates/courseware/accordion.html

@@ -13,7 +13,7 @@
       % for section in chapter['sections']:
           <li class="${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}">
             <a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
-              <p>${section['display_name']} ${'<span class="visuallyhidden">, current section</span>' if 'active' in section and section['active'] else ''}</p>
+              <p>${section['display_name']} ${'<span class="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
               <p class="subtitle">${section['format']} ${"due " + get_default_time_display(section['due'], show_timezone) if section.get('due') is not None else ''}</p>
             </a>
           </li>

lms/templates/courseware/course_navigation.html

@@ -21,7 +21,7 @@ def url_class(is_active):
              <a href="${tab.link | h}" class="${url_class(tab.is_active)}">
                  ${tab.name | h}
                  % if tab.is_active == True:
-                  <span class="visuallyhidden">, current location</span>
+                  <span class="sr">, current location</span>
                  %endif
                  % if tab.has_img == True:
                     <img src="${tab.img}"/>

lms/templates/courseware/progress.html

@@ -56,7 +56,7 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
               <h3><a href="${reverse('courseware_section', kwargs=dict(course_id=course.id, chapter=chapter['url_name'], section=section['url_name']))}">
                 ${ section['display_name'] }
                 %if total > 0 or earned > 0:
-                  <span class="visuallyhidden">
+                  <span class="sr">
                     ${"{0:.3n} of {1:.3n} possible points".format( float(earned), float(total) )}
                   </span></a>
                 %endif

lms/templates/navigation.html

@@ -65,11 +65,11 @@ site_status_msg = get_site_status_msg(course_id)
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
           <span class="avatar"></span>
-          <span class="visuallyhidden">Dashboard for: </span> ${user.username}
+          <span class="sr">Dashboard for: </span> ${user.username}
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown"><span class="visuallyhidden">More options dropdown</span> &#9662</a>
+        <a href="#" class="dropdown"><span class="sr">More options dropdown</span> &#9662</a>
         <ul class="dropdown-menu">
           <%block name="navigation_dropdown_menu_links" >
             <li><a href="${marketing_link('FAQ')}">Help</a></li>