Merge pull request oppia#3118 from anthkris/icon-button-accessibility

Fix part of oppia#3082: Make icon buttons and links screenreader accessible
hridayns · Mar 3, 2017 · 31dc125 · 31dc125
2 parents 93230ec + 30e3182
commit 31dc125
Show file tree

Hide file tree

Showing 16 changed files with 74 additions and 14 deletions.
diff --git a/...emplates/dev/head/components/forms/schema_editors/schema_based_list_editor_directive.html b/...emplates/dev/head/components/forms/schema_editors/schema_based_list_editor_directive.html
@@ -14,6 +14,7 @@
                 ng-click="deleteElement($index)"
                 ng-disabled="isDisabled()">
           <i class="material-icons md-18">&#xE5CD;</i>
+          <span class="oppia-icon-accessibility-label">Delete this list entry</span>
         </button>
       </td>
     </tr>

diff --git a/core/templates/dev/head/components/rating_display.html b/core/templates/dev/head/components/rating_display.html
@@ -1,5 +1,7 @@
 <script type="text/ng-template" id="components/ratingSummary">
   <span style="<[getCursorStyle()]>" ng-mouseleave="leaveArea()">
-    <span ng-if="ratingValue || isEditable" ng-repeat="star in stars" class="fa <[star.cssClass]> oppia-rating-star protractor-test-rating-star" ng-click="clickStar(star.value)" ng-mouseenter="enterStar(star.value)"></span>
+    <span ng-if="ratingValue || isEditable" ng-repeat="star in stars" class="fa <[star.cssClass]> oppia-rating-star protractor-test-rating-star" ng-click="clickStar(star.value)" ng-mouseenter="enterStar(star.value)">
+      <span class="oppia-icon-accessibility-label">Rate this <[$index + 1]> stars</span>
+    </span>
   </span>
 </script>
diff --git a/core/templates/dev/head/components/share/sharing_links_directive.html b/core/templates/dev/head/components/share/sharing_links_directive.html
@@ -21,6 +21,7 @@
     <li>
       <a ng-click="showEmbedExplorationModal(explorationId)" tooltip="Embed" tooltip-placement="top" tabindex="0">
         <i class="material-icons md-48 embed-link">&#xE86F;</i>
+        <span class="oppia-icon-accessibility-label">Embed this Exploration</span>
       </a>
     </li>
   </ul>

diff --git a/core/templates/dev/head/components/summary_tile/collection_summary_tile_directive.html b/core/templates/dev/head/components/summary_tile/collection_summary_tile_directive.html
@@ -27,6 +27,7 @@ <h3 class="activity-title"><[getCollectionTitle() || DEFAULT_EMPTY_TITLE]></h3>
 
           <li>
             <span>
+              <span class="oppia-icon-accessibility-label">Last Updated</span>
               <[getLastUpdatedDatetime()]>
             </span>
           </li>

diff --git a/core/templates/dev/head/components/summary_tile/exploration_summary_tile_directive.html b/core/templates/dev/head/components/summary_tile/exploration_summary_tile_directive.html
@@ -36,6 +36,7 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title">
           <li>
             <span class="protractor-test-exp-summary-tile-rating" ng-class="{'rating-disabled': !getAverageRating()}">
               <span class="fa fa-star fa-lg" tooltip="<['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]>" tooltip-placement="top">
+                <span class="oppia-icon-accessibility-label"><['I18N_LIBRARY_RATINGS_TOOLTIP' | translate]></span>
               </span>
               <span ng-if="getAverageRating()">
                 <[getAverageRating() | number:1]>
@@ -47,12 +48,14 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title">
 
           <li>
             <span class="fa fa-eye fa-lg" tooltip="<['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]>" tooltip-placement="top">
