Merge pull request #9523 from edx/revert-9367-clrux/ac-76-course-nav

Revert "Course navigation menu accessibility issue"

common/test/acceptance/pages/lms/course_nav.py

@@ -82,7 +82,7 @@ class CourseNavPage(PageObject):
 
         # Click the section to ensure it's open (no harm in clicking twice if it's already open)
         # Add one to convert from list index to CSS index
-        section_css = '.course-navigation .chapter:nth-of-type({0})'.format(sec_index + 1)
+        section_css = 'nav>div.chapter:nth-of-type({0})>h3>a'.format(sec_index + 1)
         self.q(css=section_css).first.click()
 
         # Get the subsection by index
@@ -94,10 +94,9 @@ class CourseNavPage(PageObject):
             return
 
         # Convert list indices (start at zero) to CSS indices (start at 1)
-        subsection_css = (
-            ".course-navigation .chapter-content-container:nth-of-type({0}) "
-            ".chapter-menu .menu-item:nth-of-type({1})"
-        ).format(sec_index + 1, subsec_index + 1)
+        subsection_css = "nav>div.chapter:nth-of-type({0})>ul>li:nth-of-type({1})>a".format(
+            sec_index + 1, subsec_index + 1
+        )
 
         # Click the subsection and ensure that the page finishes reloading
         self.q(css=subsection_css).first.click()
@@ -131,7 +130,7 @@ class CourseNavPage(PageObject):
         """
         Return a list of all section titles on the page.
         """
-        chapter_css = '.course-navigation .chapter .group-heading'
+        chapter_css = 'nav > div.chapter > h3 > a'
         return self.q(css=chapter_css).map(lambda el: el.text.strip()).results
 
     def _subsection_titles(self, section_index):
@@ -141,10 +140,7 @@ class CourseNavPage(PageObject):
         """
         # Retrieve the subsection title for the section
         # Add one to the list index to get the CSS index, which starts at one
-        subsection_css = (
-            ".course-navigation .chapter-content-container:nth-of-type({0}) "
-            ".chapter-menu .menu-item a p:nth-of-type(1)"
-        ).format(section_index)
+        subsection_css = 'nav>div.chapter:nth-of-type({0})>ul>li>a>p:nth-of-type(1)'.format(section_index)
 
         # If the element is visible, we can get its text directly
         # Otherwise, we need to get the HTML
@@ -175,8 +171,8 @@ class CourseNavPage(PageObject):
         That's true right after we click the section/subsection, but not true in general
         (the user could go to a section, then expand another tab).
         """
-        current_section_list = self.q(css='.course-navigation .chapter.is-open .group-heading').text
-        current_subsection_list = self.q(css='.course-navigation .chapter-content-container .menu-item.active a p').text
+        current_section_list = self.q(css='nav>div.chapter.is-open>h3>a').text
+        current_subsection_list = self.q(css='nav>div.chapter.is-open li.active>a>p').text
 
         if len(current_section_list) == 0:
             self.warning("Could not find the current section")

common/test/acceptance/pages/lms/courseware.py

@@ -14,7 +14,7 @@ class CoursewarePage(CoursePage):
     url_path = "courseware/"
     xblock_component_selector = '.vert .xblock'
     section_selector = '.chapter'
-    subsection_selector = '.chapter-content-container .chapter-menu a'
+    subsection_selector = '.chapter ul li'
 
     def is_browser_on_page(self):
         return self.q(css='body.courseware').present
@@ -102,7 +102,7 @@ class CoursewarePage(CoursePage):
         """
         return the url of the active subsection in the left nav
         """
-        return self.q(css='.chapter-content-container .chapter-menu .menu-item.active a').attrs('href')[0]
+        return self.q(css='.chapter ul li.active a').attrs('href')[0]
 
     @property
     def can_start_proctored_exam(self):

common/test/acceptance/tests/lms/test_lms.py

