Improve accessibility of forum follow buttons

They now include screen reader-friendly text, have the ARIA checkbox
role, activate on keypress (for space or enter), and occur in the DOM
after the header information (title, etc.)

CHANGELOG.rst

@@ -11,6 +11,8 @@ it pauses on the end time.
 
 Blades: Disallow users to enter video url's in http.
 
+LMS: Improve the acessibility of the forum follow post buttons.
+
 Blades: Fix bug when the speed can only be changed when the video is playing.
 
 LMS: Change bulk email implementation to use less memory, and to better handle

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

@@ -37,9 +37,9 @@ if Backbone?
 
       subscribed: (subscribed) ->
         if subscribed
-          @$(".dogear").addClass("is-followed")
+          @$(".dogear").addClass("is-followed").attr("aria-checked", "true")
         else
-          @$(".dogear").removeClass("is-followed")
+          @$(".dogear").removeClass("is-followed").attr("aria-checked", "false")
 
       ability: (ability) ->
         for action, selector of @abilityRenderer
@@ -106,6 +106,26 @@ 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)
+      url = null
+      if not @model.get('subscribed')
+        @model.follow()
+        url = @model.urlFor("follow")
+      else
+        @model.unfollow()
+        url = @model.urlFor("unfollow")
+      DiscussionUtil.safeAjax
+        $elem: $elem
+        url: url
+        type: "POST"
+
     toggleFlagAbuseKeypress: (event) ->
       # Activate on spacebar or enter
       if event.which == 32 or event.which == 13

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

@@ -4,6 +4,7 @@ if Backbone?
     events:
       "click .discussion-vote": "toggleVote"
       "click .action-follow": "toggleFollowing"
+      "keypress .action-follow": "toggleFollowingKeypress"
       "click .expand-post": "expandPost"
       "click .collapse-post": "collapsePost"
 
@@ -25,7 +26,6 @@ if Backbone?
       @$el.html(Mustache.render(@template, params))
       @initLocal()
       @delegateEvents()
-      @renderDogear()
       @renderVoted()
       @renderAttrs()
       @$("span.timeago").timeago()
@@ -34,10 +34,6 @@ if Backbone?
         @renderResponses()
       @
 
-    renderDogear: ->
-      if window.user.following(@model)
-        @$(".dogear").addClass("is-followed")
-
     renderVoted: =>
       if window.user.voted(@model)
         @$("[data-role=discussion-vote]").addClass("is-cast")
@@ -81,20 +77,6 @@ if Backbone?
       else
         @vote()
 
-    toggleFollowing: (event) ->
-      $elem = $(event.target)
-      url = null
-      if not @model.get('subscribed')
-        @model.follow()
-        url = @model.urlFor("follow")
-      else
-        @model.unfollow()
-        url = @model.urlFor("unfollow")
-      DiscussionUtil.safeAjax
-        $elem: $elem
-        url: url
-        type: "POST"
-
     vote: ->
       window.user.vote(@model)
       url = @model.urlFor("upvote")

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

@@ -7,6 +7,7 @@ if Backbone?
       "keypress .discussion-flag-abuse": "toggleFlagAbuseKeypress"
       "click .admin-pin": "togglePin"
       "click .action-follow": "toggleFollowing"
+      "keypress .action-follow": "toggleFollowingKeypress"
       "click .action-edit": "edit"
       "click .action-delete": "_delete"
       "click .action-openclose": "toggleClosed"
@@ -25,7 +26,6 @@ if Backbone?
     render: ->
       @$el.html(@renderTemplate())
       @delegateEvents()
-      @renderDogear()
       @renderVoted()
       @renderFlagged()
       @renderPinned()
@@ -36,10 +36,6 @@ if Backbone?
       @highlight @$("h1,h3")
       @
 
-    renderDogear: ->
-      if window.user.following(@model)
-        @$(".dogear").addClass("is-followed")
-
     renderVoted: =>
       if window.user.voted(@model)
         @$("[data-role=discussion-vote]").addClass("is-cast")
@@ -94,20 +90,6 @@ if Backbone?
       else
         @vote()
 
-    toggleFollowing: (event) ->
-      $elem = $(event.target)
-      url = null
-      if not @model.get('subscribed')
-        @model.follow()
-        url = @model.urlFor("follow")
-      else
-        @model.unfollow()
-        url = @model.urlFor("unfollow")
-      DiscussionUtil.safeAjax
-        $elem: $elem
-        url: url
-        type: "POST"
-
     vote: ->
       window.user.vote(@model)
       url = @model.urlFor("upvote")

lms/templates/discussion/_underscore_templates.html

@@ -26,7 +26,6 @@
 
 <script type="text/template" id="thread-show-template">
   <div class="discussion-post">
-      <div><a href="javascript:void(0)" class="dogear action-follow" data-tooltip="follow"></a></div>
       <header>
       ${"<% if (obj.group_id) { %>"}
       <div class="group-visibility-label">${"<%- obj.group_string%>"}</div>
@@ -45,6 +44,9 @@
                 ${_("&bull; This thread is closed.")}
               </span>
           </p>
+          <a href="javascript:void(0)" class="dogear action-follow" data-tooltip="follow" role="checkbox" aria-checked="false">
+            <span class="sr">${_("Follow this post")}</span>
+          </a>
       </header>
 
       <div class="post-body">${'<%- body %>'}</div>