Merge pull request #11786 from edx/peter-fogg/course-home-a11y

Accessibility fixes for the course home page.

lms/static/js/courseware/toggle_element_visibility.js

@@ -9,14 +9,18 @@
                 var toggleActionElements = $('.toggle-visibility-button');
 
                 var updateToggleActionText = function (elementIsHidden, actionElement) {
-                    var show_text = actionElement.data('show');
-                    var hide_text = actionElement.data('hide');
+                    var show_text = actionElement.data('show'),
+                        hide_text = actionElement.data('hide'),
+                        first_hidden_update = $('.old-updates .toggle-visibility-button').first();
+
+                    actionElement.attr('aria-expanded', elementIsHidden);
 
                     if (elementIsHidden) {
                         if (hide_text) {
                             actionElement.html(actionElement.data('hide'));
                         } else {
                             actionElement.hide();
+                            first_hidden_update.focus();
                         }
                     } else {
                         if (show_text) {

lms/static/sass/course/_info.scss

@@ -82,6 +82,13 @@ div.info-wrapper {
         display: block;
         text-align: center;
         cursor: pointer;
+        background: none;
+
+        &:hover, &:focus {
+          background-color: unset;
+          color: $m-blue-d3;
+          border: 1px solid black;
+        }
       }
 
       > li,article {
@@ -109,7 +116,12 @@ div.info-wrapper {
         .toggle-visibility-button {
           @extend %t-title9;
           @include float(right);
+          padding: 0;
           cursor: pointer;
+          background: none;
+          border: none;
+          color: $blue;
+          font-weight: normal;
         }
 
         .toggle-visibility-element {
@@ -175,7 +187,7 @@ div.info-wrapper {
       right: auto;
     }
 
-    h1 {
+    .handouts-header {
       @include text-align(left);
       @extend %t-strong;
       @extend %t-title6;

lms/static/sass/course/base/_extends.scss

@@ -67,8 +67,7 @@ h1.top-header {
   width: flex-grid(3);
   background: $sidebar-color;
 
-  h1, h2 {
-   font-size: em(20);
+  h1, h2, h3, h4 {
    font-weight: bold;
    letter-spacing: 0;
    text-transform: none;
@@ -79,7 +78,19 @@ h1.top-header {
 
   h1 {
     font-size: 18px;
-    padding: 32px 26px 20px 26px;
+    margin-bottom: 15px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3 {
+    font-size: 14px;
+  }
+
+  h4 {
+    font-size: 12px;
   }
 
   a {
@@ -95,40 +106,12 @@ h1.top-header {
     display: none;
   }
 
-  h3 {
-    background: none;
-    border: none;
-    color: $black;
-    font-weight: normal;
-    margin: 0;
-    overflow: hidden;
-    font-size: 1em;
-
-    a {
-      display: block;
-      text-decoration: none;
-      @include transition(none);
-    }
-
-    &.active {
-      // @extend .bottom-border;
-      color: $black;
-      font-weight: bold;
-
-      a {
-        color: $black;
-      }
-    }
-  }
-
   ul, ol {
-    list-style: none;
     margin: 0;
     padding-left: 0;
 
     li {
-      // @extend .bottom-border;
-      @extend .clearfix;
+      @include margin-left(20px);
       background: none;
       position: relative;
       padding: 0;

lms/templates/courseware/course_updates.html

@@ -4,26 +4,47 @@
   % for index, update in enumerate(visible_updates):
     <article class="updates-article">
       % if not update.get("is_error"):
-        <h2 class="date">${update.get("date")}</h2>
-        <a class="toggle-visibility-button" data-hide="${_('Hide')}" data-show="${_('Show')}"></a>
+        <h2 class="date" id="msg-date-${index}">${update.get("date")}</h2>
+        <button
+            class="toggle-visibility-button"
+            data-hide="${_('Hide')}"
+            data-show="${_('Show')}"
+            aria-describedby="msg-date-${index}"
+            aria-controls="msg-content-${index}"
+            aria-expanded="true"
+        ></button>
       % endif
-      <div class="toggle-visibility-element article-content ${'hidden' if index >= 1 else ''}">
+      <div class="toggle-visibility-element article-content ${'hidden' if index >= 1 else ''}" id="msg-content-${index}">
         ${update.get("content")}
       </div>
     </article>
   % endfor
 </div>
-<div class="old-updates hidden toggle-visibility-element">
-  % for update in hidden_updates:
+
+% if len(hidden_updates) > 0:
+<button
+    class="toggle-visibility-button show-older-updates"
+    data-hide=""
+    data-show="${_('Show Earlier Course Updates')}"
+    aria-expanded="false"
+    aria-controls="old-updates"
+></button>
+% endif
+
+<div class="old-updates hidden toggle-visibility-element" id="old-updates">
+  % for index, update in enumerate(hidden_updates):
     <article class="updates-article">
-      <h2 class="date">${update.get("date")}</h2>
-      <a class="toggle-visibility-button" data-hide="${_('Hide')}" data-show="${_('Show')}"></a>
-      <div class="toggle-visibility-element article-content hidden">${update.get("content")}</div>
+      <h2 class="date" id="msg-date-${index + len(visible_updates)}">${update.get("date")}</h2>
+      <button
+          class="toggle-visibility-button"
+          data-hide="${_('Hide')}"
+          data-show="${_('Show')}"
+          aria-describedby="msg-date-${index + len(visible_updates)}"
+          aria-controls="msg-content-${index + len(visible_updates)}"
+          aria-expanded="false"
+      ></button>
+      <div class="toggle-visibility-element article-content hidden" id="msg-content-${index + len(visible_updates)}">${update.get("content")}</div>
     </article>
   % endfor
 </div>
-
-% if len(hidden_updates) > 0:
-  <a class="toggle-visibility-button show-older-updates" data-hide="" data-show="${_('Show Earlier Course Updates')}"></a>
-% endif
 </section>

lms/templates/courseware/info.html

@@ -49,12 +49,6 @@ from openedx.core.djangolib.markup import Text, HTML
   % if show_coursetalk_widget:
       <script src="//d3q6qq2zt8nhwv.cloudfront.net/s/js/widgets/coursetalk-write-reviews.js"></script>
   % endif
-<script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script>
-<script type="text/javascript" charset="utf-8">
- $(document).ready(function(){
-     $(".handouts").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
- });
-</script>
 </%block>
 
 <%block name="bodyclass">view-in-course view-course-info ${course.css_class or ''}</%block>
@@ -93,20 +87,20 @@ from openedx.core.djangolib.markup import Text, HTML
     </section>
     <section aria-label="${_('Handout Navigation')}" class="handouts">
       % if SelfPacedConfiguration.current().enable_course_home_improvements:
-        <h1>${_("Important Course Dates")}</h1>
+        <h1 class="handouts-header">${_("Important Course Dates")}</h1>
         ${HTML(get_course_date_summary(course, user))}
       % endif
 
-      <h1>${_(course.info_sidebar_name)}</h1>
+      <h1 class="handouts-header">${_(course.info_sidebar_name)}</h1>
       ${HTML(get_course_info_section(request, masquerade_user, course, 'handouts'))}
     </section>
     % else:
     <section class="updates">
-      <h1>${_("Course Updates and News")}</h1>
+      <h1 class="handouts-header">${_("Course Updates and News")}</h1>
       ${HTML(get_course_info_section(request, masquerade_user, course, 'guest_updates'))}
     </section>
     <section aria-label="${_('Handout Navigation')}" class="handouts">
-      <h1>${_("Course Handouts")}</h1>
+      <h1 class="handouts-header">${_("Course Handouts")}</h1>
       ${HTML(get_course_info_section(request, masquerade_user, course, 'guest_handouts'))}
     </section>
     % endif