Skip to content

E
edx-platform
Commit fb35ffb0 by alisan617 Committed by GitHub
Options

Merge pull request #13449 from edx/alisan/discussion-sidebar-topics-menu-TNL-5169 

Add aria attributes to discussion topics sidebar
parents 35878825 0ffeb463
Showing with 166 additions and 37 deletions
common/static/common/js/discussion/views/discussion_thread_list_view.js
...@@ -36,6 +36,9 @@ ...@@ -36,6 +36,9 @@
this.chooseFilter = function() { this.chooseFilter = function() {
return DiscussionThreadListView.prototype.chooseFilter.apply(self, arguments); return DiscussionThreadListView.prototype.chooseFilter.apply(self, arguments);
}; };
this.keyboardBinding = function() {
return DiscussionThreadListView.prototype.keyboardBinding.apply(self, arguments);
};
this.filterTopics = function() { this.filterTopics = function() {
return DiscussionThreadListView.prototype.filterTopics.apply(self, arguments); return DiscussionThreadListView.prototype.filterTopics.apply(self, arguments);
}; };
...@@ -95,6 +98,7 @@ ...@@ -95,6 +98,7 @@
return DiscussionUtil.ignoreEnterKey(event); return DiscussionUtil.ignoreEnterKey(event);
}, },
'keyup .forum-nav-browse-filter-input': 'filterTopics', '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-menu-wrapper': 'ignoreClick',
'click .forum-nav-browse-title': 'selectTopicHandler', 'click .forum-nav-browse-title': 'selectTopicHandler',
'change .forum-nav-sort-control': 'sortThreads', 'change .forum-nav-sort-control': 'sortThreads',
...@@ -125,6 +129,14 @@ ...@@ -125,6 +129,14 @@
this.boardName = null; this.boardName = null;
this.current_search = ''; this.current_search = '';
this.mode = 'all'; 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([], { this.searchAlertCollection = new Backbone.Collection([], {
model: Backbone.Model model: Backbone.Model
}); });
...@@ -436,6 +448,7 @@ ...@@ -436,6 +448,7 @@
this.$('.forum-nav-thread-list-wrapper').hide(); this.$('.forum-nav-thread-list-wrapper').hide();
if (!initialLoad) { if (!initialLoad) {
$('.forum-nav-browse-filter-input').focus(); $('.forum-nav-browse-filter-input').focus();
this.filterInputReset();
} }
$('body').bind('click', this.hideBrowseMenu); $('body').bind('click', this.hideBrowseMenu);
return this.updateSidebar(); return this.updateSidebar();
...@@ -443,20 +456,29 @@ ...@@ -443,20 +456,29 @@
}; };
DiscussionThreadListView.prototype.hideBrowseMenu = function() { DiscussionThreadListView.prototype.hideBrowseMenu = function() {
var selectedTopicList = this.$('.forum-nav-browse-title.is-focused');
if (this.isBrowseMenuVisible()) { if (this.isBrowseMenuVisible()) {
selectedTopicList.removeClass('is-focused');
this.$('.forum-nav-browse-menu-wrapper').hide(); this.$('.forum-nav-browse-menu-wrapper').hide();
this.$('.forum-nav-thread-list-wrapper').show(); 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); $('body').unbind('click', this.hideBrowseMenu);
return this.updateSidebar(); return this.updateSidebar();
} }
}; };
DiscussionThreadListView.prototype.toggleBrowseMenu = function(event) { DiscussionThreadListView.prototype.toggleBrowseMenu = function(event) {
var inputText = $('.forum-nav-browse-filter-input').val();
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
if (this.isBrowseMenuVisible()) { if (this.isBrowseMenuVisible()) {
return this.hideBrowseMenu(); return this.hideBrowseMenu();
} else { } else {
if (inputText !== '') {
this.filterTopics(inputText);
}
return this.showBrowseMenu(); return this.showBrowseMenu();
} }
}; };
...@@ -493,28 +515,115 @@ ...@@ -493,28 +515,115 @@
return crumbs; return crumbs;
}; };
DiscussionThreadListView.prototype.filterTopics = function(event) { DiscussionThreadListView.prototype.selectOption = function(element) {
var items, query, 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; self = this;
query = $(event.target).val(); query = this.$('.forum-nav-browse-filter-input').val();
items = this.$('.forum-nav-browse-menu-item'); items = this.$('.forum-nav-browse-menu-item');
if (query.length === 0) { if (query.length === 0) {
items.find('.forum-nav-browse-title.is-focused').removeClass('is-focused');
return items.show(); return items.show();
} else { } else {
items.hide(); if (this.filterEnabled) {
return items.each(function(i, item) { items.hide();
var path, pathText, filteredItems = items.each(function(i, item) {
$item = $(item); var path, pathText,
if (!$item.is(':visible')) { $item = $(item);
pathText = self.getPathText($item).toLowerCase(); if (!$item.is(':visible')) {
if (query.split(' ').every(function(term) { pathText = self.getPathText($item).toLowerCase();
return pathText.search(term.toLowerCase()) !== -1; 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(); 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): ...@@ -211,6 +211,7 @@ class DiscussionHomePageTest(UniqueCourseTest):
self.page.a11y_audit.config.set_rules({ self.page.a11y_audit.config.set_rules({
"ignore": [ "ignore": [
'section', # TODO: AC-491 'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
] ]
}) })
self.page.a11y_audit.check_for_accessibility_errors() self.page.a11y_audit.check_for_accessibility_errors()
...@@ -455,6 +456,7 @@ class DiscussionTabMultipleThreadTest(BaseDiscussionTestCase): ...@@ -455,6 +456,7 @@ class DiscussionTabMultipleThreadTest(BaseDiscussionTestCase):
self.thread_page_1.a11y_audit.config.set_rules({ self.thread_page_1.a11y_audit.config.set_rules({
"ignore": [ "ignore": [
'section', # TODO: AC-491 'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
] ]
}) })
...@@ -463,6 +465,7 @@ class DiscussionTabMultipleThreadTest(BaseDiscussionTestCase): ...@@ -463,6 +465,7 @@ class DiscussionTabMultipleThreadTest(BaseDiscussionTestCase):
self.thread_page_2.a11y_audit.config.set_rules({ self.thread_page_2.a11y_audit.config.set_rules({
"ignore": [ "ignore": [
'section', # TODO: AC-491 'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
] ]
}) })
...@@ -819,6 +822,7 @@ class DiscussionResponseEditTest(BaseDiscussionTestCase): ...@@ -819,6 +822,7 @@ class DiscussionResponseEditTest(BaseDiscussionTestCase):
page.a11y_audit.config.set_rules({ page.a11y_audit.config.set_rules({
'ignore': [ 'ignore': [
'section', # TODO: AC-491 'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
] ]
}) })
page.visit() page.visit()
...@@ -916,6 +920,7 @@ class DiscussionCommentEditTest(BaseDiscussionTestCase): ...@@ -916,6 +920,7 @@ class DiscussionCommentEditTest(BaseDiscussionTestCase):
page.a11y_audit.config.set_rules({ page.a11y_audit.config.set_rules({
'ignore': [ 'ignore': [
'section', # TODO: AC-491 'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
] ]
}) })
page.a11y_audit.check_for_accessibility_errors() page.a11y_audit.check_for_accessibility_errors()
...@@ -1321,6 +1326,7 @@ class DiscussionSearchAlertTest(UniqueCourseTest): ...@@ -1321,6 +1326,7 @@ class DiscussionSearchAlertTest(UniqueCourseTest):
self.page.a11y_audit.config.set_rules({ self.page.a11y_audit.config.set_rules({
'ignore': [ 'ignore': [
'section', # TODO: AC-491 'section', # TODO: AC-491
'aria-required-children', # TNL-5169, AC-534
] ]
}) })
self.page.a11y_audit.check_for_accessibility_errors() self.page.a11y_audit.check_for_accessibility_errors()
......
lms/static/sass/discussion/elements/_navigation.scss
...@@ -55,6 +55,22 @@ ...@@ -55,6 +55,22 @@
width: 100%; 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 { .forum-nav-browse-title {
@include text-align(left); @include text-align(left);
display: block; display: block;
...@@ -66,10 +82,11 @@ ...@@ -66,10 +82,11 @@
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
background-image: none; background-image: none;
color: $link-color; cursor: pointer;
&:hover, &:hover,
&:focus { &:focus,
&.is-focused {
// switched from a to button; // switched from a to button;
// need to override button styles // need to override button styles
background-image: none !important; background-image: none !important;
......
lms/static/sass/discussion/utilities/_shame.scss
...@@ -21,11 +21,6 @@ ...@@ -21,11 +21,6 @@
// navigation - browse menu // navigation - browse menu
// ------------------------ // ------------------------
// Override global a rules
.forum-nav-browse-title {
color: inherit !important;
}
// Override global label rules // Override global label rules
.forum-nav-browse-filter label { .forum-nav-browse-filter label {
margin-bottom: 0; margin-bottom: 0;
......
lms/templates/discussion/_filter_dropdown.html
...@@ -19,38 +19,40 @@ from openedx.core.djangolib.markup import HTML ...@@ -19,38 +19,40 @@ from openedx.core.djangolib.markup import HTML
<li <li
class="forum-nav-browse-menu-item" class="forum-nav-browse-menu-item"
data-discussion-id='${entries[entry]["id"]}' data-discussion-id='${entries[entry]["id"]}'
id='${entries[entry]["id"]}'
data-cohorted="${str(entries[entry]['is_cohorted']).lower()}" 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> </li>
</%def> </%def>
<%def name="render_category(categories, category)"> <%def name="render_category(categories, category)">
<li class="forum-nav-browse-menu-item"> <li class="forum-nav-browse-menu-item"
<button type="button" class="forum-nav-browse-title">${category}</button> id='${category | u}'
>
<span class="forum-nav-browse-title">${category}</span>
<ul class="forum-nav-browse-submenu"> <ul class="forum-nav-browse-submenu">
${HTML(render_dropdown(categories[category]))} ${HTML(render_dropdown(categories[category]))}
</ul> </ul>
</li> </li>
</%def> </%def>
<div class="forum-nav-browse-menu-wrapper" style="display: none"> <div class="forum-nav-browse-menu-wrapper" style="display: none" aria-label="${_("Discussion topics list")}">
<form class="forum-nav-browse-filter"> <form class="forum-nav-browse-filter" autocomplete="off">
<label> <label>
<span class="sr">${_("Filter Topics")}</span> <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> <span class="icon fa fa-filter" aria-hidden="true"></span>
</label> </label>
</form> </form>
<ul class="forum-nav-browse-menu"> <ul class="forum-nav-browse-menu" role="listbox" id="discussion_topics_listbox">
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-all"> <li class="forum-nav-browse-menu-item forum-nav-browse-menu-all" role="option" id="all_discussions">
<button type="button" class="forum-nav-browse-title">${_("All Discussions")}</button> <span class="forum-nav-browse-title">${_("All Discussions")}</span>
</li> </li>
<li class="forum-nav-browse-menu-item forum-nav-browse-menu-following"> <li class="forum-nav-browse-menu-item forum-nav-browse-menu-following" role="option" id="posts_following">
<button type="button" class="forum-nav-browse-title"> <span class="icon fa fa-star" aria-hidden="true"></span>
<span class="icon fa fa-star" aria-hidden="true"></span> <span class="forum-nav-browse-title">${_("Posts I'm Following")}</span>
${_("Posts I'm Following")}
</button>
</li> </li>
${HTML(render_dropdown(category_map))} ${HTML(render_dropdown(category_map))}
</ul> </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