Merge pull request #2498 from edx/dcs/a11y-sequence-nav

Accessibility improvements to the sequence navigation

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

@@ -323,7 +323,7 @@ nav.sequence-nav {
   }
 }
 
-div.seq_contents {
+.seq_contents {
   display: none;
 }
 

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

@@ -22,12 +22,12 @@ class @Conditional
         parentId = parentEl.attr 'id'
 
         if response.message is false
-          if parentId.indexOf('vert') is 0
+          if parentEl.hasClass('vert')
             parentEl.hide()
           else
             $(element).hide()
         else
-          if parentId.indexOf('vert') is 0
+          if parentEl.hasClass('vert')
             parentEl.show()
           else
             $(element).show()

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

@@ -2,6 +2,7 @@ class @Sequence
   constructor: (element) ->
     @el = $(element).find('.sequence')
     @contents = @$('.seq_contents')
+    @content_container = @$('#seq_content')
     @num_contents = @contents.length
     @id = @el.data('id')
     @ajaxUrl = @el.data('ajax-url')
@@ -22,8 +23,8 @@ class @Sequence
   updatePageTitle: ->
     # update the page title to include the current section
     position_link = @link_for(@position)
-    if position_link and position_link.data('title')
-        document.title = position_link.data('title') + @base_page_title
+    if position_link and position_link.attr('title')
+        document.title = position_link.attr('title') + @base_page_title
 
   hookUpProgressEvent: ->
     $('.problems-wrapper').bind 'progressChanged', @updateProgress
@@ -97,10 +98,12 @@ class @Sequence
       # Added for aborting video bufferization, see ../video/10_main.js
       @el.trigger "sequence:change"
       @mark_active new_position
-      @$('#seq_content').html @contents.eq(new_position - 1).text()
-      XBlock.initializeBlocks(@$('#seq_content'))
+      
+      current_tab = @contents.eq(new_position - 1)
+      @content_container.html(current_tab.text()).attr("aria-labelledby", current_tab.attr("aria-labelledby"))
+      
+      XBlock.initializeBlocks(@content_container)
 
-      MathJax.Hub.Queue(["Typeset", MathJax.Hub, "seq_content"]) # NOTE: Actually redundant. Some other MathJax call also being performed
       window.update_schematics() # For embedded circuit simulator exercises in 6.002x
 
       @position = new_position
@@ -108,10 +111,12 @@ class @Sequence
       @hookUpProgressEvent()
       @updatePageTitle()
 
-      sequence_links = @$('#seq_content a.seqnav')
+      sequence_links = @content_container.find('a.seqnav')
       sequence_links.click @goto
-    @$("a.active").blur()
-
+      # Focus on the first available xblock.
+      @content_container.find('.vert .xblock :first').focus()
+    @$("a.active").blur()  
+    
   goto: (event) =>
     event.preventDefault()
     if $(event.target).hasClass 'seqnav' # Links from courseware <a class='seqnav' href='n'>...</a>
@@ -187,8 +192,11 @@ class @Sequence
     .addClass("visited")
 
   mark_active: (position) ->
+    # Mark the correct tab as selected, for a11y helpfulness.
+    @$("#sequence-list a[aria-selected='true']").attr("aria-selected", "false")
     # 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")

common/templates/xblock_wrapper.html

@@ -1,3 +1,3 @@
-<div class="${' '.join(classes)}" ${data_attributes} aria-label="${display_name}">
+<div class="${' '.join(classes)}" ${data_attributes} tabindex="0">
     ${content}
 </div>

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

@@ -46,13 +46,13 @@ div.course-wrapper {
       }
     }
 
-    ol.vert-mod {
+    .vert-mod {
       padding: 0;
       margin: 0;
       line-height: 1.4;
       list-style: none;
 
-      > li {
+      > div {
         @extend .clearfix;
         border-bottom: 1px solid #ddd;
         margin-bottom: 15px;
@@ -232,6 +232,12 @@ div.course-wrapper {
 
 }
 
+.xblock {
+  &:focus {
+    outline: 0;
+  }
+}
+
 textarea.short-form-response {
     height: 200px;
     padding: 5px;

lms/templates/seq_module.html

@@ -3,22 +3,26 @@
 <div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-ajax-url="${ajax_url}" >
   <nav class="sequence-nav">
     <ul class="sequence-nav-buttons">
-      <li class="prev"><a href="#">${_('Previous')}</a></li>
+      <li class="prev"><a role="button" href="#">${_('Previous')}</a></li>
     </ul>
 
     <div class="sequence-list-wrapper">
-      <ol aria-label="${_('Section Navigation')}" id="sequence-list">
+      <ol role="tablist" aria-label="${_('Section Navigation')}" id="sequence-list">
         % for idx, item in enumerate(items):
         ## TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
         ## Make sure it gets updated after ajax calls.
         ## implementation note: will need to figure out how to handle combining detail
         ## statuses of multiple modules in js.
-        <li aria-label="${item['title']}">
+        <li>
         <a class="seq_${item['type']} inactive progress-${item['progress_status']}"
            data-id="${item['id']}"
            data-element="${idx+1}"
-           data-title="${item['title']}"
-           href="javascript:void(0);">
+           href="javascript:void(0);"
+           title="${item['title']|h}"
+           aria-controls="seq_contents_${idx}"
+           id="tab_${idx}"
+           tabindex="0"
+           role="tab">
             <p aria-hidden="false">${item['title']}<span class="sr" aria-hidden="true">, ${item['type']}</span></p>
           </a>
         </li>
@@ -27,19 +31,24 @@
     </div>
 
     <ul class="sequence-nav-buttons">
-      <li class="next"><a href="#">${_("Next")}</a></li>
+      <li class="next"><a role="button" href="#">${_("Next")}</a></li>
     </ul>
   </nav>
 
-  % for item in items:
-  <div class="seq_contents tex2jax_ignore asciimath2jax_ignore">${item['content'] | h}</div>
+  % for idx, item in enumerate(items):
+  <div id="seq_contents_${idx}" 
+       aria-labelledby="tab_${idx}"
+       aria-hidden="true"
+       class="seq_contents tex2jax_ignore asciimath2jax_ignore">
+     ${item['content'] | h}
+  </div>
   % endfor
-  <div id="seq_content"></div>
+  <div id="seq_content" role="tabpanel"></div>
 
   <nav class="sequence-bottom">
     <ul aria-label="${_('Section Navigation')}" class="sequence-nav-buttons">
-      <li class="prev"><a href="#">${_("Previous")}</a></li>
-      <li class="next"><a href="#">${_("Next")}</a></li>
+      <li class="prev"><a role="button" href="#">${_("Previous")}</a></li>
+      <li class="next"><a role="button" href="#">${_("Next")}</a></li>
     </ul>
   </nav>
 </div>

lms/templates/vert_module.html

@@ -1,6 +1,6 @@
 <div class="vert-mod">
 % for idx, item in enumerate(items):
-  <div id="vert-${idx}" data-id="${item['id']}">
+  <div class="vert vert-${idx}" data-id="${item['id']}">
     ${item['content']}
   </div>
 % endfor