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

css/ol.css

@@ -34,11 +34,6 @@
   white-space: nowrap;
 }
 
-.ol-full-screen a:hover {
-  /* IE <= 8 doesn't support rgba, fall back to a light blue */
-  background: #4c6079;
-  background: rgba(0,60,136,0.7);
-}
 .ol-logo {
   bottom: 0;
   left: 0;
@@ -103,7 +98,7 @@
 .ol-zoom:hover,
 .ol-zoom-extent:hover,
 .ol-full-screen:hover {
-  background-color: rgba(255,255,255,0.5);
+  background-color: rgba(255,255,255,0.6);
 }
 .ol-zoom {
   top: 8px;
@@ -127,7 +122,7 @@
 
 .ol-zoom button,
 .ol-zoom-extent button,
-.ol-full-screen a {
+.ol-full-screen button {
   display: block;
   margin: 1px;
   padding: 0;
@@ -154,15 +149,16 @@
   border-radius: 2px;
 }
 .ol-touch .ol-zoom button,
-.ol-touch .ol-full-screen a,
+.ol-touch .ol-full-screen button,
 .ol-touch .ol-zoom-extent button {
   font-size: 1.5em;
 }
 .ol-zoom button:hover,
 .ol-zoom button:focus,
 .ol-zoom-extent button:hover,
-.ol-zoom-extent button:focus {
-  color: #fff;
+.ol-zoom-extent button:focus,
+.ol-full-screen button:hover,
+.ol-full-screen button:focus {
   text-decoration: none;
   background-color: #4c6079;
   background-color: rgba(0,60,136,0.7);
@@ -176,15 +172,12 @@
 .ol-zoom-out {
   border-radius: 0 0 2px 2px;
 }
-a.ol-full-screen-false:after {
+button.ol-full-screen-false:after {
   content: "\2194";
 }
-a.ol-full-screen-true:after {
+button.ol-full-screen-true:after {
   content: "\00d7";
 }
-.ol-full-screen a {
-  border-radius: 2px;
-}
 
 /* invisible but not hidden */
 .ol-has-tooltip [role=tooltip] {
@@ -214,9 +207,9 @@ a.ol-full-screen-true:after {
   white-space: nowrap;
   display: inline-block;
   background: #FFF;
-  background: rgba(255,255,255,0.5);
+  background: rgba(255,255,255,0.6);
   color: #000;
-  border: 3px solid rgba(255, 255, 255, 0.0);
+  border: 3px solid rgba(255,255,255,0);
   border-left-width: 0;
   border-radius: 0 4px 4px 0;
   bottom: .3em;
@@ -226,6 +219,12 @@ a.ol-full-screen-true:after {
 .ol-zoom .ol-has-tooltip:focus [role=tooltip] {
   bottom: 1.1em;
 }
+.ol-full-screen .ol-has-tooltip:hover [role=tooltip],
+.ol-full-screen .ol-has-tooltip:focus [role=tooltip] {
+  right: 2.2em;
+  left: auto;
+  border-radius: 4px 0 0 4px;
+}
 
 .ol-zoomslider {
   position: absolute;
@@ -256,7 +255,7 @@ a.ol-full-screen-true:after {
 }
 .ol-zoom-extent button,
 .ol-attribution,
-.ol-full-screen a,
+.ol-full-screen button,
 .ol-scale-line-inner,
 .ol-zoom button,
 .ol-has-tooltip [role=tooltip] {

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 full-screen tip. Default is `Fullscreen`
  * @property {boolean|undefined} keys Full keyboard access.
  * @property {Element|undefined} target Target.
  * @todo stability experimental

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,
@@ -76,7 +83,6 @@ ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) {
   if (!goog.dom.fullscreen.isSupported()) {
     return;
   }
-  browserEvent.preventDefault();
   var map = this.getMap();
   if (goog.isNull(map)) {
     return;