Merge pull request #1593 from bukolabisuga/svg-img-role

#4130 Added img role in all svg images to improve accessibility
ushahidi · Nov 23, 2020 · 7311879 · 7311879
2 parents 95e4b03 + 41794cd
commit 7311879
Show file tree

Hide file tree

Showing 79 changed files with 263 additions and 263 deletions.
diff --git a/app/common/auth/password-reset-confirm.html b/app/common/auth/password-reset-confirm.html
@@ -26,7 +26,7 @@
             <div ng-repeat="(error, value) in form.password.$error"
                 ng-show="form.password.$dirty"
                 class="alert error">
-                <svg class="iconic">
+                <svg class="iconic" role="img">
                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#warning"></use>
                 </svg>
                 <p translate="{{'user.valid.password.' + error}}" translate-default="{{error}}"></p>

diff --git a/app/common/auth/register.html b/app/common/auth/register.html
@@ -15,7 +15,7 @@
             <div ng-repeat="(error, value) in form.full_name.$error"
                 ng-show="form.full_name.$dirty"
                 class="alert error">
-                <svg class="iconic">
+                <svg class="iconic" role="img">
                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#warning"></use>
                 </svg>
                 <p translate="{{'user.valid.full_name.' + error}}" translate-default="{{error}}"></p>
@@ -31,7 +31,7 @@
             <div ng-repeat="(error, value) in form.email.$error"
                 ng-show="form.email.$dirty"
                 class="alert error">
-                <svg class="iconic">
+                <svg class="iconic" role="img">
                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#warning"></use>
                 </svg>
                 <p translate="{{'user.valid.email.' + error}}" translate-default="{{error}}"></p>
@@ -48,7 +48,7 @@
             <div ng-repeat="(error, value) in form.password.$error"
                 ng-show="form.password.$dirty"
                 class="alert error">
-                <svg class="iconic">
+                <svg class="iconic" role="img">
                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#warning"></use>
                 </svg>
                 <p translate="{{'user.valid.password.' + error}}" translate-default="{{error}}"></p>

diff --git a/app/common/configs/uib-pagination.html b/app/common/configs/uib-pagination.html
@@ -4,7 +4,7 @@
 </li>
 <li ng-if="::directionLinks" ng-class="{disabled: noPrevious()||ngDisabled}" class="prev">
     <a ng-click="selectPage(page - 1, $event)">
-        <svg class="iconic">
+        <svg class="iconic" role="img">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#chevron-left"></use>
         </svg>
         <span class="hidden">Previous</span>
@@ -24,7 +24,7 @@
 </li>
 <li ng-if="::directionLinks" ng-class="{disabled: noNext()||ngDisabled}" class="next" >
     <a ng-click="selectPage(page + 1, $event)">
-        <svg class="iconic">
+        <svg class="iconic" role="img">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#chevron-right"></use>
         </svg>
         <span class="hidden">Next</span>

diff --git a/app/common/directives/add-category.html b/app/common/directives/add-category.html
@@ -12,7 +12,7 @@
             ng-disabled="categoryName.length === 0"
             ng-click="saveCategory($event);"
         >
-            <svg class="iconic">
+            <svg class="iconic" role="img">
                 <use xlink:href="/img/iconic-sprite.svg#check"></use>
             </svg>
         <span class="hidden" translate="app.add">Add</span>
@@ -22,7 +22,7 @@
             class="button-beta button-flat"
             ng-click="showInputToggle()"
         >
-            <svg class="iconic">
+            <svg class="iconic" role="img">
                 <use xlink:href="/img/iconic-sprite.svg#trash"></use>
             </svg>
             <span class="hidden" translate="category.delete">Delete</span>

diff --git a/app/common/directives/category-selector.html b/app/common/directives/category-selector.html
@@ -45,7 +45,7 @@
         </div>
     </div>
     <span class="form-field-toggle">
-        <svg class="iconic">
+        <svg class="iconic" role="img">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#chevron-bottom"></use>
         </svg>
         <span translate="nav.more">More</span>

diff --git a/app/common/directives/filter-system/filter-searchbar.html b/app/common/directives/filter-system/filter-searchbar.html
@@ -13,10 +13,10 @@
                 ng-keyup="detectSubmit($event)"
                 ng-value="model.q=''"
             >
