Merge pull request #2463 from edx/dcs/a11y-progress-delistify

Converted <ol> to <div> to prevent a11y confusion on course progress page.
[LMS-1727]

lms/static/sass/course/_profile.scss

@@ -1,7 +1,7 @@
-div.profile-wrapper {
+.profile-wrapper {
   color: #000;
 
-  section.user-info {
+  .user-info {
     @extend .sidebar;
     border-left: 1px solid #d3d3d3;
     border-radius: 0px 4px 4px 0;
@@ -63,15 +63,15 @@ div.profile-wrapper {
           }
         }
 
-        div#description {
+        #description {
           font-size: 12px;
         }
 
-        a#change_language,
-        a#change_location,
-        a.edit-email,
-        a.name-edit,
-        a.email-edit {
+        #change_language,
+        #change_location,
+        .edit-email,
+        .name-edit,
+        .email-edit {
           color: #999;
           font-size: 12px;
           position: absolute;
@@ -91,12 +91,12 @@ div.profile-wrapper {
           margin-top: 4px;
         }
 
-        a.deactivate {
+        .deactivate {
           color: #aaa;
           font-style: italic;
         }
 
-        input#pwd_reset_button {
+        #pwd_reset_button {
           background: none;
           border: none;
           box-shadow: none;
@@ -117,7 +117,7 @@ div.profile-wrapper {
       }
     }
 
-    div#change_password_pop {
+    #change_password_pop {
       border-bottom: 1px solid #d3d3d3;
       box-shadow: 0 1px 0 #eee;
       color: #4D4D4D;
@@ -132,7 +132,7 @@ div.profile-wrapper {
     }
   }
 
-  section.course-info {
+  .course-info {
     @extend .content;
 
     header {
@@ -148,18 +148,17 @@ div.profile-wrapper {
       }
     }
 
-    div#grade-detail-graph {
+    #grade-detail-graph {
       min-height: 400px;
       width: 100%;
     }
 
-    > ol {
+    > .chapters {
       border-top: 1px solid #e3e3e3;
-      list-style: none;
       margin-top: lh();
       padding-left: 0;
 
-      > li {
+      > section {
         @extend .clearfix;
         border-bottom: 1px solid #e3e3e3;
         display: table;
@@ -182,13 +181,12 @@ div.profile-wrapper {
           width: flex-grid(2, 9);
         }
 
-        ol.sections {
+        .sections {
           display: table-cell;
-          list-style: none;
           padding-left: flex-gutter(9);
           width: flex-grid(7, 9);
 
-          > li {
+          > div {
             padding:0 0 lh() 0;
 
             &:first-child {
@@ -214,7 +212,7 @@ div.profile-wrapper {
               font-size: em(14);
             }
 
-            section.scores {
+            .scores {
               margin: lh(.5) 0;
 
               h3 {

lms/templates/courseware/progress.html

@@ -29,10 +29,10 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
 <%include file="/dashboard/_dashboard_prompt_midcourse_reverify.html" />
 <%include file="/courseware/course_navigation.html" args="active_page='progress'" />
 
-<section class="container">
+<div class="container">
   <div class="profile-wrapper">
 
-    <section class="course-info">
+    <div class="course-info">
       <header>
       <h1>${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email)}</h1>
       </header>
@@ -41,15 +41,15 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
         <div id="grade-detail-graph" aria-hidden="true"></div>
       %endif
 
-      <ol class="chapters">
+      <div class="chapters">
         %for chapter in courseware_summary:
         %if not chapter['display_name'] == "hidden":
-        <li>
+        <section>
           <h2>${ chapter['display_name'] }</h2>
 
-          <ol class="sections">
+          <div class="sections">
             %for section in chapter['sections']:
-            <li>
+            <div>
               <%
               earned = section['section_total'].earned
               total = section['section_total'].possible
@@ -61,8 +61,9 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
                 %if total > 0 or earned > 0:
                   <span class="sr">
                     ${_("{earned:.3n} of {total:.3n} possible points").format( earned = float(earned), total = float(total) )}
-                  </span></a>
+                  </span>
                 %endif
+                </a>
                 %if total > 0 or earned > 0:
                   <span> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString )}</span>
                 %endif
@@ -81,7 +82,7 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
                 %endif
               </p>
 
-              <section class="scores">
+              <div class="scores">
                 %if len(section['scores']) > 0:
                   <h3> ${ _("Problem Scores: ") if section['graded'] else _("Practice Scores: ")} </h3>
                   <ol>
@@ -92,17 +93,17 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
                 %else:
                   <h3 class="no-scores"> ${_("No problem scores in this section")} </h3>
                 %endif
-              </section>
+              </div>
 
 
-            </li> <!--End section-->
+            </div> <!--End section-->
             %endfor
-          </ol> <!--End sections-->
-        </li> <!--End chapter-->
+          </div> <!--End sections-->
+        </section> <!--End chapter-->
         %endif
         %endfor
-      </ol> <!--End chapters-->
+      </div> <!--End chapters-->
 
-    </section>
+    </div>
   </div>
-</section>
+</div>

lms/templates/main.html

@@ -110,10 +110,10 @@
   <%include file="${header_file}" />
 %endif
 
-  <section class="content-wrapper" id="content">
+  <div class="content-wrapper" id="content">
     ${self.body()}
     <%block name="bodyextra"/>
-  </section>
+  </div>
 
 % if not suppress_toplevel_navigation:
   <%include file="${footer_file}" />

lms/templates/main_django.html

@@ -30,10 +30,10 @@
 <body class="{% block bodyclass %}{% endblock %} lang_{{LANGUAGE_CODE}}">
   <a class="nav-skip" href="#content">{% trans "Skip to this view's content" %}</a>
   {% include "navigation.html" %}
-  <section class="content-wrapper" id="content">
+  <div class="content-wrapper" id="content">
     {% block body %}{% endblock %}
     {% block bodyextra %}{% endblock %}
-  </section>
+  </div>
 
   {% include "footer.html" %}