Improve accessibility of forum vote buttons

This change involves substantial refactoring of the relevant code to reduce duplication. It also makes the templates for the vote buttons more consistent and cleaner. JIRA: FOR-64
2014-01-06 16:10:48 -05:00
parent d4f7cd68d8
commit b7d7751dc2
14 changed files with 331 additions and 150 deletions
--- a/common/static/coffee/src/discussion/content.coffee
+++ b/common/static/coffee/src/discussion/content.coffee
@@ -99,6 +99,13 @@ if Backbone?
      @get("abuse_flaggers").pop(window.user.get('id'))
      @trigger "change", @

+    vote: ->
+      @get("votes")["up_count"] = parseInt(@get("votes")["up_count"]) + 1
+      @trigger "change", @
+
+    unvote: ->
+      @get("votes")["up_count"] = parseInt(@get("votes")["up_count"]) - 1
+      @trigger "change", @
    
  class @Thread extends @Content
    urlMappers:
@@ -130,14 +137,6 @@ if Backbone?
    unfollow: ->
      @set('subscribed', false)

-    vote: ->
-      @get("votes")["up_count"] = parseInt(@get("votes")["up_count"]) + 1
-      @trigger "change", @
-
-    unvote: ->
-      @get("votes")["up_count"] = parseInt(@get("votes")["up_count"]) - 1
-      @trigger "change", @
-
    display_body: ->
      if @has("highlighted_body")
        String(@get("highlighted_body")).replace(/<highlight>/g, '<mark>').replace(/<\/highlight>/g, '</mark>')
--- a/common/static/coffee/src/discussion/utils.coffee
+++ b/common/static/coffee/src/discussion/utils.coffee
@@ -91,7 +91,7 @@ class @DiscussionUtil

  @activateOnEnter: (event, func) ->
    if event.which == 13
-      e.preventDefault()
+      event.preventDefault()
      func(event)

  @makeFocusTrap: (elem) ->
--- a/common/static/coffee/src/discussion/views/discussion_content_view.coffee
+++ b/common/static/coffee/src/discussion/views/discussion_content_view.coffee
@@ -159,3 +159,42 @@ if Backbone?
                temp_array = []

            @model.set('abuse_flaggers', temp_array)         
+
+    renderVote: =>
+      button = @$el.find(".vote-btn")
+      voted = window.user.voted(@model)
+      voteNum = @model.get("votes")["up_count"]
+      button.toggleClass("is-cast", voted)
+      button.attr("aria-pressed", voted)
+      button.attr("data-tooltip", if voted then "remove vote" else "vote")
+      button.find(".votes-count-number").html(voteNum)
+      button.find(".sr").html(if voted then "votes (click to remove your vote)" else "votes (click to vote)")
+
+    toggleVote: (event) =>
+      event.preventDefault()
+      if window.user.voted(@model)
+        @unvote()
+      else
+        @vote()
+
+    vote: =>
+      window.user.vote(@model)
+      url = @model.urlFor("upvote")
+      DiscussionUtil.safeAjax
+        $elem: @$el.find(".vote-btn")
+        url: url
+        type: "POST"
+        success: (response, textStatus) =>
+          if textStatus == 'success'
+            @model.set(response)
+
+    unvote: =>
+      window.user.unvote(@model)
+      url = @model.urlFor("unvote")
+      DiscussionUtil.safeAjax
+        $elem: @$el.find(".vote-btn")
+        url: url
+        type: "POST"
+        success: (response, textStatus) =>
+          if textStatus == 'success'
+            @model.set(response)
--- a/common/static/coffee/src/discussion/views/discussion_thread_profile_view.coffee
+++ b/common/static/coffee/src/discussion/views/discussion_thread_profile_view.coffee
@@ -2,7 +2,10 @@ if Backbone?
  class @DiscussionThreadProfileView extends DiscussionContentView
    expanded = false
    events:
