Skip to content

Improve accessibility of forum follow buttons #1553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gwprice merged 1 commit into from
Nov 1, 2013
Merged

Improve accessibility of forum follow buttons #1553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
24 changes: 22 additions & 2 deletions common/static/coffee/src/discussion/views/discussion_content_view.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -106,6 +106,26 @@ if Backbone?
@model.bind('change', @renderPartialAttrs, @)


toggleFollowingKeypress: (event) ->
# Activate on spacebar or enter

@adampalay adampalay Oct 31, 2013

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you need to call event.preventDefault()? (like for spacebar not to scroll down the page)

@gwprice gwprice Oct 31, 2013

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

toggleFollowing calls preventDefault

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
Expand Down
20 changes: 1 addition & 19 deletions common/static/coffee/src/discussion/views/discussion_thread_profile_view.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand All @@ -25,7 +26,6 @@ if Backbone?
@$el.html(Mustache.render(@template, params))
@initLocal()
@delegateEvents()
@renderDogear()
@renderVoted()
@renderAttrs()
@$("span.timeago").timeago()
Expand All @@ -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")
Expand Down Expand Up @@ -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")
Expand Down
20 changes: 1 addition & 19 deletions common/static/coffee/src/discussion/views/discussion_thread_show_view.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -25,7 +26,6 @@ if Backbone?
render: ->
@$el.html(@renderTemplate())
@delegateEvents()
@renderDogear()
@renderVoted()
@renderFlagged()
@renderPinned()
Expand All @@ -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")
Expand Down Expand Up @@ -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")
Expand Down
4 changes: 3 additions & 1 deletion lms/templates/discussion/_underscore_templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ <h4>${_("Post a response:")}</h4>

<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>
Expand All @@ -45,6 +44,9 @@ <h1>${'<%- title %>'}</h1>
${_("&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>
Expand Down