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

Add aria attributes to discussion topics sidebar
This commit is contained in:
alisan617
2016-09-22 17:48:57 -04:00
committed by GitHub
5 changed files with 166 additions and 37 deletions

View File

@@ -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;
}
};

View File

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