aria: focus, region, mouseover event

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();
 }