Make zoomToExtent control use <button> instead of <a>

css/ol.css

@@ -126,7 +126,7 @@
 }
 
 .ol-zoom button,
-.ol-zoom-extent a,
+.ol-zoom-extent button,
 .ol-full-screen a {
   display: block;
   margin: 1px;
@@ -138,37 +138,36 @@
   text-align: center;
   height: 1.375em;
   width: 1.375em;
-  line-height: 1.375em;
+  line-height: .4em;
   background-color: #7b98bc;
   background-color: rgba(0,60,136,0.5);
   border: none;
 }
-.ol-zoom button {
-    line-height: .4em;
-}
-.ol-zoom button::-moz-focus-inner {
+.ol-zoom button::-moz-focus-inner,
+.ol-zoom-extent button::-moz-focus-inner {
   border: none;
   padding: 0;
 }
-.ol-zoom-extent a {
+.ol-zoom-extent button {
   font-size: 16px;
   line-height: 22px;
   border-radius: 2px;
 }
 .ol-touch .ol-zoom button,
 .ol-touch .ol-full-screen a,
-.ol-touch .ol-zoom-extent a {
+.ol-touch .ol-zoom-extent button {
   font-size: 1.5em;
 }
 .ol-zoom button:hover,
 .ol-zoom button:focus,
-.ol-zoom-extent a:hover {
+.ol-zoom-extent button:hover,
+.ol-zoom-extent button:focus {
   color: #fff;
   text-decoration: none;
   background-color: #4c6079;
   background-color: rgba(0,60,136,0.7);
 }
-.ol-zoom-extent a:after {
+.ol-zoom-extent button:after {
     content: "E";
 }
 .ol-zoom-in {
@@ -205,9 +204,11 @@ a.ol-full-screen-true:after {
 /* show a tooltip offset to below and right */
 .ol-has-tooltip:hover [role=tooltip], .ol-has-tooltip:focus [role=tooltip] {
   clip: auto;
-  padding: .2em .4em;
-  height: auto;
+  padding: 0 .4em;
+  font-size: .8em;
+  height: 1.2em;
   width: auto;
+  line-height: 1.2em;
   z-index: 1100;
   max-height: 100px;
   white-space: nowrap;
@@ -218,8 +219,12 @@ a.ol-full-screen-true:after {
   border: 3px solid rgba(255, 255, 255, 0.0);
   border-left-width: 0;
   border-radius: 0 4px 4px 0;
+  bottom: .3em;
+  left: 2.2em;
+}
+.ol-zoom .ol-has-tooltip:hover [role=tooltip],
+.ol-zoom .ol-has-tooltip:focus [role=tooltip] {
   bottom: 1.1em;
-  left: 2em;
 }
 
 .ol-zoomslider {
@@ -249,10 +254,11 @@ a.ol-full-screen-true:after {
   height: 20px;
   width: 24px;
 }
-.ol-zoom-extent a,
+.ol-zoom-extent button,
 .ol-attribution,
 .ol-full-screen a,
 .ol-scale-line-inner,
-.ol-zoom a {
+.ol-zoom button,
+.ol-has-tooltip [role=tooltip] {
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
 }

src/objectliterals.jsdoc

@@ -275,6 +275,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 zoom-extent 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/zoomcontrol.js

@@ -97,7 +97,6 @@ goog.inherits(ol.control.Zoom, ol.control.Control);
  */
 ol.control.Zoom.prototype.zoomByDelta_ = function(delta, browserEvent) {
   // prevent the anchor from getting appended to the url
-  browserEvent.preventDefault();
   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, [
@@ -60,7 +66,6 @@ goog.inherits(ol.control.ZoomToExtent, ol.control.Control);
  */
 ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function(browserEvent) {
   // prevent #zoomExtent anchor from getting appended to the url
-  browserEvent.preventDefault();
   var map = this.getMap();
   var view = map.getView();
   goog.asserts.assert(goog.isDef(view));