Add focus trap on forum navigation thread loading

For accessibility purposes, it is bad to allow a user to initiate
loading of additional threads in the navigation sidebar and then shift
focus away from the sidebar, only to have focus snap back when the
additional threads are loaded. Now, we trap focus on the loading element
as recommended by our accessibility consultant.

JIRA: FOR-238

CHANGELOG.rst

@@ -5,6 +5,9 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+LMS: Trap focus on the loading element when a user loads more threads
+in the forum sidebar to improve accessibility.
+
 LMS: Add error recovery when a user loads more threads in the forum sidebar.
 
 LMS: Add a user-visible alert modal when a forums AJAX request fails.

common/static/coffee/src/discussion/utils.coffee

@@ -87,6 +87,13 @@ class @DiscussionUtil
       "notifications_status" : "/notification_prefs/status"
     }[name]
 
+  @makeFocusTrap: (elem) ->
+    elem.keydown(
+      (event) ->
+        if event.which == 9 # Tab
+          event.preventDefault()
+    )
+
   @discussionAlert: (header, body) ->
     if $("#discussion-alert").length == 0
       alertDiv = $("<div class='modal' role='alertdialog' id='discussion-alert' aria-describedby='discussion-alert-message'/>").css("display", "none")
@@ -99,12 +106,7 @@ class @DiscussionUtil
         "  <button class='dismiss'>OK</button>" +
         "</div>"
       )
-      # Capture focus
-      alertDiv.find("button").keydown(
-        (event) ->
-          if event.which == 9 # Tab
-            event.preventDefault()
-      )
+      @makeFocusTrap(alertDiv.find("button"))
       alertTrigger = $("<a href='#discussion-alert' id='discussion-alert-trigger'/>").css("display", "none")
       alertTrigger.leanModal({closeButton: "#discussion-alert .dismiss", overlay: 1, top: 200})
       $("body").append(alertDiv).append(alertTrigger)

common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee

@@ -124,8 +124,11 @@ if Backbone?
     loadMorePages: (event) ->
       if event
         event.preventDefault()
-      @$(".more-pages").html('<div class="loading-animation"><span class="sr">Loading more threads</span></div>')
+      @$(".more-pages").html('<div class="loading-animation" tabindex=0><span class="sr" role="alert">Loading more threads</span></div>')
       @$(".more-pages").addClass("loading")
+      loadingDiv = @$(".more-pages .loading-animation")
+      DiscussionUtil.makeFocusTrap(loadingDiv)
+      loadingDiv.focus()
       options = {}
       switch @mode
         when 'search'