Added accessibility features to the elements on the map (#2957)

* Added accessibility features to the elements on the map

Features added and changed:
- (aria) labels to buttons and inputs
- small color changes to get enough contrast
- HTML roles

web-ui/src/main/resources/catalog/components/index/partials/datafilterview.html

@@ -1,14 +1,19 @@
 <div class="gn-data-view">
 
-  <div class="text-center">
-    <select class="form-control" ng-model="layer" ng-options="layer as getLabel(layer) for layer in layers | overlay" ng-change="set()">
+  <div>
+    <label translate="">filter</label>
+    <select class="form-control"
+            aria-label="{{'filter' | translate}}"
+            ng-model="layer"
+            ng-options="layer as getLabel(layer) for layer in layers | overlay"
+            ng-change="set()">
     </select>
   </div>
 
   <div class="tab-content" data-ng-show="currentLayer">
     <div role="tabpanel" class="tab-pane active" id="home">
 
-      <div data-gn-wfs-download="currentLayer" data-ng-if="currentLayer" data-map="map"></div>
+      <div data-gn-wfs-download="currentLayer" class="clearfix" data-ng-if="currentLayer" data-map="map"></div>
 
       <div data-gn-wfs-filter-facets="" data-layer="currentLayer" data-boot-mode="index"> </div>
 

web-ui/src/main/resources/catalog/components/viewer/baselayerswitcher/partials/baselayerswitcher.html

@@ -8,7 +8,8 @@
   </button>
   <div data-ngeo-popover-content class="gn-baselayer-switcher-content">
     <ul class="gn-baselayer-switcher-menu" role="menu">
-      <li ng-if="::layer" ng-repeat="layer in layers" ng-click="changeBackground(layer);popoverCtrl.dismissPopover()">
+      <li ng-if="::layer" ng-repeat="layer in layers" ng-click="changeBackground(layer);popoverCtrl.dismissPopover()"
+          role="menuitem">
         <span ng-if="::!layer.get('loading')">
           <span class="fa"
                 ng-class="(layer == map.getLayers().item(0)) ? 'fa-dot-circle-o' : 'fa-circle-o'"></span>
@@ -24,7 +25,9 @@
 </div>
 <br/>
 <div>
-  <button class="btn btn-default gn-md-thumbnail" data-ng-click="reset()">
+  <button class="btn btn-default gn-md-thumbnail"
+          data-ng-click="reset()"
+          aria-label="{{'resetContext' | translate}}">
     <span
       class="gn-img-thumbnail-caption" data-translate="">resetContext</span>
   </button>

web-ui/src/main/resources/catalog/components/viewer/layermanager/partials/layermanageritem.html

@@ -6,27 +6,28 @@
       <div class="gn-layer-actions">
         <div ngeo-popover ngeo-popover-placement="bottom">
           <a ngeo-popover-anchor role="button" tabindex="0"
-              class="fa fa-cog"></a>
+             aria-label="{{'settings' | translate}}"
+             class="fa fa-cog"></a>
           <div ngeo-popover-content class="layermanager-item-menu">
-            <ul>
+            <ul role="menu">
 
               <!--Zoom to extent-->
-              <li class="">
+              <li class="" role="menuitem">
                 <a href="" data-ng-click="zoomToExtent(layer, map)">
                   <span translate="">layerExtentZoom</span>
                 </a>
               </li>
 
               <!--Open Metadata-->
               <li class=""
+                  role="menuitem"
                   data-ng-if="layer.get('md') || layer.get('metadataUrl')">
                 <a href="" data-ng-click="showMetadata()">
                   <span translate="">layerMetadata</span>
                 </a>
               </li>
 
-              <li>
-
+              <li role="menuitem">
                 <label data-translate="">selectStyle</label>
                 <div data-gn-layer-styles="layer.get('style')"
                      data-gn-layer-styles-on-click="setLayerStyle(layer, style)"
@@ -35,50 +36,58 @@
               </li>
 
               <!--Opacity slide-->
-              <li class="" title="{{'opacity' | translate}}">
+              <li class="" title="{{'opacity' | translate}}"
+                  role="menuitem">
                 <label data-translate="">setOpacity</label>
                 <input class="" type="range"
+                       aria-label="{{'setOpacity' | translate}}"
                       min="0" max="1" step="0.05"
                       ng-model="layer.opacity"/>
               </li>
 
               <!--WPS-->
-              <li class="" data-ng-if="process && process.length == 1">
+              <li class="" data-ng-if="process && process.length == 1"
+                  role="menuitem">
                 <a href="" data-ng-click="showWPS(process[0])">
                   <span translate="">process</span>
                 </a>
               </li>
-              <li class="btn-group" ng-if="process && process.length > 1 ">
+              <li class="btn-group" ng-if="process && process.length > 1 "
+                  role="menuitem">
                 <div class="btn-link dropdown-toggle" data-toggle="dropdown">
                   <span translate="">process</span>&nbsp;
                   <span class="caret"></span>
                 </div>
                 <ul class="dropdown-menu" role="menu">
-                  <li ng-repeat="p in process"><a href="" data-ng-click="showWPS(p)">{{p.desc ||
-                    p.name}}</a></li>
+                  <li ng-repeat="p in process" role="menuitem">
+                    <a href="" data-ng-click="showWPS(p)">{{p.desc ||
+                      p.name}}</a>
+                    </li>
                 </ul>
               </li>
 
               <!--WFS Filter-->
-              <li class="" data-ng-if="::wfs"><a href="" data-ng-click="showWFSFilter()">
-                <span translate="">filter</span>
-              </a></li>
+              <li class="" data-ng-if="::wfs" role="menuitem">
+                <a href="" data-ng-click="showWFSFilter()">
+                  <span translate="">filter</span>
+                </a>
+              </li>
 
               <!--Download-->
-              <li class="" data-gn-wfs-download="layer" ng-show="hasDownload" has-download="hasDownload" data-map="map">
+              <li class="" data-gn-wfs-download="layer" ng-show="hasDownload" has-download="hasDownload" data-map="map" role="menuitem">
               </li>
 
               <!--Remove layer-->
-              <li class="">
+              <li class="" role="menuitem">
                 <a href=""
                   data-ng-click="removeLayer(layer, map)">
                   <span translate="">layerDelete</span>
                 </a>
               </li>
 
               <li class="list-group-item list-group-item-warning"
-                  data-ng-show="layer.get('errors').length > 0">
-
+                  data-ng-show="layer.get('errors').length > 0"
+                  role="menuitem">
                 <p data-ng-repeat="e in layer.get('errors')"
                   data-ng-bind-html="e"></p>
               </li>

web-ui/src/main/resources/catalog/components/viewer/legendpanel/partials/legendpanel.html

@@ -4,7 +4,8 @@
       class="list-group-item">
     <h5>{{layer.get('label')}}</h5>
     <p>
-      <img ng-src="{{layer.get('legend')}}"/>
+      <img ng-src="{{layer.get('legend')}}"
+           aria-label="{{layer.get('label')}} {{'mapLegend' | translate}}"/>
     </p>
     <h6 ng-if="layer.get('attribution')">
       <span data-translate="">Attribution</span>

web-ui/src/main/resources/catalog/components/viewer/localisation/partials/localisation.html

@@ -11,16 +11,19 @@
            data-ng-model-options="modelOptions"
            data-ng-change="locCtrl.search(query)"
            type="search"
-           class="form-control" placeholder="{{'searchPlaces' | translate}}">
+           class="form-control"
+           aria-label="{{'searchPlaces' | translate}}"
+           placeholder="{{'searchPlaces' | translate}}">
     <span class="input-group-btn">
       <button class="btn btn-default" type="submit"
-              data-ng-click="zoomToYou(map)">
+              data-ng-click="zoomToYou(map)"
+              aria-label="{{'ZoomToYourLocation' | translate}}">
         <span class="fa fa-crosshairs"></span>
         <span role="tooltip" data-translate="">ZoomToYourLocation</span>
       </button>
     </span>
   </div>
-  <div class="dropdown-menu" role="menu">
+  <div class="dropdown-menu" role="listbox">
     <h5 ng-if="(localisations | filter:query).length > 0" data-translate="">Locations</h5>
     <ul class="loc-defaults list-group">
       <li data-ng-repeat="loc in localisations | filter:query" class="list-group-item">

web-ui/src/main/resources/catalog/components/viewer/partials/mainviewer.html

@@ -17,88 +17,100 @@
   <!--Top right buttons - Tools-->
   <div class="tools" gi-btn-group>
     <button class="btn btn-default" ng-model="activeTools.addLayers"
-            type="submit" gi-btn="active" ng-hide="disabledTools.addLayers">
+            type="submit" gi-btn="active" ng-hide="disabledTools.addLayers"
+            aria-label="{{'addLayers' | translate}}">
       <span class="fa fa-plus"></span>
       <span class="label" ng-show="showToolLabels" translate="">addLayers</span>
       <span role="tooltip" translate="">addLayers</span>
     </button>
     <button class="btn btn-default" ng-model="activeTools.layers"
-            type="submit" gi-btn="active" ng-hide="disabledTools.layers">
+            type="submit" gi-btn="active" ng-hide="disabledTools.layers"
+            aria-label="{{'Layers' | translate}}">
       <span class="fa fa-tasks"></span>
       <span class="label" ng-show="showToolLabels" translate="">Layers</span>
       <span role="tooltip" translate="">Layers</span>
     </button>
     <button class="btn btn-default" ng-model="activeTools.legend"
-            type="submit" gi-btn="active" ng-hide="disabledTools.legend">
+            type="submit" gi-btn="active" ng-hide="disabledTools.legend"
+            aria-label="{{'mapLegend' | translate}}">
       <span class="fa fa-th-list"></span>
       <span class="label" ng-show="showToolLabels" translate="">mapLegend</span>
       <span role="tooltip" translate="">mapLegend</span>
     </button>
     <button class="btn btn-default" ng-model="activeTools.filter"
-            type="submit" gi-btn="active" ng-hide="disabledTools.filter">
+            type="submit" gi-btn="active" ng-hide="disabledTools.filter"
+            aria-label="{{'filterData' | translate}}">
       <span class="fa fa-filter"></span>
       <span class="label" ng-show="showToolLabels" translate="">filterData</span>
       <span role="tooltip" translate="">filterData</span>
     </button>
 
     <button class="btn btn-default" ng-model="activeTools.processes"
-            type="submit" gi-btn="active" ng-hide="disabledTools.processes">
+            type="submit" gi-btn="active" ng-hide="disabledTools.processes"
+            aria-label="{{'processesTool' | translate}}">
       <span class="fa fa-cogs"></span>
       <span class="label" ng-show="showToolLabels" translate="">processesTool</span>
       <span role="tooltip" translate="">processesTool</span>
     </button>
 
     <button class="btn btn-default" ng-model="activeTools.contexts"
-            type="submit" gi-btn="active" ng-hide="disabledTools.contexts">
+            type="submit" gi-btn="active" ng-hide="disabledTools.contexts"
+            aria-label="{{'Contexts' | translate}}">
       <span class="fa fa-map"></span>
       <span class="label" ng-show="showToolLabels" translate="">Contexts</span>
       <span role="tooltip" translate="">Contexts</span>
     </button>
     <button class="btn btn-default" ng-model="activeTools.print"
-            type="submit" gi-btn="active" ng-hide="is3dEnabled || disabledTools.print">
+            type="submit" gi-btn="active" ng-hide="is3dEnabled || disabledTools.print"
+            aria-label="{{'Print' | translate}}">
       <span class="fa fa-print"></span>
       <span class="label" ng-show="showToolLabels" translate="">Print</span>
       <span role="tooltip" translate="">Print</span>
     </button>
 
     <button class="btn btn-default" ng-model="mInteraction.active"
-            type="submit" gi-btn="active" ng-hide="is3dEnabled || disabledTools.mInteraction">
+            type="submit" gi-btn="active" ng-hide="is3dEnabled || disabledTools.mInteraction"
+            aria-label="{{'Measure' | translate}}">
       <span class="fa fa-expand"></span>
       <span class="label" ng-show="showToolLabels" translate="">Measure</span>
       <span role="tooltip" translate="">Measure</span>
     </button>
     <button class="btn btn-default" ng-model="drawVector.active"
-            type="submit" gi-btn="active" ng-hide="is3dEnabled || disabledTools.drawVector">
+            type="submit" gi-btn="active" ng-hide="is3dEnabled || disabledTools.drawVector"
+            aria-label="{{'Annotations' | translate}}">
       <span class="fa fa-pencil"></span>
       <span class="label" ng-show="showToolLabels" translate="">Annotations</span>
       <span role="tooltip" translate="">Annotations</span>
     </button>
 
-    <div class="tools-spacer"></div>
-
-    <button class="btn btn-default" type="submit" ng-click="syncMod()" ng-hide="disabledTools.syncAllLayers">
+    <button class="btn btn-default" type="submit" ng-click="syncMod()" ng-hide="disabledTools.syncAllLayers"
+            aria-label="{{'syncAllLayers' | translate}}">
       <span class="fa fa-sync" ng-class="synAllLayers ? 'fa-lock' : 'fa-unlock'"/>
       <span class="label" ng-show="showToolLabels" translate="">syncAllLayers</span>
       <span role="tooltip" translate="">syncAllLayers</span>
     </button>
   </div>
   <!--Bottom right buttons - Navigation-->
   <div class="tools control-tools">
-    <button class="btn btn-default" type="submit" data-ng-click="zoom(map,1)">
+    <button class="btn btn-default" type="submit" data-ng-click="zoom(map,1)"
+            aria-label="{{'ZoomIn' | translate}}">
       <span class="fa fa-plus"></span>
       <span role="tooltip" data-translate="">ZoomIn</span>
     </button>
-    <button class="btn btn-default" type="submit" data-ng-click="zoom(map,-1)">
+    <button class="btn btn-default" type="submit" data-ng-click="zoom(map,-1)"
+            aria-label="{{'ZoomOut' | translate}}">
       <span class="fa fa-minus"></span>
       <span role="tooltip" data-translate="">ZoomOut</span>
     </button>
-    <button class="btn btn-default" type="submit" data-ng-click="zoomToMaxExtent(map)">
+    <button class="btn btn-default" type="submit" data-ng-click="zoomToMaxExtent(map)"
+            aria-label="{{'ZoomToMapMaxExtent' | translate}}">
       <span class="fa fa-arrows-alt"></span>
       <span role="tooltip" data-translate="">ZoomToMapMaxExtent</span>
     </button>
     <button class="btn btn-default" type="submit"
             data-ng-if="is3DModeAllowed"
-            data-ng-click="switch2D3D(map)">
+            data-ng-click="switch2D3D(map)"
+            aria-label="{{'switchFrom2DTo3D' | translate}}">
       <span class="fa fa-cube"
             data-ng-class="is3dEnabled ? 'fa-cube' : 'fa-square-o'"/>
       <span role="tooltip" data-translate="">switchFrom2DTo3D</span>
@@ -123,19 +135,23 @@ <h3>{{'AddALayer' | translate}}
       <tabset class="info-tabset">
 
         <tab heading="{{'addLayerFromMaps' | translate}}"
-             active="addLayerTabs.maps">
+             active="addLayerTabs.maps"
+             role="tab">
           <br/>
           <div data-gn-search-layer-for-map="map" data-mode="map"></div>
         </tab>
 
         <tab heading="{{'SearchLayer' | translate}}"
-             active="addLayerTabs.search">
+             active="addLayerTabs.search"
+             role="tab">
           <br/>
           <div data-gn-search-layer-for-map="map"></div>
         </tab>
 
         <tab heading="{{'addLayerFromServices' | translate}}"
-             active="addLayerTabs.services">
+             active="addLayerTabs.services"
+             role="tab">
+          <br/>   
           <div gn-wms-import="wms"
                gn-wms-import-map="map"
                gn-wms-import-url="addLayerUrl.wms"
@@ -150,15 +166,15 @@ <h3>{{'AddALayer' | translate}}
                services-list-from-catalog="true"></div>
         </tab>
         <tab heading="{{'addLayerFromFiles' | translate}}"
-             active="addLayerTabs.kml">
+             active="addLayerTabs.kml"
+             role="tab">
           <label>{{'LayerKML' | translate}}</label>
           <div gn-kml-import="" gn-kml-import-map="map"></div>
         </tab>
       </tabset>
     </div>
   </div>
 
-
   <div class="panel panel-default panel-tools"
        ng-show="activeTools.layers">
     <div class="panel-heading">
@@ -187,8 +203,6 @@ <h3>{{'ManageLayers' | translate}}
     <div class="panel-carousel" gn-legend-panel="map"></div>
   </div>
 
-
-
   <div class="panel panel-default panel-tools gn-data-filter-view"
        ng-show="activeTools.filter">
     <div class="panel-heading">
@@ -204,7 +218,6 @@ <h3>{{'filterData' | translate}}
     </div>
   </div>
 
-
   <div class="panel panel-default panel-tools"
        ng-show="activeTools.contexts">
     <div class="panel-heading">
@@ -293,12 +306,14 @@ <h3>{{'processesTool' | translate}}
     <div class="panel-body">
       <tabset class="info-tabset">
         <tab heading="{{'wpsByUrl' | translate}}"
-             active="wpsTabs.byUrl">
+             active="wpsTabs.byUrl"
+             role="tab">
           <br/>
           <gn-wps-url-discovery wps-link="selectedWps"/>
         </tab>
         <tab heading="{{'wpsRecent' | translate}}"
-             active="wpsTabs.recent">
+             active="wpsTabs.recent"
+             role="tab">
           <br/>
           <gn-wps-recent-list wps-link="selectedWps"/>
         </tab>

web-ui/src/main/resources/catalog/components/viewer/searchlayerformap/partials/searchlayerformap.html

@@ -10,6 +10,7 @@
                type="text"
                data-ng-model="searchObj.params.any"
                data-ng-model-options="modelOptions"
+               aria-label="{{'search' | translate}}"
                placeholder="{{'search' | translate}}" autofocus=""/>
       </div>
     </div>