Improve accessibility of inline discussions

The show/hide toggle now properly acts like a button, and focus is now
trapped on the loading element for both the show/hide action and loading
of a new page.

CHANGELOG.rst

@@ -20,6 +20,8 @@ Studio: Continued modification of Studio pages to follow a RESTful framework.
 includes Settings pages, edit page for Subsection and Unit, and interfaces
 for updating xblocks (xmodules) and getting their editing HTML.
 
+LMS: Improve accessibility of inline discussions in courseware.
+
 Blades: Put 2nd "Hide output" button at top of test box & increase text size for
 code response questions. BLD-126.
 

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

@@ -2,6 +2,8 @@ if Backbone?
   class @DiscussionModuleView extends Backbone.View
     events:
       "click .discussion-show": "toggleDiscussion"
+      "keypress .discussion-show":
+        (event) -> DiscussionUtil.activateOnEnter(event, toggleDiscussion)
       "click .new-post-btn": "toggleNewPost"
       "click .new-post-cancel": "hideNewPost"
       "click .discussion-paginator a": "navigateToPage"
@@ -70,13 +72,15 @@ if Backbone?
       DiscussionUtil.safeAjax
         $elem: $elem
         $loading: $elem
+        takeFocus: true
         url: url
         type: "GET"
         dataType: 'json'
         success: (response, textStatus, jqXHR) => @renderDiscussion($elem, response, textStatus, discussionId)
         error: error
 
     renderDiscussion: ($elem, response, textStatus, discussionId) =>
+      $elem.focus()
       window.user = new DiscussionUser(response.user_info)
       Content.loadContentInfos(response.annotated_content_info)
       DiscussionUtil.loadRoles(response.roles)

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

@@ -2,9 +2,12 @@ $ ->
   if !window.$$contents
     window.$$contents = {}
   $.fn.extend
-    loading: ->
-      @$_loading = $("<div class='loading-animation'><span class='sr'>Loading content</span></div>")
+    loading: (takeFocus) ->
+      @$_loading = $("<div class='loading-animation' tabindex='0'><span class='sr'>Loading content</span></div>")
       $(this).after(@$_loading)
+      if takeFocus
+        DiscussionUtil.makeFocusTrap(@$_loading)
+        @$_loading.focus()
     loaded: ->
       @$_loading.remove()
 
@@ -132,7 +135,7 @@ class @DiscussionUtil
         if params["loadingCallback"]?
           params["loadingCallback"].apply(params["$loading"])
         else
-          params["$loading"].loading()
+          params["$loading"].loading(params["takeFocus"])
     if !params["error"]
       params["error"] = =>
         @discussionAlert(

lms/templates/discussion/_discussion_module.html

@@ -2,6 +2,6 @@
 <%include file="_underscore_templates.html" />
 
 <div class="discussion-module" data-discussion-id="${discussion_id | h}">
-    <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
+    <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}" role="button"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
     <a href="#" class="new-post-btn"><span class="icon icon-edit new-post-icon"></span>${_("New Post")}</a>    
 </div>