Merge pull request #1725 from tonio/a11y-enhanced-zoomcontrol

Enhance controls accessibility

src/objectliterals.jsdoc

@@ -216,6 +216,7 @@
 /**
  * @typedef {Object} olx.control.FullScreenOptions
  * @property {string|undefined} className CSS class name. Default is `ol-full-screen`.
+ * @property {string|undefined} tipLabel Text label to use for the button tip. Default is `Toggle full-screen`
  * @property {boolean|undefined} keys Full keyboard access.
  * @property {Element|undefined} target Target.
  * @todo stability experimental
@@ -256,6 +257,8 @@
  * @property {string|undefined} className CSS class name. Default is `ol-zoom`.
  * @property {string|undefined} zoomInLabel Text label to use for the zoom-in button. Default is `+`
  * @property {string|undefined} zoomOutLabel Text label to use for the zoom-out button. Default is `-`
+ * @property {string|undefined} zoomInTipLabel Text label to use for the button tip. Default is `Zoom in`
+ * @property {string|undefined} zoomOutTipLabel Text label to use for the button tip. Default is `Zoom out`
  * @property {number|undefined} delta The zoom delta applied on each click.
  * @property {Element|undefined} target Target.
  * @todo stability experimental
@@ -273,6 +276,7 @@
  * @typedef {Object} olx.control.ZoomToExtentOptions
  * @property {string|undefined} className Class name. Default is `ol-zoom-extent`.
  * @property {Element|undefined} target Target.
+ * @property {string|undefined} tipLabel Text label to use for the button tip. Default is `Zoom to extent`
  * @property {ol.Extent|undefined} extent The extent to zoom to. If
  *     undefined the validity extent of the view projection is used.
  * @todo stability experimental

src/ol/control/controldefaults.js

@@ -17,6 +17,14 @@ ol.control.defaults = function(opt_options) {
 
   var controls = new ol.Collection();
 
+  var zoomControl = goog.isDef(options.zoom) ?
+      options.zoom : true;
+  if (zoomControl) {
+    var zoomControlOptions = goog.isDef(options.zoomOptions) ?
+        options.zoomOptions : undefined;
+    controls.push(new ol.control.Zoom(zoomControlOptions));
+  }
+
   var attributionControl = goog.isDef(options.attribution) ?
       options.attribution : true;
   if (attributionControl) {
@@ -33,14 +41,6 @@ ol.control.defaults = function(opt_options) {
     controls.push(new ol.control.Logo(logoControlOptions));
   }
 
-  var zoomControl = goog.isDef(options.zoom) ?
-      options.zoom : true;
-  if (zoomControl) {
-    var zoomControlOptions = goog.isDef(options.zoomOptions) ?
-        options.zoomOptions : undefined;
-    controls.push(new ol.control.Zoom(zoomControlOptions));
-  }
-
   return controls;
 
 };

src/ol/control/fullscreencontrol.js

@@ -36,11 +36,18 @@ ol.control.FullScreen = function(opt_options) {
   this.cssClassName_ = goog.isDef(options.className) ?
       options.className : 'ol-full-screen';
 
-  var aElement = goog.dom.createDom(goog.dom.TagName.A, {
-    'href': '#fullScreen',
-    'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen()
+  var tipLabel = goog.isDef(options.tipLabel) ?
+      options.tipLabel : 'Toggle full-screen';
+  var tip = goog.dom.createDom(goog.dom.TagName.SPAN, {
+    'role' : 'tooltip'
+  }, tipLabel);
+
+  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+    'class': this.cssClassName_ + '-' + goog.dom.fullscreen.isFullScreen() +
+        ' ol-has-tooltip'
   });
-  goog.events.listen(aElement, [
+  goog.dom.appendChild(button, tip);
+  goog.events.listen(button, [
     goog.events.EventType.CLICK,
     goog.events.EventType.TOUCHEND
   ], this.handleClick_, false, this);
@@ -51,7 +58,7 @@ ol.control.FullScreen = function(opt_options) {
   var element = goog.dom.createDom(goog.dom.TagName.DIV, {
     'class': this.cssClassName_ + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
         (!goog.dom.fullscreen.isSupported() ? ol.css.CLASS_UNSUPPORTED : '')
-  }, aElement);
+  }, button);
 
   goog.base(this, {
     element: element,

src/ol/control/zoomcontrol.js

@@ -37,19 +37,33 @@ ol.control.Zoom = function(opt_options) {
   var zoomOutLabel = goog.isDef(options.zoomOutLabel) ?
       options.zoomOutLabel : '\u2212';
 
-  var inElement = goog.dom.createDom(goog.dom.TagName.A, {
-    'href': '#zoomIn',
-    'class': className + '-in'
-  }, zoomInLabel);
+  var zoomInTipLabel = goog.isDef(options.zoomTipLabel) ?
+      options.zoomInTipLabel : 'Zoom in';
+  var zoomOutTipLabel = goog.isDef(options.zoomOutTipLabel) ?
+      options.zoomOutTipLabel : 'Zoom out';
+
+  var tTipZoomIn = goog.dom.createDom(goog.dom.TagName.SPAN, {
+    'role' : 'tooltip'
+  }, zoomInTipLabel);
+  var inElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+    'class': className + '-in ol-has-tooltip',
+    'name' : 'ZoomIn',
+    'type' : 'button'
+  }, tTipZoomIn, zoomInLabel);
+
   goog.events.listen(inElement, [
     goog.events.EventType.TOUCHEND,
     goog.events.EventType.CLICK
   ], goog.partial(ol.control.Zoom.prototype.zoomByDelta_, delta), false, this);
 
-  var outElement = goog.dom.createDom(goog.dom.TagName.A, {
-    'href': '#zoomOut',
-    'class': className + '-out'
-  }, zoomOutLabel);
+  var tTipsZoomOut = goog.dom.createDom(goog.dom.TagName.SPAN, {
+    'role' : 'tooltip',
+    'type' : 'button'
+  }, zoomOutTipLabel);
+  var outElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+    'class': className + '-out  ol-has-tooltip',
+    'name' : 'ZoomOut'
+  }, tTipsZoomOut, zoomOutLabel);
   goog.events.listen(outElement, [
     goog.events.EventType.TOUCHEND,
     goog.events.EventType.CLICK
@@ -80,8 +94,8 @@ goog.inherits(ol.control.Zoom, ol.control.Control);
  * @private
  */
 ol.control.Zoom.prototype.zoomByDelta_ = function(delta, browserEvent) {
-  // prevent the anchor from getting appended to the url
   browserEvent.preventDefault();
+  // prevent the anchor from getting appended to the url
   var map = this.getMap();
   // FIXME works for View2D only
   var view = map.getView();

src/ol/control/zoomtoextentcontrol.js

@@ -33,12 +33,18 @@ ol.control.ZoomToExtent = function(opt_options) {
   var className = goog.isDef(options.className) ? options.className :
       'ol-zoom-extent';
 
+  var tipLabel = goog.isDef(options.tipLabel) ?
+      options.tipLabel : 'Fit to extent';
+  var tip = goog.dom.createDom(goog.dom.TagName.SPAN, {
+    'role' : 'tooltip'
+  }, tipLabel);
   var element = goog.dom.createDom(goog.dom.TagName.DIV, {
     'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
   });
-  var button = goog.dom.createDom(goog.dom.TagName.A, {
-    'href': '#zoomExtent'
+  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+    'class': 'ol-has-tooltip'
   });
+  goog.dom.appendChild(button, tip);
   goog.dom.appendChild(element, button);
 
   goog.events.listen(element, [
@@ -59,8 +65,8 @@ goog.inherits(ol.control.ZoomToExtent, ol.control.Control);
  * @private
  */
 ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function(browserEvent) {
-  // prevent #zoomExtent anchor from getting appended to the url
   browserEvent.preventDefault();
+  // prevent #zoomExtent anchor from getting appended to the url
   var map = this.getMap();
   var view = map.getView();
   goog.asserts.assert(goog.isDef(view));