Merge pull request #1707 from edx/gprice/forum-thread-list-focus-trap

Add error recovery and focus trap to thread loading in forum sidebar

CHANGELOG.rst

@@ -5,6 +5,11 @@ 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.
 
 Blades: Add template for checkboxes response to studio. BLD-193.

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

@@ -25,9 +25,8 @@ if Backbone?
         @add model
         model
 
-    retrieveAnotherPage: (mode, options={}, sort_options={})->
-      @current_page += 1
-      data = { page: @current_page }
+    retrieveAnotherPage: (mode, options={}, sort_options={}, error=null)->
+      data = { page: @current_page + 1 }
       switch mode
         when 'search'
           url = DiscussionUtil.urlFor 'search'
@@ -59,6 +58,7 @@ if Backbone?
           @reset new_collection
           @pages = response.num_pages
           @current_page = response.page
+        error: error
 
     sortByDate: (thread) ->
         #   

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'
@@ -156,7 +159,11 @@ if Backbone?
           $(".post-list a").first()?.focus()
         )
 
-      @collection.retrieveAnotherPage(@mode, options, {sort_key: @sortBy})
+      error = =>
+        @renderThreads()
+        DiscussionUtil.discussionAlert("Sorry", "We had some trouble loading more threads. Please try again.")
+
+      @collection.retrieveAnotherPage(@mode, options, {sort_key: @sortBy}, error)
 
     renderThread: (thread) =>
       content = $(_.template($("#thread-list-item-template").html())(thread.toJSON()))