-      "click .discussion-vote": "toggleVote"
+      "click .vote-btn":
+        (event) -> @toggleVote(event)
+      "keydown .vote-btn":
+        (event) -> DiscussionUtil.activateOnEnter(event, @toggleVote)
      "click .action-follow": "toggleFollowing"
      "keypress .action-follow":
        (event) -> DiscussionUtil.activateOnEnter(event, toggleFollowing)
@@ -27,7 +30,7 @@ if Backbone?
      @$el.html(Mustache.render(@template, params))
      @initLocal()
      @delegateEvents()
-      @renderVoted()
+      @renderVote()
      @renderAttrs()
      @$("span.timeago").timeago()
      @convertMath()
@@ -35,15 +38,8 @@ if Backbone?
        @renderResponses()
      @

-    renderVoted: =>
-      if window.user.voted(@model)
-        @$("[data-role=discussion-vote]").addClass("is-cast")
-      else
-        @$("[data-role=discussion-vote]").removeClass("is-cast")
-
    updateModelDetails: =>
-      @renderVoted()
-      @$("[data-role=discussion-vote] .votes-count-number").html(@model.get("votes")["up_count"])
+      @renderVote()

    convertMath: ->
      element = @$(".post-body")
@@ -71,35 +67,6 @@ if Backbone?
    addComment: =>
      @model.comment()

-    toggleVote: (event) ->
-      event.preventDefault()
-      if window.user.voted(@model)
-        @unvote()
-      else
-        @vote()
-
-    vote: ->
-      window.user.vote(@model)
-      url = @model.urlFor("upvote")
-      DiscussionUtil.safeAjax
-        $elem: @$(".discussion-vote")
-        url: url
-        type: "POST"
-        success: (response, textStatus) =>
-          if textStatus == 'success'
-            @model.set(response)
-
-    unvote: ->
-      window.user.unvote(@model)
-      url = @model.urlFor("unvote")
-      DiscussionUtil.safeAjax
-        $elem: @$(".discussion-vote")
-        url: url
-        type: "POST"
-        success: (response, textStatus) =>
-          if textStatus == 'success'
-            @model.set(response)
-
    edit: ->

    abbreviateBody: ->
--- a/common/static/coffee/src/discussion/views/discussion_thread_show_view.coffee
+++ b/common/static/coffee/src/discussion/views/discussion_thread_show_view.coffee
@@ -2,7 +2,10 @@ if Backbone?
  class @DiscussionThreadShowView extends DiscussionContentView

    events:
-      "click .discussion-vote": "toggleVote"
+      "click .vote-btn":
+        (event) -> @toggleVote(event)
+      "keydown .vote-btn":
+        (event) -> DiscussionUtil.activateOnEnter(event, @toggleVote)
      "click .discussion-flag-abuse": "toggleFlagAbuse"
      "keypress .discussion-flag-abuse":
        (event) -> DiscussionUtil.activateOnEnter(event, toggleFlagAbuse)
@@ -28,7 +31,7 @@ if Backbone?
    render: ->
      @$el.html(@renderTemplate())
      @delegateEvents()
-      @renderVoted()
+      @renderVote()
      @renderFlagged()
      @renderPinned()
      @renderAttrs()
@@ -38,14 +41,6 @@ if Backbone?
      @highlight @$("h1,h3")
      @

-    renderVoted: =>
-      if window.user.voted(@model)
-        @$("[data-role=discussion-vote]").addClass("is-cast")
-        @$("[data-role=discussion-vote] span.sr").html("votes (click to remove your vote)")
-      else
-        @$("[data-role=discussion-vote]").removeClass("is-cast")
-        @$("[data-role=discussion-vote] span.sr").html("votes (click to vote)")
-        
    renderFlagged: =>
      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")  
@@ -70,52 +65,15 @@ if Backbone?


    updateModelDetails: =>
-      @renderVoted()
+      @renderVote()
      @renderFlagged()
      @renderPinned()