-            <svg class="iconic" ng-show="!form.q.$viewValue.length">
+            <svg class="iconic" role="img" ng-show="!form.q.$viewValue.length">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#magnifying-glass"></use>
             </svg>
-            <svg class="iconic" ng-click="onClear()" ng-show="form.q.$viewValue.length">
+            <svg class="iconic" role="img" ng-click="onClear()" ng-show="form.q.$viewValue.length">
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#circle-x"></use>
             </svg>
         </div>

diff --git a/app/common/directives/modal-container.html b/app/common/directives/modal-container.html
@@ -1,14 +1,14 @@
 <div ng-show="classVisible" class="modal" style="display: block;">
     <div class="modal-window" ng-style="{ top : modalOffset }">
         <button class="button-beta button-flat modal-trigger modal-trigger-close" ng-show="showCloseButton" ng-click="closeButtonClicked()">
-            <svg class="iconic">
+            <svg class="iconic" role="img">
                 <!-- TODO: fix icon to be settable -->
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#x"></use>
             </svg>
             <span class="hidden" translate>modal.button.close</span>
         </button>
         <h3 class="modal-title" ng-if="title">
-            <svg class="iconic" ng-if="icon">
+            <svg class="iconic" role="img" ng-if="icon">
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ icon }}"></use>
             </svg>
             <span class="label">

diff --git a/app/common/directives/modal.html b/app/common/directives/modal.html
@@ -1,14 +1,14 @@
 <div ng-show="classVisible" class="modal" style="display: block;">
     <div class="modal-window" ng-style="{ top : modalOffset }">
         <button class="button-beta button-flat modal-trigger modal-trigger-close" ng-show="showCloseButton" ng-click="closeModal()">
-            <svg class="iconic">
+            <svg class="iconic" role="img">
                 <!-- TODO: fix icon to be settable -->
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#x"></use>
             </svg>
             <span class="hidden" translate>modal.button.close</span>
         </button>
         <h3 class="modal-title" ng-if="title">
-            <svg class="iconic" ng-if="icon">
+            <svg class="iconic" role="img" ng-if="icon">
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{iconPath}}"></use>
             </svg>
             <span class="label">

diff --git a/app/common/directives/mode-bar/mode-bar.html b/app/common/directives/mode-bar/mode-bar.html
@@ -6,7 +6,7 @@
         <ul class="deployment-menu">
             <li ui-sref-active="{ 'active' : 'posts.map' }">
                 <a ui-sref="posts.map.all" ui-sref-opts="{reload:true}" class="view-map">
-                    <svg class="iconic">
+                    <svg class="iconic" role="img">
                         <use xlink:href="/img/iconic-sprite.svg#map-marker"></use>
                     </svg>
                     <translate>views.map</translate>
@@ -15,7 +15,7 @@
 
             <li ui-sref-active="active">
                 <a ui-sref="posts.data" ui-sref-opts="{reload:true}" class="view-data">
-                    <svg class="iconic">
+                    <svg class="iconic" role="img">
                         <use xlink:href="/img/iconic-sprite.svg#list-rich"></use>
                     </svg>
                     <translate>views.data</translate>
@@ -24,7 +24,7 @@
 
             <li ng-if="isActivityAvailable || hasManageSettingsPermission()" ui-sref-active="active" data-message="customize">
                 <a ui-sref="activity">
-                    <svg class="iconic">
+                    <svg class="iconic" role="img">
                         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#pulse"></use>
                     </svg>
                     <translate>views.activity</translate>
@@ -33,15 +33,15 @@
 
             <li>
                 <button class="more-menu-trigger" ng-class="{ active : moreActive }" ng-click="showMore($event)">
-                    <svg class="iconic">
+                    <svg class="iconic" role="img">
                         <use xlink:href="/img/iconic-sprite.svg#ellipses"></use>
                     </svg>
                     <translate>nav.more</translate>
                 </button>
                 <ul>
                     <li data-message="customize" ng-show="hasManageSettingsPermission()" ng-class="{active: $state.includes('settings')}">
                         <a ui-sref="settings.list">
-                            <svg class="iconic">
+                            <svg class="iconic" role="img">
                                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#cog"></use>
                             </svg>
                             <translate>nav.settings</translate>
