Skip to content

R
RecommenderXBlock
Commit 33445405 by swdanielli
Options

aria: focus, region, mouseover event

parent e5f69ce6
Showing with 54 additions and 17 deletions
recommender/static/css/recommender.css
......@@ -180,17 +180,14 @@
width: 40px;
}
.redTxt {
color: #B4053D;
}
.redTxt { color: #B4053D; }
.redTxt:before { content: '*'; }
.recommenderVoteArrowDown, .recommenderVoteArrowUp, .resourceEditButton, .flagResource, .deendorse, .resourceImportButton, .resourceExportButton, .resourceAddButton, .paginationPageNumber, .backToViewButton, .endorse, .resourceRankingForDeendorsementButton { cursor: pointer; }
.resourceAddButton, .resourceExportButton, .resourceImportButton { float: right; background-color: rgba(0,0,0,0.05); padding: 0.3em 1em 0.3em 1em; margin-left: 1em;}
.resourceEditButton { float: left; }
.addResourcePageTitle, .editResourcePageTitle, .flagResourcePageTitle, .deendorsePageTitle, .endorsePageTitle, .importResourcePageTitle {
margin-bottom: 1em;
}
.modifyPageTitle { margin-bottom: 1em; }
.editResourcePage, .addResourcePage, .flagResourcePage {
padding-left: 1em;
......@@ -279,3 +276,4 @@ input[type="button"]:not([DISABLED]){
a:link, a:visited { color: black; }
form { margin: 0em; }
label { width: 100%; }
recommender/static/html/resourcebox.html
<%page args="title,votes,url,description,descriptionText,id,isProblematic,problematicReason,voteMode,endorseMode,endorsedReason"/>
<div class="recommenderResource">
<div class="recommenderResource" role="region" aria-label="Resource: ${title}" tabindex="0">
<div class="recommenderVoteBox">
<div class="recommenderVoteArrowUp ${voteMode}" role="button" aria-label="upvote" tabindex="0"></div>
<div class="recommenderVoteScore ${voteMode}" aria-label="Votes: ">${votes}</div>
<div class="recommenderVoteScore ${voteMode}" aria-label="${votes} votes" tabindex="0">${votes}</div>
<div class="recommenderVoteArrowDown ${voteMode}" role="button" aria-label="downvote" tabindex="0"></div>
</div>
<div class="recommenderBlurb">
<div class="recommenderTitle"><a href="${url}" target="_blank" role="button" aria-label="Resource: " tabindex="0">${title}</a></div>
<div class="recommenderTitle"><a href="${url}" target="_blank" tabindex="0" aria-label="${descriptionText}">${title}</a></div>
<div class="recommenderDescriptionText">${descriptionText}</div>
<div class="recommenderDescriptionImg">${description}</div>
<div class="recommenderEntryId">${id}</div>
......
recommender/static/js/src/cats.js
......@@ -89,6 +89,8 @@ var importResourceErrorText = {
var problematicReasonsPrefix = '<br/>Here is a list of reasons why students think this resource problematic: <br/>&nbsp;&nbsp;&nbsp;&nbsp;';
var endorsedReasonsPrefix = '<br/>The reason why it is endorsed is: <br/>&nbsp;&nbsp;&nbsp;&nbsp;';
var recommenderResourceAriaPrefix = 'Resource: ';
var recommenderVoteScorePostfix = ' votes';
var reasonSeparator = '<br/>&nbsp;&nbsp;&nbsp;&nbsp;';
var exportResourceFileInfo = {
......@@ -107,6 +109,15 @@ var headerText = {
'.deendorsePage': 'Deendorse Resource'
};
var modifyPageTitle = {
'.importResourcePage': 'Upload resources in JSON format to the database.',
'.addResourcePage': 'Suggest a resource which can help other students with this problem. Please do not give the answer directly.',
'.editResourcePage': 'Edit the resource and make it more helpful for other students with this problem. Please do not give the answer directly.',
'.flagResourcePage': 'Why would you like to flag this resource? The staff will review all flagged resources, and remove inappropriate ones (spam, incorrect, abusive, etc.). Giving a clear reason will help us do this efficiently.',
'.endorsePage': 'Endorse this resource and give the reason why you do that.',
'.deendorsePage': 'Deendorse this resource and give the reason why you do that.'
};
var writeDatabaseEnum = {
ADD: 'add',
EDIT: 'edit'
......
recommender/static/js/src/recommender.js
......@@ -40,19 +40,37 @@ function RecommenderXBlock(runtime, element, init_data) {
}
/**
* Focus on the first shown resource in list.
*/
function focusFirstResource() {
if ($('.recommenderResource', element).length == 0) { $('.noResourceIntro', element).focus(); }
else {
$($('.recommenderResource', element).get().reverse()).each(function() {
if ($(this).css('display') != 'none') {
$(this).focus();
return;
}
});
}
}
/**
* Expand or collapse resource list.
* This function is triggered when clicking on the header of the resource list.
*/
function bindToggleResourceListEvent() {
if ($(this).hasClass('resourceListExpanded')) {
Logger.log('mit.recommender.hideShow', generateLog(loggerStatus['hideShow']['hide']));
$(".recommenderRowInner", element).slideUp('fast');
$(this).text(resourceListHeader['show']);
$(".recommenderRowInner", element).slideUp('fast').attr('aria-hidden', 'true');
$(this).text(resourceListHeader['show']).attr('aria-expanded', 'false');
}
else {
Logger.log('mit.recommender.hideShow', generateLog(loggerStatus['hideShow']['show']));
$(".recommenderRowInner", element).slideDown('fast');
$(this).text(resourceListHeader['hide']);
$(".recommenderRowInner", element).slideDown('fast').attr('aria-hidden', 'false');
$(this).text(resourceListHeader['hide']).attr('aria-expanded', 'true');
focusFirstResource();
}
$(this).toggleClass('resourceListExpanded');
addTooltip();
......@@ -73,6 +91,7 @@ function RecommenderXBlock(runtime, element, init_data) {
if (index + 1 == CURRENT_PAGE) { $(ele, element).show().attr('aria-hidden', 'false'); }
else { $(ele, element).hide().attr('aria-hidden', 'true'); }
});
focusFirstResource();
}
/**
......@@ -174,8 +193,9 @@ function RecommenderXBlock(runtime, element, init_data) {
*/
function showModifyingPage(page) {
$(page, element).show().attr('aria-hidden', 'false');
$(page, element).find('.modifyPageTitle').text(modifyPageTitle[page]);
$('.recommenderContent', element).hide().attr('aria-hidden', 'true');
$('.recommenderModify', element).show().attr('aria-hidden', 'false');
$('.recommenderModify', element).show().attr('aria-hidden', 'false').attr('aria-label', modifyPageTitle[page]).focus();
$('.recommenderModifyTitle', element).text(headerText[page]);
}
......@@ -258,6 +278,7 @@ function RecommenderXBlock(runtime, element, init_data) {
$('.showEndorsedReasons', element).hide().attr('aria-hidden', 'true');
}
$('.recommenderContent', element).show().attr('aria-hidden', 'false');
$('.hideShow').focus();
}
/**
......@@ -365,7 +386,8 @@ function RecommenderXBlock(runtime, element, init_data) {
resourceTitle: resource['title'],
resourceImg: resource['description'],
resourceText: resource['descriptionText'],
resourceId: resource['id']
resourceId: resource['id'],
resourceVotes: votes
}
var newDiv = $(Mustache.render($("#recommenderResourceTemplate").html(), renderData));
......@@ -379,7 +401,6 @@ function RecommenderXBlock(runtime, element, init_data) {
if (pos == -1) { $(toDiv).after(newDiv); }
else { $(toDiv).before(newDiv); }
}
$('.recommenderVoteScore', newDiv).text(votes);
addResourceDependentTooltip(newDiv);
return newDiv;
......@@ -510,6 +531,7 @@ function RecommenderXBlock(runtime, element, init_data) {
success: function(result) {
if (result['Success'] == true) {
var resource = $('.recommenderResource:eq(' + findResourceDiv(result['id']).toString() + ')', element);
var newVotes = result['newVotes'].toString();
$('.recommenderVoteArrowUp, .recommenderVoteArrowDown, .recommenderVoteScore', resource)
.toggleClass(voteConfig['voteClassName']);
if (toggleVoteFlag in result) {
......@@ -517,7 +539,7 @@ function RecommenderXBlock(runtime, element, init_data) {
.toggleClass(voteConfig['previousVoteClassName']);
}
setVoteAriaParam(resource);
$('.recommenderVoteScore', resource).html(result['newVotes'].toString());
$('.recommenderVoteScore', resource).html(newVotes).attr('aria-label', newVotes + recommenderVoteScorePostfix);
}
else { alert(result['error']); }
}
......@@ -601,10 +623,12 @@ function RecommenderXBlock(runtime, element, init_data) {
var resourceDiv = $('.recommenderResource:eq(' + findResourceDiv(result['old_id']).toString() + ')', element);
/* Update the edited resource */
$('.recommenderTitle', resourceDiv).find('a').text(result['title']);
resourceDiv.attr('aria-label', recommenderResourceAriaPrefix + result['title']);
$('.recommenderTitle', resourceDiv).find('a').attr('href', result['url']);
$('.recommenderEntryId', resourceDiv).text(result['id']);
if (data["description"] != "") { $('.recommenderDescriptionImg', resourceDiv).text(result['description']); }
if (data["descriptionText"] != "") { $('.recommenderDescriptionText', resourceDiv).text(result['descriptionText']); }
$('.recommenderTitle', resourceDiv).find('a').attr('aria-label', $('.recommenderDescriptionText', resourceDiv).text());
backToView();
}
else { alert(result['error']); }
......@@ -1156,6 +1180,10 @@ function RecommenderXBlock(runtime, element, init_data) {
$('.noResourceIntro', element).show().attr('aria-hidden', 'false');
$('.descriptionText', element).hide().attr('aria-hidden', 'true');
}
/* For accessibility of expandable resource list header */
$('.recommenderRowInner', element).attr('id', 'recommenderRowInner-' + $(element).attr('data-usage-id'));
$('.hideShow', element).attr('aria-controls', 'recommenderRowInner-' + $(element).attr('data-usage-id'));
}
initializeRecommender();
}
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