From 81798dd8be9f72f2ab7f61f9aa2526320a6a5ce7 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Fri, 22 Nov 2013 17:50:39 -0500
Subject: [PATCH] Improve accessibility of inline discussions
The show/hide toggle now properly acts like a button, and focus is now
trapped on the loading element for both the show/hide action and loading
of a new page.
---
CHANGELOG.rst | 2 ++
.../coffee/src/discussion/discussion_module_view.coffee | 4 ++++
common/static/coffee/src/discussion/utils.coffee | 9 ++++++---
lms/templates/discussion/_discussion_module.html | 2 +-
4 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 8e2ff9f8962..a9926ad9e62 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -20,6 +20,8 @@ Studio: Continued modification of Studio pages to follow a RESTful framework.
includes Settings pages, edit page for Subsection and Unit, and interfaces
for updating xblocks (xmodules) and getting their editing HTML.
+LMS: Improve accessibility of inline discussions in courseware.
+
Blades: Put 2nd "Hide output" button at top of test box & increase text size for
code response questions. BLD-126.
diff --git a/common/static/coffee/src/discussion/discussion_module_view.coffee b/common/static/coffee/src/discussion/discussion_module_view.coffee
index f99eba3872e..e23215561e8 100644
--- a/common/static/coffee/src/discussion/discussion_module_view.coffee
+++ b/common/static/coffee/src/discussion/discussion_module_view.coffee
@@ -2,6 +2,8 @@ if Backbone?
class @DiscussionModuleView extends Backbone.View
events:
"click .discussion-show": "toggleDiscussion"
+ "keypress .discussion-show":
+ (event) -> DiscussionUtil.activateOnEnter(event, toggleDiscussion)
"click .new-post-btn": "toggleNewPost"
"click .new-post-cancel": "hideNewPost"
"click .discussion-paginator a": "navigateToPage"
@@ -70,6 +72,7 @@ if Backbone?
DiscussionUtil.safeAjax
$elem: $elem
$loading: $elem
+ takeFocus: true
url: url
type: "GET"
dataType: 'json'
@@ -77,6 +80,7 @@ if Backbone?
error: error
renderDiscussion: ($elem, response, textStatus, discussionId) =>
+ $elem.focus()
window.user = new DiscussionUser(response.user_info)
Content.loadContentInfos(response.annotated_content_info)
DiscussionUtil.loadRoles(response.roles)
diff --git a/common/static/coffee/src/discussion/utils.coffee b/common/static/coffee/src/discussion/utils.coffee
index 53509b35e0f..466beff4191 100644
--- a/common/static/coffee/src/discussion/utils.coffee
+++ b/common/static/coffee/src/discussion/utils.coffee
@@ -2,9 +2,12 @@ $ ->
if !window.$$contents
window.$$contents = {}
$.fn.extend
- loading: ->
- @$_loading = $("<div class='loading-animation'><span class='sr'>Loading content</span></div>")
+ loading: (takeFocus) ->
+ @$_loading = $("<div class='loading-animation' tabindex='0'><span class='sr'>Loading content</span></div>")
$(this).after(@$_loading)
+ if takeFocus
+ DiscussionUtil.makeFocusTrap(@$_loading)
+ @$_loading.focus()
loaded: ->
@$_loading.remove()
@@ -132,7 +135,7 @@ class @DiscussionUtil
if params["loadingCallback"]?
params["loadingCallback"].apply(params["$loading"])
else
- params["$loading"].loading()
+ params["$loading"].loading(params["takeFocus"])
if !params["error"]
params["error"] = =>
@discussionAlert(
diff --git a/lms/templates/discussion/_discussion_module.html b/lms/templates/discussion/_discussion_module.html
index 37f8052520b..00f6c94801a 100644
--- a/lms/templates/discussion/_discussion_module.html
+++ b/lms/templates/discussion/_discussion_module.html
@@ -2,6 +2,6 @@
<%include file="_underscore_templates.html" />
<div class="discussion-module" data-discussion-id="${discussion_id | h}">
- <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
+ <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}" role="button"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
<a href="#" class="new-post-btn"><span class="icon icon-edit new-post-icon"></span>${_("New Post")}</a>
</div>
--
GitLab