Implement minor UI/A11Y fixes for outline

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

@@ -54,7 +54,7 @@ class CourseOutlinePage(PageObject):
     url = None
 
     SECTION_SELECTOR = '.outline-item.section:nth-of-type({0})'
-    SECTION_TITLES_SELECTOR = '.section-name span'
+    SECTION_TITLES_SELECTOR = '.section-name h3'
     SUBSECTION_SELECTOR = SECTION_SELECTOR + ' .subsection:nth-of-type({1}) .outline-item'
     SUBSECTION_TITLES_SELECTOR = SECTION_SELECTOR + ' .subsection .subsection-title'
     OUTLINE_RESUME_COURSE_SELECTOR = '.outline-item .resume-right'

lms/static/sass/features/_course-outline.scss

@@ -21,7 +21,11 @@
       .section-name {
         @include margin(0, 0, ($baseline / 2), ($baseline / 2));
         padding: 0;
-        font-weight: bold;
+
+        h3 {
+          font-weight: bold;
+          margin: 0;
+        }
       }
 
       .outline-item {
@@ -37,10 +41,16 @@
           a.outline-item {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             padding: ($baseline / 2);
 
+            .subsection-title {
+              margin: 0;
+            }
+
             &:hover {
               background-color: palette(primary, x-back);
+              border-radius: $btn-border-radius;
             }
 
             .subsection-text {
@@ -61,6 +71,11 @@
 
           &.current {
             border: 1px solid $lms-active-color;
+            border-radius: $btn-border-radius;
+
+            .resume-right {
+              @include float(right);
+            }
           }
         }
       }

openedx/features/course_experience/templates/course_experience/course-home-fragment.html

@@ -5,6 +5,7 @@
 
 <%!
 import json
+from django.conf import settings
 from django.utils.translation import ugettext as _
 from django.template.defaultfilters import escapejs
 from django.core.urlresolvers import reverse
@@ -17,32 +18,39 @@ from openedx.core.djangolib.markup import HTML
 <%block name="content">
 <div class="course-view container" id="course-container">
     <header class="page-header has-secondary">
+        <div class="page-header-main">
+            <nav aria-label="${_('Course Outline')}" class="sr-is-focusable" tabindex="-1">
+                <h2 class="hd hd-2 page-title">${_('Course Outline')}</h2>
+            </nav>
+        </div>
         <div class="page-header-secondary">
             <div class="form-actions">
-                <a class="btn action-resume-course" href="${reverse('courseware', kwargs={'course_id': unicode(course.id.to_deprecated_string())})}">
+                <a class="btn action-show-bookmarks" href="${reverse('openedx.course_bookmarks.home', args=[course.id])}">
+                    ${_("Bookmarks")}
+                </a>
+                <a class="btn btn-brand action-resume-course" href="${reverse('courseware', kwargs={'course_id': unicode(course.id.to_deprecated_string())})}">
                     % if has_visited_course:
                         ${_("Resume Course")}
                     % else:
                         ${_("Start Course")}
                     % endif
                 </a>
-                <a class="btn action-show-bookmarks" href="${reverse('openedx.course_bookmarks.home', args=[course.id])}">
-                    ${_("Bookmarks")}
-                </a>
-            </div>
-            <div class="page-header-search">
-                <form class="search-form" role="search">
-                    <label class="field-label sr-only" for="search" id="search-hint">${_('Search the course')}</label>
-                    <input
-                            class="field-input input-text search-input"
-                            type="search"
-                            name="search"
-                            id="search"
-                            placeholder="${_('Search the course')}'"
-                    />
-                    <button class="btn btn-small search-btn" type="button">${_('Search')}</button>
-                </form>
             </div>
+            % if settings.FEATURES.get('ENABLE_COURSEWARE_SEARCH'):
+                <div class="page-header-search">
+                    <form class="search-form" role="search">
+                        <label class="field-label sr-only" for="search" id="search-hint">${_('Search the course')}</label>
+                        <input
+                                class="field-input input-text search-input"
+                                type="search"
+                                name="search"
+                                id="search"
+                                placeholder="${_('Search the course')}"
+                        />
+                        <button class="btn btn-small search-btn" type="button">${_('Search')}</button>
+                    </form>
+                </div>
+            % endif
         </div>
     </header>
     <div class="page-content">

openedx/features/course_experience/templates/course_experience/course-outline-fragment.html

@@ -12,7 +12,7 @@ from django.utils.translation import ugettext as _
     CourseOutlineFactory('.block-tree');
 </%static:require_module_async>
 
-<div class="course-outline" id="main" tabindex="-1">
+<main role="main" class="course-outline" id="main" tabindex="-1">
     <ol class="block-tree" role="tree">
         % for section in blocks.get('children') or []:
             <li
@@ -23,7 +23,7 @@ from django.utils.translation import ugettext as _
                 tabindex="0"
             >
                 <div class="section-name">
-                    <span>${ section['display_name'] }</span>
+                    <h3>${ section['display_name'] }</h3>
                 </div>
                 <ol class="outline-item focusable" role="group" tabindex="0">
                     % for subsection in section.get('children') or []:
@@ -120,7 +120,7 @@ from django.utils.translation import ugettext as _
             </li>
         % endfor
     </ol>
-</div>
+</main>
 
 <%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
     DateUtilFactory.transform('.localized-datetime');