Merge pull request #1265 from edx/gprice/forum-flag-a11y

Improve accessibility of forums flagging feature

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

@@ -4,7 +4,7 @@ if Backbone?
   
     events:
       "click .discussion-flag-abuse": "toggleFlagAbuse"
-  
+      "keypress .discussion-flag-abuse": "toggleFlagAbuseKeypress"
   
     attrRenderer:
       endorsed: (endorsed) ->
@@ -106,6 +106,10 @@ if Backbone?
       @model.bind('change', @renderPartialAttrs, @)
       
      
+    toggleFlagAbuseKeypress: (event) ->
+      # Activate on spacebar or enter
+      if event.which == 32 or event.which == 13
+        @toggleFlagAbuse(event)
      
     toggleFlagAbuse: (event) ->
       event.preventDefault()

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

@@ -4,6 +4,7 @@ if Backbone?
     events:
       "click .discussion-vote": "toggleVote"
       "click .discussion-flag-abuse": "toggleFlagAbuse"
+      "keypress .discussion-flag-abuse": "toggleFlagAbuseKeypress"
       "click .admin-pin": "togglePin"
       "click .action-follow": "toggleFollowing"
       "click .action-edit": "edit"
@@ -51,10 +52,12 @@ if Backbone?
       if window.user.id in @model.get("abuse_flaggers") or (DiscussionUtil.isFlagModerator and @model.get("abuse_flaggers").length > 0)
         @$("[data-role=thread-flag]").addClass("flagged")  
         @$("[data-role=thread-flag]").removeClass("notflagged")
+        @$(".discussion-flag-abuse").attr("aria-pressed", "true")
         @$(".discussion-flag-abuse .flag-label").html("Misuse Reported")
       else
         @$("[data-role=thread-flag]").removeClass("flagged")  
         @$("[data-role=thread-flag]").addClass("notflagged")      
+        @$(".discussion-flag-abuse").attr("aria-pressed", "false")
         @$(".discussion-flag-abuse .flag-label").html("Report Misuse")
 
     renderPinned: =>

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

 if Backbone?
   class @ResponseCommentShowView extends DiscussionContentView
 
-    events:
-      "click .discussion-flag-abuse": "toggleFlagAbuse"
-
     tagName: "li"
 
     initialize: ->
@@ -48,9 +45,15 @@ if Backbone?
       if window.user.id in @model.get("abuse_flaggers") or (DiscussionUtil.isFlagModerator and @model.get("abuse_flaggers").length > 0)
         @$("[data-role=thread-flag]").addClass("flagged")
         @$("[data-role=thread-flag]").removeClass("notflagged")
+        @$(".discussion-flag-abuse").attr("aria-pressed", "true")
+        @$(".discussion-flag-abuse").attr("data-tooltip", "Misuse Reported")
+        @$(".discussion-flag-abuse .flag-label").html("Misuse Reported")
       else
         @$("[data-role=thread-flag]").removeClass("flagged")
         @$("[data-role=thread-flag]").addClass("notflagged")
+        @$(".discussion-flag-abuse").attr("aria-pressed", "false")
+        @$(".discussion-flag-abuse").attr("data-tooltip", "Report Misuse")
+        @$(".discussion-flag-abuse .flag-label").html("Report Misuse")
 
     updateModelDetails: =>
       @renderFlagged()

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

@@ -6,6 +6,7 @@ if Backbone?
         "click .action-delete": "_delete"
         "click .action-edit": "edit"
         "click .discussion-flag-abuse": "toggleFlagAbuse"
+        "keypress .discussion-flag-abuse": "toggleFlagAbuseKeypress"
 
     $: (selector) ->
         @$el.find(selector)
@@ -104,10 +105,12 @@ if Backbone?
       if window.user.id in @model.get("abuse_flaggers") or (DiscussionUtil.isFlagModerator and @model.get("abuse_flaggers").length > 0)
         @$("[data-role=thread-flag]").addClass("flagged")  
         @$("[data-role=thread-flag]").removeClass("notflagged")
+        @$(".discussion-flag-abuse").attr("aria-pressed", "true")
         @$(".discussion-flag-abuse .flag-label").html("Misuse Reported")
       else
         @$("[data-role=thread-flag]").removeClass("flagged")  
         @$("[data-role=thread-flag]").addClass("notflagged")      
+        @$(".discussion-flag-abuse").attr("aria-pressed", "false")
         @$(".discussion-flag-abuse .flag-label").html("Report Misuse")   
         
     updateModelDetails: =>

lms/static/sass/_discussion.scss

@@ -2619,7 +2619,7 @@ body.discussion {
   width: 10px;
   height: 14px;
   padding-right: 3px;
-  color: #aeaeae;
+  color: #666;
 }
 
 .pinned .icon {
@@ -2633,14 +2633,14 @@ body.discussion {
 }
 
 .pinned span {
-  color: #B82066;
+  color: $pink;
   font-style: italic;
   //cursor change is here since pins are read-only for inline discussions.
   cursor: default;
 }
 
 .notpinned span {
-  color: #888;
+  color: #666;
   font-style: italic;
 }
 
@@ -2665,7 +2665,7 @@ display:none;
     
 .notflagged .icon {
   display: block;
-  color: #aeaeae;
+  color: #666;
   float: left;
   margin: 3px;
   width: 10px;
@@ -2676,7 +2676,6 @@ display:none;
 .flagged .icon
 {
   display: block;
-  color: #aeaeae;
   float: left;
   margin: 3px;
   width: 10px;
@@ -2686,11 +2685,11 @@ display:none;
 }
 
 .flagged span {
-  color: #B82066;
+  color: $pink;
   font-style: italic;
 }
 
 .notflagged span {
-  color: #888;
+  color: #666;
   font-style: italic;
 }

lms/templates/discussion/_underscore_templates.html

@@ -48,7 +48,7 @@
       </header>
 
       <div class="post-body">${'<%- body %>'}</div>
-      <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="Report Misuse">
+      <div class="discussion-flag-abuse notflagged" data-role="thread-flag" role="button" aria-pressed="false" tabindex="0">
       <i class="icon icon-flag"></i><span class="flag-label">${_("Report Misuse")}</span></div>
         
         
@@ -129,8 +129,8 @@
         <p class="posted-details" title="${'<%- created_at %>'}">${'<%- created_at %>'}</p>
     </header>
     <div class="response-local"><div class="response-body">${"<%- body %>"}</div>
-    <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="report misuse">                
-      <i class="icon icon-flag"></i><span class="flag-label">Report Misuse</span></div>
+    <div class="discussion-flag-abuse notflagged" data-role="thread-flag" role="button" aria-pressed="false" tabindex="0">
+      <i class="icon icon-flag"></i><span class="flag-label">${_("Report Misuse")}</span></div>
     </div>
     <ul class="moderator-actions response-local">
         <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> ${_("Edit")}</a></li>
@@ -154,8 +154,8 @@
 <script type="text/template" id="response-comment-show-template">
   <div id="comment_${'<%- id %>'}">
     <div class="response-body">${'<%- body %>'}</div>
-    <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="Report Misuse">                
-      <i class="icon icon-flag"></i><span class="flag-label"></span></div> 
+    <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="${_('Report Misuse')}" role="button" aria-pressed="false" tabindex="0">
+      <i class="icon icon-flag"></i><span class="sr flag-label">${_("Report Misuse")}</span></div>
     <p class="posted-details">&ndash;posted <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span> by
         ${"<% if (obj.username) { %>"}
         <a href="${'<%- user_url %>'}" class="profile-link">${'<%- username %>'}</a>