UPdated a11y approach for program card progress bars

lms/static/js/spec/learner_dashboard/program_card_view_spec.js

@@ -108,7 +108,7 @@ define([
                     completed = program.completed.length,
                     total = completed + program.in_progress.length + program.not_started.length;
 
-                expect(view.$('.certificate-status').html()).toEqual('You have earned certificates in ' + completed + ' of the ' + total + ' courses so far.');
+                expect(view.$('.certificate-status .status-text').not('.secondary').html()).toEqual('You have earned certificates in ' + completed + ' of the ' + total + ' courses so far.');
             });
 
             it('should render cards if there is no progressData', function() {

lms/static/sass/elements/_program-card.scss

@@ -3,6 +3,14 @@
 @import '../base/grid-settings';
 @import 'neat/neat'; // lib - Neat
 
+%hide-until-focus {
+  @include left(0);
+  display: inline-block;
+  position: absolute;
+  top: -($baseline*30);
+  overflow: hidden;
+}
+
 .program-card{
   @include span-columns(12);  
   border: 1px solid $border-color-l3;
@@ -13,11 +21,11 @@
   display: inline;
 
   .card-link{
+    @include left(0);
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
-    left: 0;
     border: 0;
     z-index: 1;
     opacity: 0.8;
@@ -25,14 +33,16 @@
     &:focus{
       opacity: 1;
     }
+
     .banner-image-container{
       position: relative;
       overflow: hidden;
       height: 116px;
+
       .banner-image{
+        @include left(50%);
         position: absolute;
         top: 0;
-        left: 50%;
         z-index: 0;
         transform: translate(-50%, 0);
         min-height: 100%;
@@ -89,8 +99,30 @@
   }
 
   .certificate-status {
-    font-size: em(12);
-    color: $gray;
+    .status-text {
+      font-size: em(12);
+      color: $gray;
+    }
+ 
+    .secondary {
+      @extend %hide-until-focus;
+    }
+
+    .status-text {
+      &:focus,
+      &:active {
+        position: relative;
+        top: auto;
+        width: auto;
+        height: auto;
+        margin: 0;
+        text-decoration: none;
+
+        & ~ .status-text {
+          @extend %hide-until-focus;
+        }
+      }
+    }
   }
 
   .progress {
@@ -98,9 +130,9 @@
     background: $x-light;
 
     .bar {
+      @include float(left);
       height: 100%;
       position: relative;
-      float: left;
 
       &.complete {
         background: $success-dark;

lms/templates/learner_dashboard/program_card.underscore

@@ -9,35 +9,37 @@
         </div>
     </div>
   <% if (progress) { %>  
-    <p id="status-<%- id %>" class="certificate-status"><%= interpolate(
-        gettext('You have earned certificates in %(completed_courses)s of the %(total_courses)s courses so far.'),
-        {completed_courses: progress.total.completed, total_courses: progress.total.courses}, true
-    ) %></p>
-  <% } %>
-</div>
-<% if (progress) { %>
-<div class="progress">
-    <div class="bar complete" style="width:<%- progress.percentage.completed %>;"></div>
-    <div class="bar in-progress" style="width:<%- progress.percentage.in_progress %>;">
-        <span class="sr"><%= interpolate(
+    <p class="certificate-status">
+        <a href="<%- marketingUrl %>" class="status-text secondary" aria-describedby="program-<%- id %>"><%= interpolate(
             ngettext(
-                '%(count)s course are in progress.',
+                '%(count)s course is in progress.',
                 '%(count)s courses are in progress.',
                 progress.total.in_progress
             ),
             {count: progress.total.in_progress}, true 
-        ) %></span>
-    </div>
-    <div class="bar not-started">
-        <span class="sr"><%= interpolate(
+        ) %></a>
+
+        <a href="<%- marketingUrl %>" class="status-text secondary" aria-describedby="program-<%- id %>"><%= interpolate(
             ngettext(
-                '%(count)s course have not been started.',
+                '%(count)s course has not been started.',
                 '%(count)s courses have not been started.',
                 progress.total.not_started
             ),
             {count: progress.total.not_started}, true 
+        ) %></a>
+
+        <span id="status-<%- id %>" class="status-text"><%= interpolate(
+            gettext('You have earned certificates in %(completed_courses)s of the %(total_courses)s courses so far.'),
+            {completed_courses: progress.total.completed, total_courses: progress.total.courses}, true
         ) %></span>
-    </div>
+    </p>
+  <% } %>
+</div>
+<% if (progress) { %>
+<div class="progress">
+    <div class="bar complete" style="width:<%- progress.percentage.completed %>;"></div>
+    <div class="bar in-progress" style="width:<%- progress.percentage.in_progress %>;"></div>
+    <div class="bar not-started"></div>
 </div>
 <% } %>
 <a href="<%- marketingUrl %>" class="card-link">