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:
@@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user