Course navigation menu accessibility issue

Following have been done
1- Change the structure of the course navigation Menu HTML
2- Add some basic styling
3- Add basic JS for html rendering
4- Update tests according to new structure

AC-76

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 = 'nav>div.chapter:nth-of-type({0})>h3>a'.format(sec_index + 1)
+        section_css = 'nav>div.chapter:nth-of-type({0})'.format(sec_index + 1)
         self.q(css=section_css).first.click()
 
         # Get the subsection by index
@@ -94,7 +94,7 @@ class CourseNavPage(PageObject):
             return
 
         # Convert list indices (start at zero) to CSS indices (start at 1)
-        subsection_css = "nav>div.chapter:nth-of-type({0})>ul>li:nth-of-type({1})>a".format(
+        subsection_css = "nav>div.chapter-content-container:nth-of-type({0})>div>ol>li:nth-of-type({1})>a".format(
             sec_index + 1, subsec_index + 1
         )
 
@@ -130,7 +130,7 @@ class CourseNavPage(PageObject):
         """
         Return a list of all section titles on the page.
         """
-        chapter_css = 'nav > div.chapter > h3 > a'
+        chapter_css = 'nav > button.chapter > h3'
         return self.q(css=chapter_css).map(lambda el: el.text.strip()).results
 
     def _subsection_titles(self, section_index):
@@ -140,7 +140,9 @@ 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 = 'nav>div.chapter:nth-of-type({0})>ul>li>a>p:nth-of-type(1)'.format(section_index)
+        subsection_css = 'nav>.chapter-content-container:nth-of-type({0})>div>ol>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
@@ -171,8 +173,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='nav>div.chapter.is-open>h3>a').text
-        current_subsection_list = self.q(css='nav>div.chapter.is-open li.active>a>p').text
+        current_section_list = self.q(css='nav>button.chapter.is-open>h3').text
+        current_subsection_list = self.q(css='nav div.chapter-content-container ol 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 ul li'
+    subsection_selector = '.chapter-content-container ol 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 ul li.active a').attrs('href')[0]
+        return self.q(css='.chapter-content-container ol 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 = 'div#accordion nav div h3 a'
+        entrance_exam_link_selector = 'div#accordion nav button h3'
         # visit courseware page and make sure there is not entrance exam chapter.
         self.courseware_page.visit()
         self.courseware_page.wait_for_page()