Adding markup for icon fonts; adding custom styles for said icons

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

@@ -70,7 +70,7 @@ $sequence--border-color: #C8C8C8;
     position: relative;
     border: 1px solid $gray-l3;
     height: 44px;
-    margin: 0 ($baseline*1.5);
+    margin: 0 ($baseline*2);
     box-shadow: 0 1px 3px $shadow-l1 inset;
   }
 
@@ -105,79 +105,80 @@ $sequence--border-color: #C8C8C8;
         display: block;
         padding: 0;
         position: relative;
+        text-align: center;
 
-        &:hover, &:focus {
-          background-color: $white;
-          background-repeat: no-repeat;
-          background-position: center 14px;
+        .icon {
+          line-height: 42px; // This matches the height of the <a> it's within (the parent) to get vertical centering.
+          font-size: 90%;  // The icons at 100% are just a tad too big.
+          color: rgb(90, 90, 90);
+          -webkit-font-smoothing: antialiased; // Clear up the lines on the icons
+        }
+
+        &.inactive {
+
+          .icon {
+            color: rgb(90, 90, 90);
+          }
         }
 
         &.active {
           @extend %ui-depth1;
           background-color: $white;
 
+          .icon {
+            color: rgb(10, 10, 10);
+          }
+
           &:hover, &:focus {
             background-color: $white;
             background-repeat: no-repeat;
             background-position: center 14px;
+
+            .icon {
+              color: rgb(10, 10, 10);
             }
           }
-
-        //video
-        &.seq_video {
-          &.inactive {
-            background-image: url('../images/sequence-nav/video-icon-normal.png');
         }
 
-          &.visited {
-            background-image: url('../images/sequence-nav/video-icon-visited.png');
+        &:hover, &:focus {
+          background-color: $white;
+          background-repeat: no-repeat;
+          background-position: center 14px;
         }
 
-          &.active {
-            @extend .active;
-            background-image: url('../images/sequence-nav/video-icon-current.png');
+        //video
+        &.seq_video {
+
+          .icon:before {
+            content: "\f008"; // .fa-film
           }
         }
 
         //other
         &.seq_other {
-          &.inactive {
-            background-image: url('../images/sequence-nav/document-icon-normal.png');
-          }
 
-          &.visited {
-            background-image: url('../images/sequence-nav/document-icon-visited.png');
-          }
-
-          &.active {
-            background-image: url('../images/sequence-nav/document-icon-current.png');
+          .icon:before {
+            content: "\f016"; // .fa-file-o
           }
         }
 
         //vertical & problems
         &.seq_vertical, &.seq_problem {
-          &.inactive {
-            background-image: url('../images/sequence-nav/list-icon-normal.png');
-          }
 
-          &.visited {
-            background-image: url('../images/sequence-nav/list-icon-visited.png');
-          }
-
-          &.active {
-            background-image: url('../images/sequence-nav/list-icon-current.png');
+          .icon:before {
+            content: "\f00b";  // .fa-tasks
           }
 
           &.progress-none {
-            background-image: url('../images/sequence-nav/list-unstarted.png');
+
           }
 
           &.progress-some, &.progress-in_progress {
-            background-image: url('../images/sequence-nav/list-unfinished.png');
+
           }
 
           &.progress-done {
-            background-image: url('../images/sequence-nav/list-finished.png');
+
           }
         }
 

common/lib/xmodule/xmodule/js/spec/sequence/display_spec.coffee

@@ -20,7 +20,8 @@ xdescribe 'Sequence', ->
       elements = $('#sequence-list li>a').map(-> $(this).attr('data-element')).get()
       titles = $('#sequence-list li>a>p').map(-> $(this).html()).get()
 
-      expect(classes).toEqual ['seq_video_active', 'seq_video_inactive', 'seq_problem_inactive']
+      # expect(classes).toEqual ['seq_video_active', 'seq_video_inactive', 'seq_problem_inactive']
+      expect(classes).toEqual ['active', 'inactive', 'visited']
       expect(elements).toEqual ['1', '2', '3']
       expect(titles).toEqual ['Video 1', 'Video 2', 'Sample Problem']
 
@@ -92,13 +93,15 @@ xdescribe 'Sequence', ->
           @sequence.render 1
 
         it 'mark the previous tab as visited', ->
-          expect($('[data-element="2"]')).toHaveClass 'seq_video_visited'
+          # expect($('[data-element="2"]')).toHaveClass 'seq_video_visited'
+          expect($('[data-element="2"]')).toHaveClass 'visited'
 
         it 'save the new position', ->
           expect($.postWithPrefix).toHaveBeenCalledWith '/modx/1/goto_position', position: 1
 
       it 'mark new tab as active', ->
-        expect($('[data-element="1"]')).toHaveClass 'seq_video_active'
+        # expect($('[data-element="1"]')).toHaveClass 'seq_video_active'
+        expect($('[data-element="1"]')).toHaveClass 'active'
 
       it 'render the new content', ->
         expect($('#seq_content').html()).toEqual 'Video 1'

common/lib/xmodule/xmodule/js/src/sequence/display.coffee

@@ -74,17 +74,17 @@ class @Sequence
   toggleArrows: =>
     @$('.sequence-nav-button').unbind('click')
 
-    if @contents.length == 0
+    if @contents.length == 0  ## There are no modules to display, and therefore no nav to build.
       @$('.sequence-nav-button.button-previous').addClass('disabled').attr('disabled', true)
       @$('.sequence-nav-button.button-next').addClass('disabled').attr('disabled', true)
       return
 
-    if @position == 1
+    if @position == 1  ## 1 != 0 here. 1 is the first item in the sequence nav.
       @$('.sequence-nav-button.button-previous').addClass('disabled').attr('disabled', true)
     else
       @$('.sequence-nav-button.button-previous').removeClass('disabled').removeAttr('disabled').click(@previous)
 
-    if @position == @contents.length
+    if @position == @contents.length ## If the final position on the nav matches the total contents.
       @$('.sequence-nav-button.button-next').addClass('disabled').attr('disabled', true)
     else
       @$('.sequence-nav-button.button-next').removeClass('disabled').removeAttr('disabled').click(@next)
@@ -117,14 +117,14 @@ class @Sequence
       sequence_links.click @goto
 
       @sr_container.focus();
-    @$("a.active").blur()
+      # @$("a.active").blur()
 
   goto: (event) =>
     event.preventDefault()
-    if $(event.target).hasClass 'seqnav' # Links from courseware <a class='seqnav' href='n'>...</a>
-      new_position = $(event.target).attr('href')
+    if $(event.currentTarget).hasClass 'seqnav' # Links from courseware <a class='seqnav' href='n'>...</a>, was .target
+      new_position = $(event.currentTarget).attr('href')
     else # Tab links generated by backend template
-      new_position = $(event.target).data('element')
+      new_position = $(event.currentTarget).data('element')
 
     if (1 <= new_position) and (new_position <= @num_contents)
       Logger.log "seq_goto", old: @position, new: new_position, id: @id
@@ -137,7 +137,7 @@ class @Sequence
 
       @render new_position
     else
-      alert_template = gettext("Sequence error! Cannot navigate to tab %(tab_name)s in the current SequenceModule. Please contact the course staff.")
+      alert_template = gettext("Sequence error! Cannot navigate to %(tab_name)s in the current SequenceModule. Please contact the course staff.")
       alert_text = interpolate(alert_template, {tab_name: new_position}, true)
       alert alert_text
 
@@ -175,13 +175,8 @@ class @Sequence
     .addClass("visited")
 
   mark_active: (position) ->
-    # Mark the correct tab as selected, for a11y helpfulness.
-    @$('#sequence-list [role="tab"]').attr({
-        'aria-selected' : null
-        });
     # Don't overwrite class attribute to avoid changing Progress class
     element = @link_for(position)
     element.removeClass("inactive")
     .removeClass("visited")
     .addClass("active")
-    .attr({"aria-selected": "true", 'tabindex': '0'})

lms/templates/seq_module.html

@@ -19,9 +19,9 @@
            data-page-title="${item['page_title']|h}"
            aria-controls="seq_contents_${idx}"
            id="tab_${idx}"
-           tabindex="0"
-           role="tab">
-            <p aria-hidden="false">${item['title']}</p>
+           tabindex="0">
+            <i class="icon fa seq_${item['type']}" aria-hidden="true"></i>
+            <p><span class="sr">${item['type']}</span> ${item['title']}</p>
           </a>
         </li>
         % endfor
@@ -30,6 +30,8 @@
     <button class="sequence-nav-button button-next">${_('Next')}</button>
   </div>
 
+  <div id="sr-is-focusable" tabindex="-1"></div>
+
   % for idx, item in enumerate(items):
   <div id="seq_contents_${idx}"
     aria-labelledby="tab_${idx}"