+              <span class="oppia-icon-accessibility-label"><['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]></span>
             </span>
             <[getNumViews() | summarizeNonnegativeNumber]>
           </li>
 
           <li>
             <span>
+              <span class="oppia-icon-accessibility-label">Last Updated</span>
               <[getLastUpdatedDatetime()]>
             </span>
           </li>

diff --git a/core/templates/dev/head/components/top_navigation_bar/top_navigation_bar_directive.html b/core/templates/dev/head/components/top_navigation_bar/top_navigation_bar_directive.html
@@ -27,13 +27,18 @@
           <a class="oppia-navbar-tab oppia-navbar-tab-content" href="/library" translate="I18N_TOPNAV_LIBRARY"></a>
         </li>
         <li ng-show="navElementsVisibilityStatus.I18N_TOPNAV_ABOUT" class="dropdown oppia-navbar-clickable-dropdown protractor-test-about-oppia-list-item">
-          <a class="oppia-navbar-tab" tabindex="0">
+          <a class="oppia-navbar-tab"
+             role="menuitem"
+             aria-haspopup="true"
+             aria-expanded="false"
+             tabindex="0">
             <span class="oppia-navbar-tab-content" translate="I18N_TOPNAV_ABOUT"></span>
             <span class="caret"></span>
           </a>
           <ul class="dropdown-menu oppia-navbar-dropdown"
               ng-mouseover="onMouseoverDropdownMenu($event)"
-              ng-mouseleave="onMouseoutDropdownMenu($event)">
+              ng-mouseleave="onMouseoutDropdownMenu($event)"
+              role="menu">
             <li><a class="protractor-test-about-link oppia-navbar-tab-content" href="/about" translate="I18N_TOPNAV_ABOUT_OPPIA"></a></li>
             <li><a class="protractor-test-get-started-link oppia-navbar-tab-content" href="/get_started" translate="I18N_TOPNAV_GET_STARTED"></a></li>
             <li><a class="protractor-test-teach-link oppia-navbar-tab-content" href="/teach" translate="I18N_TOPNAV_TEACH_WITH_OPPIA"></a></li>
@@ -57,14 +62,20 @@
       <li ng-if="username" class="dropdown protractor-test-profile-dropdown">
         <a class="dropdown-toggle oppia-navbar-dropdown-toggle" data-toggle="dropdown"
            ng-mouseover="onMouseoverProfilePictureOrDropdown($event)"
-           ng-mouseleave="onMouseoutProfilePictureOrDropdown($event)" tabindex="0">
+           ng-mouseleave="onMouseoutProfilePictureOrDropdown($event)"
+           role="menuitem"
+           aria-haspopup="true"
+           aria-expanded="false"
+           aria-label="User Menu"
+           tabindex="0">
           <div class="oppia-navbar-profile-picture-container">
             <span ng-if="profilePictureDataUrl">
               <img ng-src="<[profilePictureDataUrl]>" class="oppia-navbar-profile-picture img-circle" alt="User Avatar">
               <span class="caret" style="margin-top: 10px;"></span>
             </span>
             <span ng-if="!profilePictureDataUrl">
               <i class="material-icons md-40" style="margin-top: -1px;">&#xE853;</i>
+              <span class="oppia-icon-accessibility-label">User Avatar</span>
               <span class="caret" style="margin-top: -26px;"></span>
             </span>
 

diff --git a/core/templates/dev/head/css/oppia.css b/core/templates/dev/head/css/oppia.css
@@ -3988,6 +3988,17 @@ md-card.preview-conversation-skin-supplemental-card {
   margin-right: 2px;
   vertical-align: initial;
 }
+/* Accessibility workaround for icon buttons and links
+  Taken from:
+  https://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/
+  Use for all links and buttons that only use an icon */
+.oppia-icon-accessibility-label {
+  display: block;
+  font-size: 0;
+  height: 1px;
+  overflow: hidden;
+  width: 0px;
+}
 
 .oppia-activity-summary-tile .recently-updated {
   color: rgb(19,105,193);

diff --git a/core/templates/dev/head/pages/collection_player/collection_player.html b/core/templates/dev/head/pages/collection_player/collection_player.html
@@ -197,6 +197,7 @@
       <li>
         <a ng-href="/collection_editor/create/{{collection_id}}" tooltip="Edit" tooltip-placement="bottom" target="_blank">
           <i class="material-icons">&#xE254;</i>
+          <span class="oppia-icon-accessibility-label">Edit</span>
         </a>
       </li>
     {% endif %}

diff --git a/core/templates/dev/head/pages/exploration_player/exploration_footer_directive.html b/core/templates/dev/head/pages/exploration_player/exploration_footer_directive.html
@@ -10,10 +10,17 @@
           <li class="hover-link"
               ng-mouseenter="hovering = true"
               ng-mouseleave="hovering = false"
-              tabindex="0">
+              tabindex="0"
+              aria-haspopup="true"
+              aria-expanded="false">
             <div class="dropup" ng-class="{'open':hovering}">
-              <a id="dropdownMenu2" class="dropdown-toggle" ng-class="{'hovered-text':hovering}"
-                 data-toggle="dropdown" ng-if="contributorNames.length > 0">
+              <a id="dropdownMenu2" class="dropdown-toggle"
+                 ng-class="{'hovered-text':hovering}"
+                 data-toggle="dropdown" 
+                 ng-if="contributorNames.length > 0"
+                 role="menuitem"
+                 aria-haspopup="true"
+                 aria-expanded="false">
                 <h4 translate="I18N_FOOTER_AUTHOR_PROFILES" class="author-profile-text"
                     ng-class="{'hovered-text':hovering, 'not-hovered' : !hovering}"></h4>
               </a>

diff --git a/core/templates/dev/head/pages/exploration_player/exploration_player.html b/core/templates/dev/head/pages/exploration_player/exploration_player.html
@@ -73,6 +73,7 @@ <h1 class="oppia-exploration-h1"><span class="protractor-test-exploration-header
     </li>
     <li ng-click="showInformationCard()" tooltip="<['I18N_PLAYER_INFO_TOOLTIP' | translate]>" tooltip-placement="bottom" style="cursor: pointer;" class="oppia-exploration-info-icon protractor-test-exploration-info-icon" tabindex="0">
       <i class="material-icons oppia-navbar-breadcrumb-icon" style="font-size: 20px;">&#xE88E;</i>
+      <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_INFO_TOOLTIP' | translate]></span>
     </li>
   </ul>
 {% endblock navbar_breadcrumb %}

diff --git a/core/templates/dev/head/pages/exploration_player/information_card_modal.html b/core/templates/dev/head/pages/exploration_player/information_card_modal.html
@@ -13,23 +13,30 @@ <h2 class="oppia-info-card-title"><[explorationTitle]></h2>
 
       <ul layout="row" class="card-metrics" layout-align="space-between center">
         <li class="protractor-test-info-card-rating">
-          <span class="fa fa-star fa-lg" tooltip="<['I18N_PLAYER_RATINGS_TOOLTIP' | translate]>" tooltip-placement="top"></span>
+          <span class="fa fa-star fa-lg" tooltip="<['I18N_PLAYER_RATINGS_TOOLTIP' | translate]>" tooltip-placement="top">
+            <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_RATINGS_TOOLTIP' | translate]></span>
+          </span>
           <span ng-if="!averageRating" translate="I18N_PLAYER_UNRATED">Unrated</span>
           <span ng-if="averageRating"><[averageRating | number:1]></span>
         </li>
 
         <li>
-          <span class="fa fa-eye fa-lg" tooltip="<['I18N_PLAYER_VIEWS_TOOLTIP' | translate]>" tooltip-placement="top"></span>
+          <span class="fa fa-eye fa-lg" tooltip="<['I18N_PLAYER_VIEWS_TOOLTIP' | translate]>" tooltip-placement="top">
+            <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_VIEWS_TOOLTIP' | translate]></span>
+          </span>
           <[numViews | summarizeNonnegativeNumber]>
         </li>
 
         <li>
-          <span class="fa fa-clock-o fa-lg" tooltip="<['I18N_PLAYER_LAST_UPDATED_TOOLTIP' | translate]>" tooltip-placement="top"></span>
+          <span class="fa fa-clock-o fa-lg" tooltip="<['I18N_PLAYER_LAST_UPDATED_TOOLTIP' | translate]>" tooltip-placement="top">
+            <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_LAST_UPDATED_TOOLTIP' | translate]></span>
+          </span>
           <[lastUpdatedString]>
         </li>
 
         <ul layout="row" layout-align="space-between center" class="oppia-info-card-exploration-contributors-profile">
           <i class="material-icons" tooltip="<['I18N_PLAYER_CONTRIBUTORS_TOOLTIP' | translate]>" tooltip-placement="top" style="cursor: default; margin-right: 5px;">&#xE7EF;</i>
+          <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_CONTRIBUTORS_TOOLTIP' | translate]></span>
           <li ng-repeat="name in contributorNames| limitTo: 2"
             tooltip="<[name]>" tooltip-placement="top">
             <profile-link-image username="name">
@@ -55,6 +62,7 @@ <h2 class="oppia-info-card-title"><[explorationTitle]></h2>
               <span class="fa fa-tags fa-lg" tooltip-append-to-body="true"
                     tooltip="<['I18N_PLAYER_TAGS_TOOLTIP' | translate]>"
                     tooltip-placement="top">
+                <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_TAGS_TOOLTIP' | translate]></span>
               </span>
             </div>
             <md-chips layout-align="center center">
@@ -84,6 +92,7 @@ <h2 class="oppia-info-card-title"><[explorationTitle]></h2>
     </div>
     <button type="button" class="oppia-close-popover-button" ng-click="cancel()">
       <i class="material-icons md-18" style="color: white;">&#xE5CD;</i>
+      <span class="oppia-icon-accessibility-label">Close</span>
     </button>
   </md-card>
 </script>
diff --git a/core/templates/dev/head/pages/exploration_player/learner_local_nav.html b/core/templates/dev/head/pages/exploration_player/learner_local_nav.html
@@ -3,23 +3,27 @@
   <li popover-placement="bottom" popover-template="'popover/feedback'" popover-trigger="click">
     <a href="" class="protractor-test-exploration-feedback-popup-link" tooltip="<['I18N_PLAYER_FEEDBACK_TOOLTIP' | translate]>" tooltip-placement="bottom">
       <i class="material-icons">&#xE87F;</i>
+      <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_FEEDBACK_TOOLTIP' | translate]></span>
     </a>
   </li>
   <li>
     {% if can_edit %}
       <a ng-href="/create/<[explorationId]>" tooltip="<['I18N_PLAYER_EDIT_TOOLTIP' | translate]>" tooltip-placement="bottom" target="_blank">
         <i class="material-icons">&#xE254;</i>
+        <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_EDIT_TOOLTIP' | translate]></span>
       </a>
     {% elif username %}
       <a ng-click="showLearnerSuggestionModal()" tooltip="Suggest Changes" tooltip-placement="bottom" target="_blank">
         <i class="material-icons">&#xE254;</i>
+        <span class="oppia-icon-accessibility-label">Suggest Changes</span>
       </a>
     {% endif %}
   </li>
   <li>
     {% if username %}
       <a ng-click="showFlagExplorationModal()" tooltip="<['I18N_PLAYER_REPORT_TOOLTIP' | translate]>" tooltip-placement="bottom" tabindex="0">
         <i class="material-icons">&#xE153;</i>
+        <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_REPORT_TOOLTIP' | translate]></span>
       </a>
     {% endif %}
   </li>

diff --git a/core/templates/dev/head/pages/exploration_player/progress_dots_directive.html b/core/templates/dev/head/pages/exploration_player/progress_dots_directive.html
@@ -105,6 +105,7 @@
             ng-if="$index === currentDotIndex" ng-show="dots.length > 1"
             tooltip="<['I18N_PLAYER_CARD_NUMBER_TOOLTIP' | translate]><[$index +1]>" tooltip-placement="left"
             tooltip-trigger="none" tooltip-is-open="opened" mobile-friendly-tooltip tabindex="0">
+        <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_CARD_NUMBER_TOOLTIP' | translate]><[$index +1]></span>
       </span>
       <span class="oppia-progress-dot oppia-progress-dot-inactive"
             ng-class="$index === leftmostVisibleDotIndex && $index !== 0 ? 'oppia-progress-dot-gradient-left':
@@ -114,6 +115,7 @@
             ng-click="changeActiveDot($index)"
             tooltip="<['I18N_PLAYER_CARD_NUMBER_TOOLTIP' | translate]><[$index +1]>" tooltip-placement="left"
             tooltip-trigger="none" tooltip-is-open="opened" mobile-friendly-tooltip tabindex="0">
+        <span class="oppia-icon-accessibility-label"><['I18N_PLAYER_CARD_NUMBER_TOOLTIP' | translate]><[$index +1]></span>
       </span>
     </li>
     <li class="oppia-progress-arrow" ng-show="dots.length > 1"

diff --git a/core/templates/dev/head/pages/library/library.html b/core/templates/dev/head/pages/library/library.html
@@ -109,7 +109,8 @@ <h2 ng-class="{'active': activeGroupIndex === $index}" class="oppia-library-grou
                          ng-hide="leftmostCardIndices[$index] == 0">
                 <i class="material-icons">&#xE314;</i>
               </md-button>
-              <div class="oppia-library-carousel-scroller" ng-if="leftmostCardIndices[$index] == 0"></div>
+              <div class="oppia-library-carousel-scroller" ng-if="leftmostCardIndices[$index] == 0" aria-hidden="true">
+              </div>
 
               <div class="oppia-library-carousel"
                    ng-swipe-right="scroll($index, true)"
@@ -144,7 +145,8 @@ <h2 ng-class="{'active': activeGroupIndex === $index}" class="oppia-library-grou
 
               <md-button class="md-no-ink oppia-library-carousel-scroller"
                          ng-click="scroll($index, false)"
-                         ng-hide="(group.activity_summary_dicts.length - tileDisplayCount) <= leftmostCardIndices[$index]">
+                         ng-hide="(group.activity_summary_dicts.length - tileDisplayCount) <= leftmostCardIndices[$index]"
+                         aria-hidden="true">
                 <i class="material-icons">&#xE315;</i>
               </md-button>
               <div class="oppia-library-carousel-scroller"
@@ -154,7 +156,8 @@ <h2 ng-class="{'active': activeGroupIndex === $index}" class="oppia-library-grou
             <div ng-if="libraryWindowIsNarrow && leftmostCardIndices">
               <md-button class="md-no-ink oppia-library-carousel-scroller"
                          ng-click="decrementLeftmostCardIndex($index)"
-                         ng-hide="leftmostCardIndices[$index] == 0">
+                         ng-hide="leftmostCardIndices[$index] == 0"
+                         aria-hidden="true">
                 <i class="material-icons">&#xE314;</i>
               </md-button>
               <div class="oppia-library-carousel-scroller" ng-if="leftmostCardIndices[$index] == 0"></div>

diff --git a/core/templates/dev/head/pages/library/search_bar_directive.html b/core/templates/dev/head/pages/library/search_bar_directive.html
@@ -97,6 +97,9 @@
   .oppia-search-bar-input.btn:hover,
   .oppia-search-bar-input.btn:focus {
     color: #fff;
+  }
+
+  .oppia-search-bar-input.btn:focus {
     outline: 1px dotted #fff;
     outline: auto 5px -webkit-focus-ring-color;
   }

diff --git a/extensions/interactions/ItemSelectionInput/ItemSelectionInput.html b/extensions/interactions/ItemSelectionInput/ItemSelectionInput.html
@@ -94,7 +94,7 @@
         <div ng-if="displayCheckboxes">
           <label class="item-selection-input-item">
             <md-checkbox class="item-selection-input-checkbox" ng-model="userSelections[choice]" ng-checked="userSelections[choice]"
-              ng-change="onToggleCheckbox()" ng-disabled="preventAdditionalSelections && !userSelections[choice]" aria-label="choice" tabindex="0">
+              ng-change="onToggleCheckbox()" ng-disabled="preventAdditionalSelections && !userSelections[choice]" tabindex="0">
               <span angular-html-bind="choice"></span>
             </md-checkbox>
           </label>
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,7 @@ @@
         <li>
           <a ng-click="showEmbedExplorationModal(explorationId)" tooltip="Embed" tooltip-placement="top" tabindex="0">
             <i class="material-icons md-48 embed-link">&#xE86F;</i>
+            <span class="oppia-icon-accessibility-label">Embed this Exploration</span>
           </a>
         </li>
       </ul>
@@ Expand Down @@