Outline will only show section and subsection, not unit

lms/envs/common.py

@@ -1736,6 +1736,7 @@ REQUIRE_JS_PATH_OVERRIDES = {
     'js/student_account/logistration_factory': 'js/student_account/logistration_factory.js',
     'js/student_profile/views/learner_profile_factory': 'js/student_profile/views/learner_profile_factory.js',
     'js/courseware/courseware_factory': 'js/courseware/courseware_factory.js',
+    'js/courseware/course_outline_factory': 'js/courseware/course_outline_factory.js',
     'js/groups/views/cohorts_dashboard_factory': 'js/groups/views/cohorts_dashboard_factory.js',
     'draggabilly': 'js/vendor/draggabilly.js'
 }

lms/static/js/courseware/course_outline_factory.js

+(function(define) {
+    'use strict';
+
+    define([
+        'jquery',
+        'edx-ui-toolkit/js/utils/constants'
+    ],
+        function($, constants) {
+            return function(root) {
+                // In the future this factory could instantiate a Backbone view or React component that handles events
+                $(root).keydown(function(event) {
+                    var $focusable = $('.outline-item.focusable'),
+                        currentFocusIndex = $.inArray(event.target, $focusable);
+
+                    switch (event.keyCode) {  // eslint-disable-line default-case
+                    case constants.keyCodes.down:
+                        event.preventDefault();
+                        $focusable.eq(Math.min(currentFocusIndex + 1, $focusable.length - 1)).focus();
+                        break;
+                    case constants.keyCodes.up:
+                        event.preventDefault();
+                        $focusable.eq(Math.max(currentFocusIndex - 1, 0)).focus();
+                        break;
+                    }
+                });
+            };
+        }
+    );
+}).call(this, define || RequireJS.define);

lms/templates/courseware/course-outline.html

@@ -3,23 +3,20 @@
 <%namespace name='static' file='../static_content.html'/>
 
 <%!
-import json
-import pprint
 from django.utils.translation import ugettext as _
 %>
 
-<section class="course-outline" id="course-outline">
-    <ul>
-        % for unit in blocks.get('children') or []:
-            <li>${ unit['display_name'] }</li>
-            <ul>
-                % for section in unit.get('children') or []:
-                    <li>${ section['display_name'] }</li>
-                    <ul>
-                        % for subsection in section.get('children') or []:
-                            <li>${ subsection['display_name'] }</li>
-                        % endfor
-                    </ul>
+<%static:require_module_async module_name="js/courseware/course_outline_factory" class_name="CourseOutlineFactory">
+    CourseOutlineFactory('.block-tree');
+</%static:require_module_async>
+
+<section class="course-outline" id="main">
+    <ul class="block-tree" role="tree">
+        % for section in blocks.get('children') or []:
+            <li class="outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">${ section['display_name'] }</li>
+            <ul class="outline-item focusable" role="group" tabindex="0">
+                % for subsection in section.get('children') or []:
+                    <li class="outline-item focusable" role="treeitem" tabindex="0" aria-expanded="true">${ subsection['display_name'] }</li>
                 % endfor
             </ul>
         % endfor

requirements/edx/base.txt

@@ -111,7 +111,9 @@ django-ratelimit-backend==1.0
 unicodecsv==0.9.4
 django-require==1.0.11
 pyuca==1.1
+web-fragments==0.1.0
 wrapt==1.10.5
+XBlock==0.4.14
 zendesk==1.1.1
 
 # This needs to be installed *after* Cython, which is in pre.txt