Updating markup and styles

lms/static/coffee/src/navigation.coffee

@@ -2,7 +2,7 @@ class @Navigation
   constructor: ->
     if $('#accordion').length
       # First look for an active section
-      active = $('#accordion div div ol:has(li.active)').index('#accordion div div ol')
+      active = $('#accordion div div:has(a.active)').index('#accordion div div')
       # if we didn't find one, look for an active chapter
       if active < 0
         active = $('#accordion h3.active').index('#accordion h3')
@@ -40,8 +40,7 @@ class @Navigation
     $('.ui-accordion-content-active').parent().hide()
     $('#accordion .ui-accordion-content-active').removeClass('ui-accordion-content-active')
     $(this).closest('.chapter').next('div').children('div').addClass('ui-accordion-content-active')
-    $('.ui-accordion-content-active').parent().show()
+    $('.ui-accordion-content-active').parent().show().focus()
     $('.ui-accordion-content-active').show()
-    $('.ui-accordion-content-active li:first-child a').focus()
     $('.ui-accordion-content-active').attr('aria-hidden', 'false')
 

lms/templates/courseware/accordion.html

@@ -6,44 +6,39 @@
 %>
 
 <%def name="make_chapter(chapter)">
-  <button class="chapter" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-expanded="false" aria-pressed="false">
-      <%
-          if chapter.get('active'):
-              aria_label = _('{chapter}, current chapter').format(chapter=chapter['display_name'])
-              active_class = ' class="active"'
-          else:
-              aria_label = chapter['display_name']
-              active_class = ''
-      %>
-      <h3 ${active_class} aria-label="${aria_label}">
-          ${chapter['display_name']}
-      </h3>
-    </button>
-    <div class="chapter-content-container">
-        <div id="${chapter['display_id']}-child" role="region" aria-labelledby="${chapter['display_id']}-parent" aria-hidden="false">
-            <ol>
-              % 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="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
-                      <%
-                        if section.get('due') is None:
-                            due_date = ''
-                        else:
-                            formatted_string = get_time_display(section['due'], due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES)
-                            due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string)
-                      %>
-                      <p class="subtitle">${section['format']} ${due_date}</p>
-
-                      % if 'graded' in section and section['graded']:
-                          <img src="/static/images/graded.png" alt="Graded Section">
-                      % endif
-                    </a>
-                  </li>
-              % endfor
-            </ol>
-        </div>
+<button class="button-chapter chapter" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-expanded="false" aria-pressed="false">
+    <%
+    if chapter.get('active'):
+        aria_label = _('{chapter}, current chapter').format(chapter=chapter['display_name'])
+        active_class = 'active"'
+    else:
+        aria_label = chapter['display_name']
+        active_class = ''
+    %>
+    <h3 class="group-heading ${active_class}" aria-label="${aria_label}">
+        ${chapter['display_name']}
+    </h3>
+</button>
+<div class="chapter-content-container" tabindex="-1">
+    <div class="chapter-menu" id="${chapter['display_id']}-child" role="region" aria-labelledby="${chapter['display_id']}-parent" aria-hidden="false">
+        % for section in chapter['sections']:
+        <a class="${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}" href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
+            <p>${section['display_name']} ${'<span class="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
+            <%
+            if section.get('due') is None:
+                due_date = ''
+            else:
+                formatted_string = get_time_display(section['due'], due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES)
+                due_date = '' if len(formatted_string)==0 else _('due {date}').format(date=formatted_string)
+            %>
+            <p class="subtitle">${section['format']} ${due_date}</p>
+            % if 'graded' in section and section['graded']:
+                <img src="/static/images/graded.png" alt="Graded Section">
+            % endif
+        </a>
+        % endfor
     </div>
+</div>
 </%def>
 
 % for chapter in toc: