Skip to content

E
edx-platform
Commit 0ffeb463 by alisan617
Options

Make the left sidebar in Discussion page accessible 

TNL-5169
parent 087acb8a
Showing with 166 additions and 37 deletions
common/static/common/js/discussion/views/discussion_thread_list_view.js
......@@ -36,6 +36,9 @@
this.chooseFilter = function() {
return DiscussionThreadListView.prototype.chooseFilter.apply(self, arguments);
};
this.keyboardBinding = function() {
return DiscussionThreadListView.prototype.keyboardBinding.apply(self, arguments);
};
this.filterTopics = function() {
return DiscussionThreadListView.prototype.filterTopics.apply(self, arguments);
};
......@@ -95,6 +98,7 @@
return DiscussionUtil.ignoreEnterKey(event);
},
'keyup .forum-nav-browse-filter-input': 'filterTopics',
'keydown .forum-nav-browse-filter-input': 'keyboardBinding',
'click .forum-nav-browse-menu-wrapper': 'ignoreClick',
'click .forum-nav-browse-title': 'selectTopicHandler',
'change .forum-nav-sort-control': 'sortThreads',
......@@ -125,6 +129,14 @@
this.boardName = null;
this.current_search = '';
this.mode = 'all';
this.keyCodes = {
enter: 13,
escape: 27,
up: 38,
down: 40
};
this.filterInputReset();
this.selectedTopic = $('.forum-nav-browse-menu-item:visible .forum-nav-browse-title.is-focused');
this.searchAlertCollection = new Backbone.Collection([], {
model: Backbone.Model
});
......@@ -436,6 +448,7 @@
this.$('.forum-nav-thread-list-wrapper').hide();
if (!initialLoad) {
$('.forum-nav-browse-filter-input').focus();
this.filterInputReset();
}
$('body').bind('click', this.hideBrowseMenu);
return this.updateSidebar();
......@@ -443,20 +456,29 @@
};
DiscussionThreadListView.prototype.hideBrowseMenu = function() {
var selectedTopicList = this.$('.forum-nav-browse-title.is-focused');
if (this.isBrowseMenuVisible()) {
selectedTopicList.removeClass('is-focused');
this.$('.forum-nav-browse-menu-wrapper').hide();
this.$('.forum-nav-thread-list-wrapper').show();
if (this.selectedTopicId !== 'undefined') {
this.$('.forum-nav-browse-filter-input').attr('aria-activedescendant', this.selectedTopicId);
}
$('body').unbind('click', this.hideBrowseMenu);
return this.updateSidebar();
}
};
DiscussionThreadListView.prototype.toggleBrowseMenu = function(event) {
var inputText = $('.forum-nav-browse-filter-input').val();
event.preventDefault();
event.stopPropagation();
if (this.isBrowseMenuVisible()) {
return this.hideBrowseMenu();
} else {
if (inputText !== '') {
this.filterTopics(inputText);
}
return this.showBrowseMenu();
}
};
......@@ -493,28 +515,115 @@
return crumbs;
};
DiscussionThreadListView.prototype.filterTopics = function(event) {
var items, query,
DiscussionThreadListView.prototype.selectOption = function(element) {
var activeDescendantId, activeDescendantText;
if (this.selectedTopic.length > 0) {
this.selectedTopic.removeClass('is-focused');
}
if (element) {
element.addClass('is-focused');
activeDescendantId = element.parent().attr('id');
activeDescendantText = element.text();
this.selectedTopic = element;
this.selectedTopicId = activeDescendantId;
$('.forum-nav-browse-filter-input')
.attr('aria-activedescendant', activeDescendantId)
.val(activeDescendantText);
}
};
DiscussionThreadListView.prototype.filterInputReset = function() {
this.filterEnabled = true;
this.selectedTopicIndex = -1;
this.selectedTopicId = null;
};
DiscussionThreadListView.prototype.keyboardBinding = function(event) {
var $inputText = $('.forum-nav-browse-filter-input'),
$filteredMenuItems = $('.forum-nav-browse-menu-item:visible'),
filteredMenuItemsLen = $filteredMenuItems.length,
$curOption = $filteredMenuItems.eq(0).find('.forum-nav-browse-title').eq(0),
$activeOption, $prev, $next;
switch (event.keyCode) {
case this.keyCodes.enter:
$activeOption = $filteredMenuItems.find('.forum-nav-browse-title.is-focused');
if ($inputText.val() !== '') {
$activeOption.trigger('click');
this.filterInputReset();
}
break;
case this.keyCodes.escape:
this.toggleBrowseMenu(event);
$('.forum-nav-browse-filter-input').val('');
this.filterInputReset();
$('.all-topics').trigger('click');
break;
case this.keyCodes.up:
if (this.selectedTopicIndex > 0) {
this.selectedTopicIndex -= 1;
if (this.isBrowseMenuVisible()) {
$prev = $('.forum-nav-browse-menu-item:visible')
.eq(this.selectedTopicIndex).find('.forum-nav-browse-title')
.eq(0);
this.filterEnabled = false;
$curOption.removeClass('is-focused');
$prev.addClass('is-focused');
}
this.selectOption($prev);
}
break;
case this.keyCodes.down:
if (this.selectedTopicIndex < filteredMenuItemsLen - 1) {
this.selectedTopicIndex += 1;
if (this.isBrowseMenuVisible()) {
$next = $('.forum-nav-browse-menu-item:visible')
.eq(this.selectedTopicIndex).find('.forum-nav-browse-title')
.eq(0);
this.filterEnabled = false;
$curOption.removeClass('is-focused');
$next.addClass('is-focused');
}
this.selectOption($next);
}
break;
default:
break;
}
return true;
};
DiscussionThreadListView.prototype.filterTopics = function() {
var items, query, filteredItems,
self = this;
query = $(event.target).val();
query = this.$('.forum-nav-browse-filter-input').val();
items = this.$('.forum-nav-browse-menu-item');
if (query.length === 0) {
items.find('.forum-nav-browse-title.is-focused').removeClass('is-focused');
return items.show();
} else {
items.hide();
return items.each(function(i, item) {
var path, pathText,
$item = $(item);
if (!$item.is(':visible')) {
pathText = self.getPathText($item).toLowerCase();
if (query.split(' ').every(function(term) {
return pathText.search(term.toLowerCase()) !== -1;
})) {
path = $item.parents('.forum-nav-browse-menu-item').andSelf();
return path.add($item.find('.forum-nav-browse-menu-item')).show();
if (this.filterEnabled) {
items.hide();
filteredItems = items.each(function(i, item) {
var path, pathText,
$item = $(item);
if (!$item.is(':visible')) {
pathText = self.getPathText($item).toLowerCase();
if (query.split(' ').every(function(term) {
return pathText.search(term.toLowerCase()) !== -1;
})) {
path = $item.parents('.forum-nav-browse-menu-item').andSelf();
return path.add($item.find('.forum-nav-browse-menu-item')).show();
}
}
}
});
return filteredItems;
});
}
return filteredItems;
}
};
......
common/test/acceptance/tests/discussion/test_discussion.py
......@@ -211,6 +211,7 @@ class DiscussionHomePageTest(UniqueCourseTest):
self.page.a11y_audit.config.set_rules({
"ignore": [
'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
]
})
self.page.a11y_audit.check_for_accessibility_errors()
......@@ -455,6 +456,7 @@ class DiscussionTabMultipleThreadTest(BaseDiscussionTestCase):
self.thread_page_1.a11y_audit.config.set_rules({
"ignore": [
'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
]
})
......@@ -463,6 +465,7 @@ class DiscussionTabMultipleThreadTest(BaseDiscussionTestCase):
self.thread_page_2.a11y_audit.config.set_rules({
"ignore": [
'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
]
})
......@@ -819,6 +822,7 @@ class DiscussionResponseEditTest(BaseDiscussionTestCase):
page.a11y_audit.config.set_rules({
'ignore': [
'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
]
})
page.visit()
......@@ -916,6 +920,7 @@ class DiscussionCommentEditTest(BaseDiscussionTestCase):
page.a11y_audit.config.set_rules({
'ignore': [
'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
]
})
page.a11y_audit.check_for_accessibility_errors()
......@@ -1321,6 +1326,7 @@ class DiscussionSearchAlertTest(UniqueCourseTest):
self.page.a11y_audit.config.set_rules({
'ignore': [
'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
]
})
self.page.a11y_audit.check_for_accessibility_errors()
......
lms/static/sass/discussion/elements/_navigation.scss
......@@ -55,6 +55,22 @@
width: 100%;
}
.forum-nav-browse-menu-following {
.icon {
@include float(left);
@include left($baseline / 2);
position: relative;
top: 13px;
}
.forum-nav-browse-title {
@include padding-left($baseline * 1.5);
}
}
.forum-nav-browse-menu-item {
margin-bottom: 0;
}
.forum-nav-browse-title {
@include text-align(left);
display: block;
......@@ -66,10 +82,11 @@
background: transparent;
box-shadow: none;
background-image: none;
color: $link-color;
cursor: pointer;
&:hover,
&:focus {
&:focus,
&.is-focused {
// switched from a to button;
// need to override button styles
background-image: none !important;
......
lms/static/sass/discussion/utilities/_shame.scss
......@@ -21,11 +21,6 @@
// navigation - browse menu
// ------------------------
// Override global a rules
.forum-nav-browse-title {
color: inherit !important;
}
// Override global label rules
.forum-nav-browse-filter label {
margin-bottom: 0;
......
lms/templates/discussion/_filter_dropdown.html
......@@ -19,38 +19,40 @@ from openedx.core.djangolib.markup import HTML
<li
class="forum-nav-browse-menu-item"
data-discussion-id='${entries[entry]["id"]}'
id='${entries[entry]["id"]}'
data-cohorted="${str(entries[entry]['is_cohorted']).lower()}"
role="option"
>
<button type="button" class="forum-nav-browse-title">${entry}</button>
<span class="forum-nav-browse-title">${entry}</span>
</li>
</%def>
<%def name="render_category(categories, category)">
<li class="forum-nav-browse-menu-item">
<button type="button" class="forum-nav-browse-title">${category}</button>
<li class="forum-nav-browse-menu-item"
id='${category | u}'
>
<span class="forum-nav-browse-title">${category}</span>
<ul class="forum-nav-browse-submenu">
${HTML(render_dropdown(categories[category]))}
</ul>
</li>
</%def>
<div class="forum-nav-browse-menu-wrapper" style="display: none">
<form class="forum-nav-browse-filter">
<div class="forum-nav-browse-menu-wrapper" style="display: none" aria-label="${_("Discussion topics list")}">
<form class="forum-nav-browse-filter" autocomplete="off">
<label>
<span class="sr">${_("Filter Topics")}</span>
<input type="text" class="forum-nav-browse-filter-input" placeholder="${_("filter topics")}">
<input type="text" id="forum-nav-browse-filter-input" role="combobox" aria-expanded="true" aria-owns="discussion_topics_listbox" aria-autocomplete="list" class="forum-nav-browse-filter-input" placeholder="${_("filter topics")}">
<span class="icon fa fa-filter" aria-hidden="true"></span>
</label>
</form>
<ul class="forum-nav-browse-menu">
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-all">
<button type="button" class="forum-nav-browse-title">${_("All Discussions")}</button>
<ul class="forum-nav-browse-menu" role="listbox" id="discussion_topics_listbox">
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-all" role="option" id="all_discussions">
<span class="forum-nav-browse-title">${_("All Discussions")}</span>
</li>
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
<button type="button" class="forum-nav-browse-title">
<span class="icon fa fa-star" aria-hidden="true"></span>
${_("Posts I'm Following")}
</button>
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-following" role="option" id="posts_following">
<span class="icon fa fa-star" aria-hidden="true"></span>
<span class="forum-nav-browse-title">${_("Posts I'm Following")}</span>
</li>
${HTML(render_dropdown(category_map))}
</ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment