Merge pull request #1765 from edx/gprice/inline-discussion-a11y

Improve accessibility of inline discussions

CHANGELOG.rst

@@ -27,6 +27,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,6 +72,7 @@ if Backbone?
       DiscussionUtil.safeAjax
         $elem: $elem
         $loading: $elem
+        takeFocus: true
         url: url
         type: "GET"
         dataType: 'json'
@@ -77,6 +80,7 @@ if Backbone?
         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()
 
@@ -87,6 +90,11 @@ class @DiscussionUtil
       "notifications_status" : "/notification_prefs/status"
     }[name]
 
+  @activateOnEnter: (event, func) ->
+    if event.which == 13
+      e.preventDefault()
+      func(event)
+
   @makeFocusTrap: (elem) ->
     elem.keydown(
       (event) ->
@@ -127,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(

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

@@ -4,7 +4,8 @@ if Backbone?
   
     events:
       "click .discussion-flag-abuse": "toggleFlagAbuse"
-      "keypress .discussion-flag-abuse": "toggleFlagAbuseKeypress"
+      "keypress .discussion-flag-abuse":
+        (event) -> DiscussionUtil.activateOnEnter(event, toggleFlagAbuse)
   
     attrRenderer:
       endorsed: (endorsed) ->
@@ -106,11 +107,6 @@ if Backbone?
       @model.bind('change', @renderPartialAttrs, @)
       
      
-    toggleFollowingKeypress: (event) ->
-      # Activate on spacebar or enter
-      if event.which == 32 or event.which == 13
-        @toggleFollowing(event)
-
     toggleFollowing: (event) ->
       event.preventDefault()
       $elem = $(event.target)
@@ -126,11 +122,6 @@ if Backbone?
         url: url
         type: "POST"
 
-    toggleFlagAbuseKeypress: (event) ->
-      # Activate on spacebar or enter
-      if event.which == 32 or event.which == 13
-        @toggleFlagAbuse(event)
-     
     toggleFlagAbuse: (event) ->
       event.preventDefault()
       if window.user.id in @model.get("abuse_flaggers") or (DiscussionUtil.isFlagModerator and @model.get("abuse_flaggers").length > 0)

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

@@ -4,7 +4,8 @@ if Backbone?
     events:
       "click .discussion-vote": "toggleVote"
       "click .action-follow": "toggleFollowing"
-      "keypress .action-follow": "toggleFollowingKeypress"
+      "keypress .action-follow":
+        (event) -> DiscussionUtil.activateOnEnter(event, toggleFollowing)
       "click .expand-post": "expandPost"
       "click .collapse-post": "collapsePost"
 

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

@@ -4,10 +4,12 @@ if Backbone?
     events:
       "click .discussion-vote": "toggleVote"
       "click .discussion-flag-abuse": "toggleFlagAbuse"
-      "keypress .discussion-flag-abuse": "toggleFlagAbuseKeypress"
+      "keypress .discussion-flag-abuse":
+        (event) -> DiscussionUtil.activateOnEnter(event, toggleFlagAbuse)
       "click .admin-pin": "togglePin"
       "click .action-follow": "toggleFollowing"
-      "keypress .action-follow": "toggleFollowingKeypress"
+      "keypress .action-follow":
+        (event) -> DiscussionUtil.activateOnEnter(event, toggleFollowing)
       "click .action-edit": "edit"
       "click .action-delete": "_delete"
       "click .action-openclose": "toggleClosed"

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

@@ -6,7 +6,8 @@ if Backbone?
         "click .action-delete": "_delete"
         "click .action-edit": "edit"
         "click .discussion-flag-abuse": "toggleFlagAbuse"
-        "keypress .discussion-flag-abuse": "toggleFlagAbuseKeypress"
+        "keypress .discussion-flag-abuse":
+          (event) -> DiscussionUtil.activateOnEnter(event, toggleFlagAbuse)
 
     $: (selector) ->
         @$el.find(selector)

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>