@@ -1121,7 +1121,7 @@ class EntranceExamTest(UniqueCourseTest):
             When I view the courseware that has an entrance exam
             Then there should be an "Entrance Exam" chapter.'
         """
-        entrance_exam_link_selector = '.accordion .course-navigation .chapter .group-heading'
+        entrance_exam_link_selector = 'div#accordion nav div h3 a'
         # visit courseware page and make sure there is not entrance exam chapter.
         self.courseware_page.visit()
         self.courseware_page.wait_for_page()

lms/djangoapps/courseware/features/navigation.py

@@ -92,7 +92,7 @@ def when_i_navigate_to_a_section(step):
     world.disable_jquery_animations()
 
     # Open the 2nd section
-    world.css_click(css_selector='button.chapter', index=1)
+    world.css_click(css_selector='div.chapter', index=1)
     subsection_css = 'a[href*="Test_Subsection_2/"]'
 
     # Click on the subsection to see the content

lms/djangoapps/courseware/module_render.py

@@ -74,7 +74,6 @@ from xmodule.modulestore.exceptions import ItemNotFoundError
 from xmodule.x_module import XModuleDescriptor
 from xmodule.mixin import wrap_with_license
 from util.json_request import JsonResponse
-from util.model_utils import slugify
 from util.sandboxing import can_execute_unsafe_code, get_python_lib_zip
 from util import milestones_helpers
 from verify_student.services import ReverificationService
@@ -166,7 +165,6 @@ def toc_for_course(user, request, course, active_chapter, active_section, field_
         for chapter in chapters:
             # Only show required content, if there is required content
             # chapter.hide_from_toc is read-only (boo)
-            display_id = slugify(chapter.display_name_with_default)
             local_hide_from_toc = False
             if required_content:
                 if unicode(chapter.location) not in required_content:
@@ -248,7 +246,6 @@ def toc_for_course(user, request, course, active_chapter, active_section, field_
                     sections.append(section_context)
             toc_chapters.append({
                 'display_name': chapter.display_name_with_default,
-                'display_id': display_id,
                 'url_name': chapter.url_name,
                 'sections': sections,
                 'active': chapter.url_name == active_chapter

lms/djangoapps/courseware/tests/test_entrance_exam.py

@@ -155,8 +155,7 @@ class EntranceExamTestCases(LoginEnrollmentTestCase, ModuleStoreTestCase):
                         }
                     ],
                     'url_name': u'Entrance_Exam_Section_-_Chapter_1',
-                    'display_name': u'Entrance Exam Section - Chapter 1',
-                    'display_id': u'entrance-exam-section-chapter-1',
+                    'display_name': u'Entrance Exam Section - Chapter 1'
                 }
             ]
         )
@@ -183,22 +182,19 @@ class EntranceExamTestCases(LoginEnrollmentTestCase, ModuleStoreTestCase):
                         }
                     ],
                     'url_name': u'Overview',
-                    'display_name': u'Overview',
-                    'display_id': u'overview'
+                    'display_name': u'Overview'
                 },
                 {
                     'active': False,
                     'sections': [],
                     'url_name': u'Week_1',
-                    'display_name': u'Week 1',
-                    'display_id': u'week-1'
+                    'display_name': u'Week 1'
                 },
                 {
                     'active': False,
                     'sections': [],
                     'url_name': u'Instructor',
-                    'display_name': u'Instructor',
-                    'display_id': u'instructor'
+                    'display_name': u'Instructor'
                 },
                 {
                     'active': True,
@@ -213,8 +209,7 @@ class EntranceExamTestCases(LoginEnrollmentTestCase, ModuleStoreTestCase):
                         }
                     ],
                     'url_name': u'Entrance_Exam_Section_-_Chapter_1',
-                    'display_name': u'Entrance Exam Section - Chapter 1',
-                    'display_id': u'entrance-exam-section-chapter-1'
+                    'display_name': u'Entrance Exam Section - Chapter 1'
                 }
             ]
         )

lms/djangoapps/courseware/tests/test_module_render.py

@@ -633,7 +633,6 @@ class TestTOC(ModuleStoreTestCase):
     def test_toc_toy_from_chapter(self, default_ms, setup_finds, setup_sends, toc_finds):
         with self.store.default_store(default_ms):
             self.setup_modulestore(default_ms, setup_finds, setup_sends)
-
             expected = ([{'active': True, 'sections':
                           [{'url_name': 'Toy_Videos', 'display_name': u'Toy Videos', 'graded': True,
                             'format': u'Lecture Sequence', 'due': None, 'active': False},
@@ -643,11 +642,11 @@ class TestTOC(ModuleStoreTestCase):
                             'format': '', 'due': None, 'active': False},
                            {'url_name': 'video_4f66f493ac8f', 'display_name': 'Video', 'graded': True,
                             'format': '', 'due': None, 'active': False}],
-                          'url_name': 'Overview', 'display_name': u'Overview', 'display_id': u'overview'},
+                          'url_name': 'Overview', 'display_name': u'Overview'},
                          {'active': False, 'sections':
                           [{'url_name': 'toyvideo', 'display_name': 'toyvideo', 'graded': True,
                             'format': '', 'due': None, 'active': False}],
-                          'url_name': 'secret:magic', 'display_name': 'secret:magic', 'display_id': 'secretmagic'}])
+                          'url_name': 'secret:magic', 'display_name': 'secret:magic'}])
 
             course = self.store.get_course(self.toy_course.id, depth=2)
             with check_mongo_calls(toc_finds):
@@ -683,11 +682,11 @@ class TestTOC(ModuleStoreTestCase):
                             'format': '', 'due': None, 'active': False},
                            {'url_name': 'video_4f66f493ac8f', 'display_name': 'Video', 'graded': True,
                             'format': '', 'due': None, 'active': False}],
-                          'url_name': 'Overview', 'display_name': u'Overview', 'display_id': u'overview'},
+                          'url_name': 'Overview', 'display_name': u'Overview'},
                          {'active': False, 'sections':
                           [{'url_name': 'toyvideo', 'display_name': 'toyvideo', 'graded': True,
                             'format': '', 'due': None, 'active': False}],
-                          'url_name': 'secret:magic', 'display_name': 'secret:magic', 'display_id': 'secretmagic'}])
+                          'url_name': 'secret:magic', 'display_name': 'secret:magic'}])
 
             with check_mongo_calls(toc_finds):
                 actual = render.toc_for_course(

lms/djangoapps/courseware/tests/test_navigation.py

@@ -107,6 +107,7 @@ class TestNavigation(ModuleStoreTestCase, LoginEnrollmentTestCase):
                 'chapter': 'Chrome',
                 'section': displayname,
             }))
+            self.assertEquals('open_close_accordion' in response.content, accordion)
             self.assertEquals('course-tabs' in response.content, tabs)
 
         self.assertTabInactive('progress', response)

lms/djangoapps/courseware/testutils.py

@@ -25,6 +25,7 @@ class RenderXBlockTestMixin(object):
     # DOM elements that appear in the LMS Courseware,
     # but are excluded from the xBlock-only rendering.
     COURSEWARE_CHROME_HTML_ELEMENTS = [
+        '<header id="open_close_accordion"',
         '<ol class="course-tabs"',
         '<footer id="footer-openedx"',
         '<div class="window-wrap"',

lms/static/coffee/fixtures/accordion.html

+<div class="course-wrapper">
+  <header id="open_close_accordion">
+    <a href="#">close</a>
+  </header>
+  <div id="accordion"></div>
+</div>

lms/static/coffee/spec/courseware_spec.coffee

 describe 'Courseware', ->
   describe 'start', ->
+    it 'create the navigation', ->
+      spyOn(window, 'Navigation')
+      Courseware.start()
+      expect(window.Navigation).toHaveBeenCalled()
+
     it 'binds the Logger', ->
       spyOn(Logger, 'bind')
       Courseware.start()

lms/static/coffee/spec/navigation_spec.coffee

+describe 'Navigation', ->
+  beforeEach ->
+    loadFixtures 'coffee/fixtures/accordion.html'
+    @navigation = new Navigation
+
+  describe 'constructor', ->
+    describe 'when the #accordion exists', ->
+      describe 'when there is an active section', ->
+        beforeEach ->
+          spyOn $.fn, 'accordion'
+          $('#accordion').append('<ul><li></li></ul><ul><li class="active"></li></ul>')
+          new Navigation
+
+        it 'activate the accordion with correct active section', ->
+          expect($('#accordion').accordion).toHaveBeenCalledWith
+            active: 1
+            header: 'h3'
+            autoHeight: false
+            heightStyle: 'content'
+
+      describe 'when there is no active section', ->
+        beforeEach ->
+          spyOn $.fn, 'accordion'
+          $('#accordion').append('<ul><li></li></ul><ul><li></li></ul>')
+          new Navigation
+
+        it 'activate the accordian with no section as active', ->
+          expect($('#accordion').accordion).toHaveBeenCalledWith
+            active: 0
+            header: 'h3'
+            autoHeight: false
+            heightStyle: 'content'
+
+      it 'binds the accordionchange event', ->
+        expect($('#accordion')).toHandleWith 'accordionchange', @navigation.log
+
+      it 'bind the navigation toggle', ->
+        expect($('#open_close_accordion a')).toHandleWith 'click', @navigation.toggle
+
+    describe 'when the #accordion does not exists', ->
+      beforeEach ->
+        $('#accordion').remove()
+
+      it 'does not activate the accordion', ->
+        spyOn $.fn, 'accordion'
+        expect($('#accordion').accordion).wasNotCalled()
+
+  describe 'toggle', ->
+    it 'toggle closed class on the wrapper', ->
+      $('.course-wrapper').removeClass('closed')
+
+      @navigation.toggle()
+      expect($('.course-wrapper')).toHaveClass('closed')
+
+      @navigation.toggle()
+      expect($('.course-wrapper')).not.toHaveClass('closed')
+
+  describe 'log', ->
+    beforeEach ->
+      spyOn Logger, 'log'
+
+    it 'submit event log', ->
+      @navigation.log {}, {
+        newHeader:
+          text: -> "new"
+        oldHeader:
+          text: -> "old"
+      }
+
+      expect(Logger.log).toHaveBeenCalledWith 'accordion',
+        newheader: 'new'
+        oldheader: 'old'

lms/static/coffee/src/courseware.coffee

@@ -2,6 +2,7 @@ class @Courseware
   @prefix: ''
 
   constructor: ->
+    new Navigation
     Logger.bind()
     @render()
 

lms/static/coffee/src/navigation.coffee

+class @Navigation
+  constructor: ->
+    if $('#accordion').length
+      # First look for an active section
+      active = $('#accordion ul:has(li.active)').index('#accordion ul')
+      # if we didn't find one, look for an active chapter
+      if active < 0
+        active = $('#accordion h3.active').index('#accordion h3')
+      # if that didn't work either, default to 0
+      if active < 0
+        active = 0
+      $('#accordion').bind('accordionchange', @log).accordion
+        active: active
+        header: 'h3'
+        autoHeight: false
+        heightStyle: 'content'
+      $('#accordion .ui-state-active').closest('.chapter').addClass('is-open')
+      $('#open_close_accordion a').click @toggle
+      $('#accordion').show()
+      $('#accordion a').click @setChapter
+
+  log: (event, ui) ->
+    Logger.log 'accordion',
+      newheader: ui.newHeader.text()
+      oldheader: ui.oldHeader.text()
+
+  toggle: ->
+    $('.course-wrapper').toggleClass('closed')
+
+  setChapter: ->
+    $('#accordion .is-open').removeClass('is-open')
+    $(this).closest('.chapter').addClass('is-open')
+    
\ No newline at end of file

lms/static/js/fixtures/accordion.html

-<div class="course-wrapper">
-  <div class="accordion">
-    <button class="button-chapter chapter" aria-controls="accordion-menu-1" aria-pressed="true">
-      <h3 class="group-heading">
-          Introduction Chapter
-      </h3>
-    </button>
-    <div class="chapter-content-container" tabindex="-1" aria-expanded="true">
-      <div class="chapter-menu" id="accordion-menu-1">
-        <div class="menu-item">
-          <a href="#">
-            <p>edX Homepage</p>
-            <p class="subtitle">Ungraded</p>
-          </a>
-        </div>
-        <div class="menu-item active">
-          <a href="#">
-            <p>The edX Blog</p>
-          </a>
-        </div>
-        <div class="menu-item graded">
-          <a href="#">
-            <p>Courses Dashboard</p>
-            <p class="subtitle">Graded</p>
-          </a>
-        </div>
-      </div>
-    </div>
-    <button class="button-chapter chapter" aria-controls="accordion-menu-2" aria-pressed="false">
-      <h3 class="group-heading">
-          Another Chapter
-      </h3>
-    </button>
-    <div class="chapter-content-container" tabindex="-1" aria-expanded="false">
-      <div class="chapter-menu" id="accordion-menu-2">
-        <div class="menu-item">
-          <a href="#">
-            <p>edX Homepage</p>
-            <p class="subtitle">Ungraded</p>
-          </a>
-        </div>
-        <div class="menu-item">
-          <a href="#">
-            <p>The edX Blog</p>
-          </a>
-        </div>
-        <div class="menu-item">
-          <a class="graded" href="#">
-            <p>Courses Dashboard</p>
-            <p class="subtitle">Graded</p>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file

lms/static/js/spec/main.js

@@ -64,7 +64,6 @@
             '_split': 'js/split',
             'mathjax_delay_renderer': 'coffee/src/mathjax_delay_renderer',
             'MathJaxProcessor': 'coffee/src/customwmd',
-            'js/utils/navigation': 'js/utils/navigation',
 
             // Manually specify LMS files that are not converted to RequireJS
             'history': 'js/vendor/history',
@@ -804,8 +803,6 @@
         'lms/include/teams/js/spec/views/topic_teams_spec.js',
         'lms/include/teams/js/spec/views/topics_spec.js',
         'lms/include/teams/js/spec/views/team_profile_header_actions_spec.js'
-        'lms/include/teams/js/spec/views/team_join_spec.js',
-        'lms/include/js/spec/navigation_spec.js'
     ]);
 
 }).call(this, requirejs, define);

lms/static/js/spec/navigation_spec.js

-define(['jquery', 'js/utils/navigation'], function($) {
-    'use strict';
-
-    describe('Course Navigation Accordion', function() {
-        var accordion, button, heading, chapterContent, chapterMenu;
-
-        beforeEach(function() {
-            loadFixtures('js/fixtures/accordion.html');
-
-            accordion = $('.accordion');
-            button = accordion.children('.button-chapter');
-            heading = button.children('.group-heading');
-            chapterContent = accordion.children('.chapter-content-container');
-            chapterMenu = chapterContent.children('.chapter-menu');
-
-            spyOn($.fn, 'focus').andCallThrough();
-            edx.util.navigation.init();
-        });
-
-        describe('constructor', function() {
-
-            describe('always', function() {
-
-                it('ensures accordion is present', function() {
-                    expect(accordion.length).toBe(1);
-                });
-
-                it('ensures aria attributes are present', function() {
-                    expect(button).toHaveAttr({
-                        'aria-pressed': 'true'
-                    });
-
-                    expect(chapterContent).toHaveAttr({
-                        'aria-expanded': 'true'
-                    });
-                });
-
-                it('ensures only one active item', function() {
-                    expect(chapterMenu.find('.active').length).toBe(1);
-                });
-            });
-
-            describe('open section', function() {
-
-                it('ensures new section is opened and previous section is closed', function() {
-                    button.last().click();
-
-                    expect(chapterContent.first()).toBeHidden();
-                    expect(chapterContent.last()).not.toBeHidden();
-
-                    expect(button.first()).not.toHaveClass('is-open');
-                    expect(button.last()).toHaveClass('is-open');
-
-                    expect(chapterContent.last().focus).toHaveBeenCalled();
-                });
-
-                it('ensure proper aria and attrs', function() {
-                    expect(button.last()).toHaveAttr({
-                        'aria-pressed': 'false'
-                    });
-                    expect(button.first()).toHaveAttr({
-                        'aria-pressed': 'true'
-                    });
-                    expect(chapterContent.last()).toHaveAttr({
-                        'aria-expanded': 'false'
-                    });
-                    expect(chapterContent.first()).toHaveAttr({
-                        'aria-expanded': 'true'
-                    })
-                });
-            });
-        });
-    });
-});
\ No newline at end of file

lms/static/js/utils/navigation.js

-var edx = edx || {},
-
-    Navigation = (function() {
-
-        var navigation = {
-
-            init: function() {
-
-                if ($('.accordion').length) {
-
-                    navigation.openAccordion();
-                }
-            },
-
-            openAccordion: function() {
-                navigation.checkForCurrent();
-                navigation.listenForClick();
-            },
-
-            checkForCurrent: function() {
-                var active = $('.accordion .chapter-content-container .chapter-menu:has(.active)').index('.accordion .chapter-content-container .chapter-menu') ? $('.accordion .chapter-content-container .chapter-menu:has(.active)').index('.accordion .chapter-content-container .chapter-menu') : 0,
-                    activeSection = $('.accordion .button-chapter:eq(' + active + ')');
-
-                navigation.closeAccordions();
-                navigation.openAccordionSection(activeSection);
-            },
-
-            listenForClick: function() {
-                $('.accordion').on('click', '.button-chapter', function(event) {
-                    navigation.closeAccordions();
-                    navigation.openAccordionSection(event.currentTarget);
-                });
-            },
-
-            closeAccordions: function() {
-                $('.chapter-content-container').hide();
-                $('.chapter-content-container .chapter-menu').hide();
-
-                $('.accordion .button-chapter').each(function(event) {
-                    var el = $(this);
-
-                    el.removeClass('is-open').attr('aria-pressed', 'false');
-                    el.next('.chapter-content-container').attr('aria-expanded', 'false');
-                    el.children('.group-heading').removeClass('active');
-                    el.children('.group-heading').find('.icon').addClass('fa-caret-right').removeClass('fa-caret-down');
-                });
-            },
-
-            openAccordionSection: function(section) {
-                var elSection = $(section).next('.chapter-content-container');
-
-                elSection.show().focus();
-                elSection.find('.chapter-menu').show();
-
-                $(section).addClass('is-open').attr('aria-pressed', 'true');
-                $(section).next('.chapter-content-container').attr('aria-expanded', 'true');
-                $(section).children('.group-heading').addClass('active');
-                $(section).children('.group-heading').find('.icon').removeClass('fa-caret-right').addClass('fa-caret-down');
-            }
-        };
-
-        return {
-            init: navigation.init
-        };
-
-    })();
-
-    edx.util = edx.util || {};
-    edx.util.navigation = Navigation;
-    edx.util.navigation.init();

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

@@ -516,7 +516,7 @@ div.course-wrapper {
         }
       }
 
-      .accordion {
+      div#accordion {
         visibility: hidden;
         width: 10px;
         padding: 0;
@@ -524,6 +524,11 @@ div.course-wrapper {
         nav {
           white-space: pre;
           overflow: hidden;
+
+          ul {
+            overflow: hidden;
+            white-space: nowrap;
+          }
         }
       }
     }

lms/templates/courseware/accordion.html

@@ -6,44 +6,73 @@
 %>
 
 <%def name="make_chapter(chapter)">
-<%
-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 = ''
-%>
-<button class="button-chapter chapter ${active_class}" id="${chapter['display_id']}-parent" aria-controls="${chapter['display_id']}-child" aria-pressed="false">
-    <h3 class="group-heading ${active_class}" aria-label="${aria_label}">
-        <span class="icon fa fa-caret-right" aria-hidden="true"></span>
-        ${chapter['display_name']}
-    </h3>
-</button>
-<div class="chapter-content-container" tabindex="-1" aria-expanded="false">
-    <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']:
-        <div class="menu-item ${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}">
+  <div class="chapter">
+      <%
+          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}">
+        <a href="#">
+          ${chapter['display_name']}
+        </a>
+      </h3>
+
+    <ul>
+      % 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>
-                <%
+              <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 class="menu-icon" src="/static/images/graded.png" alt="Graded Section">
+              %>
+
+              ## There is behavior differences between
+              ## rending of sections which have proctoring/timed examinations
+              ## and those that do not.
+              ##
+              ## Proctoring exposes a exam status message field as well as
+              ## a status icon
+
+              % if section['format'] or due_date or 'proctoring' in section:
+              <p class="subtitle">
+                % if 'proctoring' in section:
+                  ## Display the proctored exam status icon and status message
+                  <i class="fa ${section['proctoring'].get('suggested_icon', 'fa-lock')}  ${section['proctoring'].get('status', 'eligible')}"></i>&nbsp;
+                  <span class="subtitle-name">${section['proctoring'].get('short_description', '')}
+                  </span>
+                  ## completed proctored exam statuses should not show the due date
+                  ## since the exam has already been submitted by the user
+                  % if not section['proctoring'].get('in_completed_state', False):
+                    <span class="subtitle-name">${due_date}</span>
+                  % endif
+                % else:
+                    ## non-proctored section, we just show the exam format and the due date
+                    ## this is the standard case in edx-platform
+                    <span class="subtitle-name">${section['format']} ${due_date}
+                    </span>
                 % endif
+              </p>
+              % endif
+
+              % if 'graded' in section and section['graded']:
+              ## sections that are graded should indicate this through an icon
+              <i class="icon fa fa-pencil-square-o" aria-hidden="true" data-tooltip="${_("This section is graded.")}"></i>
+              % endif
             </a>
-        </div>
-        % endfor
-    </div>
-</div>
+          </li>
+      % endfor
+    </ul>
+  </div>
 </%def>
 
 % for chapter in toc:
     ${make_chapter(chapter)}
-% endfor
\ No newline at end of file
+% endfor

lms/templates/courseware/courseware.html

@@ -165,6 +165,9 @@ ${fragment.foot_html()}
 
 % if disable_accordion is UNDEFINED or not disable_accordion:
     <div class="course-index" role="navigation">
+      <header id="open_close_accordion">
+        <a href="#">${_("close")}</a>
+      </header>
 
       % if settings.FEATURES.get('ENABLE_COURSEWARE_SEARCH'):
         <div id="courseware-search-bar" class="search-bar courseware-search-bar" role="search" aria-label="Course">
@@ -183,8 +186,8 @@ ${fragment.foot_html()}
         </div>
       % endif
 
-      <div class="accordion">
-        <nav class="course-navigation" aria-label="${_('Course Navigation')}">
+      <div id="accordion" style="display: none">
+        <nav aria-label="${_('Course Navigation')}">
           % if accordion.strip():
             ${accordion}
           % else:

lms/templates/instructor/instructor_dashboard_2/e-commerce.html

@@ -204,11 +204,11 @@ import pytz
            activeHeader: "ui-icon-carat-1-s"
        };
        var act = 0;
-       $(".accordion").accordion(
+       $("#accordion").accordion(
                {
                    heightStyle: 'content',
                    activate: function(event, ui) {
-                    var active = jQuery(".accordion").accordion('option', 'active');
+                    var active = jQuery("#accordion").accordion('option', 'active');
                     $.cookie('saved_index', null);
                     $.cookie('saved_index', active);
                     $('#error-msg').val('');

lms/templates/main.html

@@ -159,7 +159,6 @@ from branding import api as branding_api
 
   <%block name="js_extra"/>
   <script type="text/javascript" src="${static.url('js/vendor/noreferrer.js')}" charset="utf-8"></script>
-  <script type="text/javascript" src="${static.url('js/utils/navigation.js')}" charset="utf-8"></script>
 </body>
 </html>
 

lms/templates/staticbook.html

@@ -71,6 +71,9 @@ $("#open_close_accordion a").click(function(){
   <div class="book-wrapper">
 
     <section aria-label="${_('Textbook Navigation')}" class="book-sidebar">
+      <header id="open_close_accordion">
+        <a href="#">close</a>
+      </header>
 
       <ul id="booknav" class="treeview-booknav">
           <%def name="print_entry(entry)">