@@ -66,7 +66,7 @@
 
             <li ng-hide="currentUser">
                 <button ng-click="login()" data-modal="login">
-                    <svg class="iconic">
+                    <svg class="iconic" role="img">
                         <use xlink:href="/img/iconic-sprite.svg#account-login"></use>
                     </svg>
                     <translate translate="nav.login">Log in</translate>
@@ -82,7 +82,7 @@
 
             <li ng-show="!currentUser && canRegister">
                 <button ng-click="register()" data-modal="signup">
-                    <svg class="iconic">
+                    <svg class="iconic" role="img">
                         <use xlink:href="/img/iconic-sprite.svg#person"></use>
                     </svg>
                     <translate translate="nav.register">Sign up</translate>
@@ -91,7 +91,7 @@
 
             <li ng-show="currentUser">
                 <button ng-click="logout()" data-modal="login">
-                    <svg class="iconic">
+                    <svg class="iconic" role="img">
                         <use xlink:href="/img/iconic-sprite.svg#account-logout"></use>
                     </svg>
                     <span class="label" translate="nav.logout">Log out</span>

diff --git a/app/common/directives/role-selector.html b/app/common/directives/role-selector.html
@@ -6,7 +6,7 @@
             ng-class="{ 'checked': !model.role.length }"
         >
             <label for="add_everyone">
-                <svg class="iconic">
+                <svg class="iconic" role="img">
                     <use xlink:href="/img/iconic-sprite.svg#globe"></use>
                 </svg>
                 <input
@@ -27,7 +27,7 @@
             ng-class="{ 'checked': model.role.length }"
         >
             <label for="add_roles">
-                <svg class="iconic">
+                <svg class="iconic" role="img">
                     <use xlink:href="/img/iconic-sprite.svg#people"></use>
                 </svg>
                 <input

diff --git a/app/common/notifications/demo-slider.html b/app/common/notifications/demo-slider.html
@@ -9,7 +9,7 @@
         ng-if="icon"
         ng-class="iconClass"
     >
-        <svg class="iconic">
+        <svg class="iconic" role="img">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ icon }}"></use>
         </svg>
     </div>

diff --git a/app/common/notifications/slider.html b/app/common/notifications/slider.html
@@ -11,7 +11,7 @@
         ng-if="icon"
         ng-class="iconClass"
     >
-        <svg class="iconic">
+        <svg class="iconic" role="img">
             <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ icon }}"></use>
         </svg>
     </div>

diff --git a/app/common/user-profile/notifications.html b/app/common/user-profile/notifications.html
@@ -8,7 +8,7 @@ <h3 class="listing-heading" ng-if="contacts.length !== 0" translate>notification
          ng-class="{'active': contact.active}">
       <div class="listing-item-secondary">
         <button type="button" class="button-link" ng-click="toggleActive(contact)">
-          <svg class="iconic">
+          <svg class="iconic" role="img">
             <use xlink:href="/img/iconic-sprite.svg#chevron-bottom"></use>
           </svg>
           <span class="button-label" translate>contact.configure</span>
@@ -94,7 +94,7 @@ <h2 class="listing-item-title">
           <a class="button button-flat"
              ng-click="toggleActive(contact)"
              translate>
-            <svg class="iconic">
+            <svg class="iconic" role="img">
               <use xlink:href="/img/iconic-sprite.svg#plus"></use>
             </svg>
             contact.button.add
@@ -174,7 +174,7 @@ <h3 class="listing-heading" translate>notification.notifications_heading</h3>
          class="listing-item">
       <div class="listing-item-secondary">
         <button type="button" class="button-link" ng-click="deleteNotification(notification)">
-          <svg class="iconic">
+          <svg class="iconic" role="img">
             <use xlink:href="/img/iconic-sprite.svg#circle-x"></use>
           </svg>
           <span class="button-label" translate>notification.button.delete</span>
@@ -183,7 +183,7 @@ <h3 class="listing-heading" translate>notification.notifications_heading</h3>
 
       <div class="listing-item-primary">
         <div class="listing-item-image">
-          <svg class="iconic">
+          <svg class="iconic" role="img">
             <use xlink:href="/img/iconic-sprite.svg#star"></use>
           </svg>
         </div>