Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve accessibility of forums flagging feature

Browse Source 
The "Report Misuse" div is now focusable, responds to keyboard input,
and has appropriate attributes to indicate that it is a toggle button.
This fixes FOR-201 and FOR-209.
This commit is contained in:
Greg Price
2013-10-08 16:05:24 -04:00
parent 30dc441807
commit 69859cff5b
5 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
common/static/coffee/src/discussion/views/discussion_content_view.coffee
View File

@@ -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()

3
common/static/coffee/src/discussion/views/discussion_thread_show_view.coffee
View File

@@ -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: =>

9
common/static/coffee/src/discussion/views/response_comment_show_view.coffee
View File

@@ -1,9 +1,6 @@
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()

3
common/static/coffee/src/discussion/views/thread_response_show_view.coffee
View File

@@ -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: =>