-      @$("[data-role=discussion-vote] .votes-count-number").html(@model.get("votes")["up_count"] + '<span class ="sr"></span>')
-      if window.user.voted(@model)
-        @$("[data-role=discussion-vote] .votes-count-number span.sr").html("votes (click to remove your vote)")
-      else
-        @$("[data-role=discussion-vote] .votes-count-number span.sr").html("votes (click to vote)")
-

    convertMath: ->
      element = @$(".post-body")
      element.html DiscussionUtil.postMathJaxProcessor DiscussionUtil.markdownWithHighlight element.text()
      MathJax.Hub.Queue ["Typeset", MathJax.Hub, element[0]]

-    toggleVote: (event) ->
-      event.preventDefault()
-      if window.user.voted(@model)
-        @unvote()
-      else
-        @vote()
-
-    vote: ->
-      window.user.vote(@model)
-      url = @model.urlFor("upvote")
-      DiscussionUtil.safeAjax
-        $elem: @$(".discussion-vote")
-        url: url
-        type: "POST"
-        success: (response, textStatus) =>
-          if textStatus == 'success'
-            @model.set(response, {silent: true})
-
-
-    unvote: ->
-      window.user.unvote(@model)
-      url = @model.urlFor("unvote")
-      DiscussionUtil.safeAjax
-        $elem: @$(".discussion-vote")
-        url: url
-        type: "POST"
-        success: (response, textStatus) =>
-          if textStatus == 'success'
-            @model.set(response, {silent: true})
-
-
    edit: (event) ->
      @trigger "thread:edit", event

--- a/common/static/coffee/src/discussion/views/thread_response_show_view.coffee
+++ b/common/static/coffee/src/discussion/views/thread_response_show_view.coffee
@@ -1,7 +1,10 @@
 if Backbone?
  class @ThreadResponseShowView extends DiscussionContentView
    events:
-        "click .vote-btn": "toggleVote"
+        "click .vote-btn":
+          (event) -> @toggleVote(event)
+        "keydown .vote-btn":
+          (event) -> DiscussionUtil.activateOnEnter(event, @toggleVote)
        "click .action-endorse": "toggleEndorse"
        "click .action-delete": "_delete"
        "click .action-edit": "edit"
@@ -23,9 +26,7 @@ if Backbone?
    render: ->
      @$el.html(@renderTemplate())
      @delegateEvents()
-      if window.user.voted(@model)
-        @$(".vote-btn").addClass("is-cast")
-        @$(".vote-btn span.sr").html("votes (click to remove your vote)")
+      @renderVote()
      @renderAttrs()
      @renderFlagged()
      @$el.find(".posted-details").timeago()
@@ -46,39 +47,6 @@ if Backbone?
        @$el.addClass("community-ta")
        @$el.prepend('<div class="community-ta-banner">Community TA</div>')

-    toggleVote: (event) ->
-      event.preventDefault()
-      @$(".vote-btn").toggleClass("is-cast")
-      if @$(".vote-btn").hasClass("is-cast")
-        @vote()
-        @$(".vote-btn span.sr").html("votes (click to remove your vote)")
-      else
-        @unvote()
-        @$(".vote-btn span.sr").html("votes (click to vote)")
-
-    vote: ->
-      url = @model.urlFor("upvote")
-      @$(".votes-count-number").html((parseInt(@$(".votes-count-number").html()) + 1) + '<span class="sr"></span>')
-      DiscussionUtil.safeAjax
-        $elem: @$(".discussion-vote")
-        url: url
-        type: "POST"
-        success: (response, textStatus) =>
-          if textStatus == 'success'
-            @model.set(response)
-
-    unvote: ->
-      url = @model.urlFor("unvote")
-      @$(".votes-count-number").html((parseInt(@$(".votes-count-number").html()) - 1)+'<span class="sr"></span>')
-      DiscussionUtil.safeAjax
-        $elem: @$(".discussion-vote")
-        url: url
-        type: "POST"
-        success: (response, textStatus) =>
-          if textStatus == 'success'
-            @model.set(response)
-            
-
    edit: (event) ->
        @trigger "response:edit", event

@@ -115,4 +83,5 @@ if Backbone?
        @$(".discussion-flag-abuse .flag-label").html("Report Misuse")   
        
    updateModelDetails: =>
+      @renderVote()
      @renderFlagged()