accessibility

recommender/static/html/recommender.html

@@ -54,11 +54,11 @@
         </div>
         <div class="recommenderBlurb">
             <div class="recommenderTitle"><a href="{{resourceUrl}}" target="_blank" tabindex="0" aria-label="{{resourceText}}">{{resourceTitle}}</a></div>
-            <div class="recommenderDescriptionText">{{resourceText}}</div>
-            <div class="recommenderDescriptionImg">{{resourceImg}}</div>
-            <div class="recommenderEntryId">{{resourceId}}</div>
-            <div class="recommenderProblematicReason"></div>
-            <div class="recommenderEndorseReason"></div>
+            <div class="recommenderDescriptionText" aria-hidden="true">{{resourceText}}</div>
+            <div class="recommenderDescriptionImg" aria-hidden="true">{{resourceImg}}</div>
+            <div class="recommenderEntryId" aria-hidden="true">{{resourceId}}</div>
+            <div class="recommenderProblematicReason" aria-hidden="true"></div>
+            <div class="recommenderEndorseReason" aria-hidden="true"></div>
         </div>
         <div class="recommenderEndorse">
             <div class="endorse"></div>
@@ -69,13 +69,17 @@
         </div>
     </div>
 </script>
+<script type="x-tmpl-mustache" id="hideShowTemplate">
+    <div class="expanded" aria-hidden="true"><div class="upArrow"></div></div>
+    <div class="notExpanded" aria-hidden="true"><div class="downArrow"></div></div>
+</script>
 <div class="recommenderBlock">
     <div class="recommenderRecommendations">
         <div class="recommenderContent">
             <div class="hideShow" role='button' tabindex='0' data-step="1" aria-expanded='false' data-intro="This is a list of recommended resources. If you're stuck, curious, or want to learn more, please look around. If you find a useful resources, help your fellow classmates by adding it!">
                 Show related resources
-                <div class="expanded"><div class="upArrow"></div></div>
-                <div class="notExpanded"><div class="downArrow"></div></div>
+                <div class="expanded" aria-hidden="true"><div class="upArrow"></div></div>
+                <div class="notExpanded" aria-hidden="true"><div class="downArrow"></div></div>
             </div>
             <div class='recommenderRowInner' style='display: none;' aria-hidden="true">
                 <div class="recommenderRow">
@@ -154,7 +158,6 @@
                 <div class="modifyPageTitle"></div>
                 <label>Reason&nbsp;
                     <input type="text"
-                        aria-label='Provide reason for why this resource should be removed'
                         class="removeReason" 
                         name="removeRationale"
                         placeholder="Reason for why this resource should be removed"/>
@@ -165,8 +168,7 @@
                 <div class="modifyPageTitle"></div>
                 <label>Reason&nbsp;
                     <input type="text"
-                        aria-label='Provide reason for why this resource should be endorsed'
-                        class="endorseReason" 
+\                        class="endorseReason" 
                         name="endorseRationale"
                         placeholder="Reason for why this resource should be endorsed"/>
                 </label>
@@ -176,7 +178,6 @@
                 <div class="modifyPageTitle"></div>
                 <label>Reason&nbsp;
                     <input type="text"
-                        aria-label='Provide reason for why this resource should be flagged'
                         class="flagReason" 
                         name="flagRationale"
                         placeholder="Reason for why this resource should be flagged"/>
@@ -185,13 +186,13 @@
             </div>
             <div class="editResourcePage" style='display: none;' aria-hidden="true">
                 <div class="modifyPageTitle"></div>
-                <label>Title&nbsp;<span class='redTxt'></span>
+                <label>Title&nbsp;<span class='redTxt' aria-hidden="true"></span>
                     <textarea
                         aria-label='Provide a resource title, required'
                         class="editTitle"
                         placeholder="Provide a meaningful title so other students know whether this is useful to them"></textarea>
                 </label>
-                <label>Location&nbsp;<span class='redTxt'></span>
+                <label>Location&nbsp;<span class='redTxt' aria-hidden="true"></span>
                     <input type="text"
                         aria-label='Provide a resource location in url, required'
                         class="editUrl"
@@ -210,13 +211,13 @@
             </div>
             <div class="addResourcePage" style='display: none;' aria-hidden="true">
                 <div class="modifyPageTitle"></div>
-                <label>Title&nbsp;<span class='redTxt'></span>
+                <label>Title&nbsp;<span class='redTxt' aria-hidden="true"></span>
                     <textarea
                         aria-label='Provide a resource title, required'
                         class="inTitle" 
                         placeholder="Provide a meaningful title so other students know whether this is useful to them"></textarea>
                 </label>
-                <label>Location&nbsp;<span class='redTxt'></span>
+                <label>Location&nbsp;<span class='redTxt' aria-hidden="true"></span>
                     <input type="text"
                         aria-label='Provide a resource location in url, required'
                         class="inUrl"

recommender/static/html/resourcebox.html

@@ -7,11 +7,11 @@
     </div>
     <div class="recommenderBlurb">
         <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>
-        <div class="recommenderProblematicReason">${problematicReason}</div>
-        <div class="recommenderEndorseReason">${endorsedReason}</div>
+        <div class="recommenderDescriptionText" aria-hidden="true">${descriptionText}</div>
+        <div class="recommenderDescriptionImg" aria-hidden="true">${description}</div>
+        <div class="recommenderEntryId" aria-hidden="true">${id}</div>
+        <div class="recommenderProblematicReason" aria-hidden="true">${problematicReason}</div>
+        <div class="recommenderEndorseReason" aria-hidden="true">${endorsedReason}</div>
     </div>
     <div class="recommenderEndorse">
         <div class="endorse ${endorseMode}"></div>

recommender/static/js/src/recommender.js

@@ -62,14 +62,16 @@ function RecommenderXBlock(runtime, element, init_data) {
         if ($(this).hasClass('resourceListExpanded')) {
             Logger.log('mit.recommender.hideShow', generateLog(loggerStatus['hideShow']['hide']));
             $(".recommenderRowInner", element).slideUp('fast').attr('aria-hidden', 'true');
-            $(this).text(resourceListHeader['show']).attr('aria-expanded', 'false');
-
-
+            $(this).text(resourceListHeader['show'])
+                   .append($(Mustache.render($("#hideShowTemplate").html(), {})))
+                   .attr('aria-expanded', 'false');
         }
         else {
             Logger.log('mit.recommender.hideShow', generateLog(loggerStatus['hideShow']['show']));
             $(".recommenderRowInner", element).slideDown('fast').attr('aria-hidden', 'false');
-            $(this).text(resourceListHeader['hide']).attr('aria-expanded', 'true');
+            $(this).text(resourceListHeader['hide'])
+                   .append($(Mustache.render($("#hideShowTemplate").html(), {})))
+                   .attr('aria-expanded', 'true');
             focusFirstResource();
         }
         $(this).toggleClass('resourceListExpanded');
@@ -193,7 +195,7 @@ function RecommenderXBlock(runtime, element, init_data) {
         $(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').attr('aria-label', modifyPageTitle[page]).focus();
+        $('.recommenderModify', element).show().attr('aria-hidden', 'false').attr('aria-label', headerText[page]).focus();
         $('.recommenderModifyTitle', element).text(headerText[page]);
     }