From 5f4ebde5b7d2e82fa8468687def65c35ac5b2de4 Mon Sep 17 00:00:00 2001
From: Robert Linder <26493779+Malvoz@users.noreply.github.com>
Date: Mon, 13 Jul 2020 21:59:34 +0200
Subject: [PATCH] Add native appearance to map element(s) (#108)

* Add native appearance to map element(s)

- Add default size of 300x150px to the map element(s)
- Restore default UA outline styles for accessible sequential navigation
- Enable author controlled background-color on the map element(s)
- Pre-style to mitigate FOUC

* Address feedback
---
 index-map-area.html | 49 ++++++++++++++++++++++++++++++++++++++-------
 index-mm-mapp.html  | 46 ++++++++++++++++++++++++++++++++++++------
 index-web-map.html  | 45 ++++++++++++++++++++++++++++++++++++-----
 index.html          | 45 ++++++++++++++++++++++++++++++++++++-----
 src/layer.js        |  4 ----
 src/mapml.css       | 36 +++++++++++++++++++++++++++++++++
 src/mapml.js        |  2 +-
 src/mm-mapp.js      | 36 ++++++++++++++++++++++++---------
 src/web-map.js      | 42 +++++++++++++++++++++++++++++---------
 9 files changed, 258 insertions(+), 47 deletions(-)
diff --git a/index-map-area.html b/index-map-area.html
index 788c914ab..bb7945683 100644
--- a/index-map-area.html
+++ b/index-map-area.html
@@ -6,27 +6,62 @@
     <title>index-map-area.html</title>
     <script type="module" src="dist/web-map.js"></script>
     <style>
-      html {
+      html,
+      body {
         height: 100%;
       }
-      body,
-      map {
-        height: inherit;
-      }
       * {
         margin: 0;
         padding: 0;
       }
+      
+      /* Specifying the `:defined` selector is recommended to style the map
+      element, such that styles don't apply when fallback content is in use
+      (e.g. when scripting is disabled or when custom/built-in elements isn't
+      supported in the browser). */
+      map[is="web-map"]:defined {
+        /* Responsive map. */
+        /* max-width: 100%; */
+        
+        /* Full viewport. */
+        /* width: 100%; */
+        /* height: 100%; */
+        
+        /* Remove default (native-like) border. */
+        /* border: none; */
+      }
+      
+      /* Pre-style to avoid FOUC of inline layer- and fallback content. */
+      map[is="web-map"]:not(:defined) + img[usemap],
+      map[is="web-map"]:not(:defined) > :not(area):not(.web-map) {
+        display: none;
+      }
+      /* Ensure inline layer content is hidden if custom/built-in elements isn't
+      supported, or if javascript is disabled. This needs to be defined separately
+      from the above, because the `:not(:defined)` selector invalidates the entire
+      declaration in browsers that do not support it. */
+      layer- {
+        display: none;
+      }
     </style>
+    <noscript>
+      <style>
+        /* Ensure client-side image map fallbacks are displayed if custom/built-in
+        elements is supported but javascript is disabled. */
+        map[is="web-map"]:not(:defined) + img[usemap] {
+          display: initial;
+        }
+      </style>
+    </noscript>
   </head>
   <body>
-    <img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area">
-    <map name="dowslake" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" controls hidden>
+    <map name="dowslake" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" controls>
       <layer- id="osm" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" label="Open Street Map" checked></layer->
       <area is="map-area" id="doughnut" alt="Circle" href="https://example.com/circle/" coords="250,250,25" shape="circle" style="fill: white; stroke: aqua; stroke-width: 5px; fill-opacity: 0;">
       <area is="map-area" id="hole" coords="250,250,7" shape="circle" style="fill: blue; stroke: none; fill-opacity: 0.3;">
       <area is="map-area" id="rect" href="https://example.com/rectangle/" alt="Rectangle" coords="345,290,415,320" shape="rect" style="fill: greenyellow; stroke: blue; stroke-width: 3px; fill-opacity: 0.4;">
       <area is="map-area" id="poly" href="https://example.com/polygon/" alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly" style="fill: pink; stroke: blue; stroke-width: 3px; fill-opacity: 0.4;">
     </map>
+    <img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area">
   </body>
 </html>
diff --git a/index-mm-mapp.html b/index-mm-mapp.html
index 9123c403f..644fababd 100644
--- a/index-mm-mapp.html
+++ b/index-mm-mapp.html
@@ -6,18 +6,52 @@
     <title>index-mm-mapp.html</title>
     <script type="module" src="dist/mm-mapp.js"></script>
     <style>
-      html {
+      html,
+      body {
         height: 100%;
       }
       * {
-        margin: 0px;
-        padding: 0px;
+        margin: 0;
+        padding: 0;
       }
-      body,
-      mm-mapp {
-        height: inherit;
+      
+      /* Specifying the `:defined` selector is recommended to style the map
+      element, such that styles don't apply when fallback content is in use
+      (e.g. when scripting is disabled or when custom/built-in elements isn't
+      supported in the browser). */
+      mm-mapp:defined {
+        /* Responsive map. */
+        /* max-width: 100%; */
+        
+        /* Full viewport. */
+        /* width: 100%; */
+        /* height: 100%; */
+        
+        /* Remove default (native-like) border. */
+        /* border: none; */
+      }
+      
+      /* Pre-style to avoid FOUC of inline layer- and fallback content. */
+      mm-mapp:not(:defined) > * {
+        display: none;
+      }
+      /* Ensure inline layer content is hidden if custom/built-in elements isn't
+      supported, or if javascript is disabled. This needs to be defined separately
+      from the above, because the `:not(:defined)` selector invalidates the entire
+      declaration in browsers that do not support it. */
+      layer- {
+        display: none;
       }
     </style>
+    <noscript>
+      <style>
+        /* Ensure fallback content (children of the map element) is displayed if
+        custom/built-in elements is supported but javascript is disabled. */
+        mm-mapp:not(:defined) > :not(layer-) {
+          display: initial;
+        }
+      </style>
+    </noscript>
   </head>
   <body>
     <mm-mapp projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist="nofullscreen">
diff --git a/index-web-map.html b/index-web-map.html
index b94569f96..64fa5f4c3 100644
--- a/index-web-map.html
+++ b/index-web-map.html
@@ -6,18 +6,53 @@
     <title>index-web-map.html</title>
     <script type="module" src="dist/web-map.js"></script>
     <style>
-      html {
+      html,
+      body {
         height: 100%;
       }
-      body,
-      map {
-        height: inherit;
-      }
       * {
         margin: 0;
         padding: 0;
       }
+      
+      /* Specifying the `:defined` selector is recommended to style the map
+      element, such that styles don't apply when fallback content is in use
+      (e.g. when scripting is disabled or when custom/built-in elements isn't
+      supported in the browser). */
+      map[is="web-map"]:defined {
+        /* Responsive map. */
+        /* max-width: 100%; */
+        
+        /* Full viewport. */
+        /* width: 100%; */
+        /* height: 100%; */
+        
+        /* Remove default (native-like) border. */
+        /* border: none; */
+      }
+      
+      /* Pre-style to avoid FOUC of inline layer- and fallback content. */
+      map[is="web-map"]:not(:defined) + img[usemap],
+      map[is="web-map"]:not(:defined) > :not(area):not(.web-map) {
+        display: none;
+      }
+      /* Ensure inline layer content is hidden if custom/built-in elements isn't
+      supported, or if javascript is disabled. This needs to be defined separately
+      from the above, because the `:not(:defined)` selector invalidates the entire
+      declaration in browsers that do not support it. */
+      layer- {
+        display: none;
+      }
     </style>
+    <noscript>
+      <style>
+        /* Ensure client-side image map fallbacks are displayed if custom/built-in
+        elements is supported but javascript is disabled. */
+        map[is="web-map"]:not(:defined) + img[usemap] {
+          display: initial;
+        }
+      </style>
+    </noscript>
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
diff --git a/index.html b/index.html
index e5cfb0216..e7dae4a17 100644
--- a/index.html
+++ b/index.html
@@ -6,18 +6,53 @@
     <title>index-map.html</title>
     <script type="module" src="dist/web-map.js"></script>
     <style>
-      html {
+      html,
+      body {
         height: 100%;
       }
-      body,
-      map {
-        height: inherit;
-      }
       * {
         margin: 0;
         padding: 0;
       }
+      
+      /* Specifying the `:defined` selector is recommended to style the map
+      element, such that styles don't apply when fallback content is in use
+      (e.g. when scripting is disabled or when custom/built-in elements isn't
+      supported in the browser). */
+      map[is="web-map"]:defined {
+        /* Responsive map. */
+        /* max-width: 100%; */
+        
+        /* Full viewport. */
+        /* width: 100%; */
+        /* height: 100%; */
+        
+        /* Remove default (native-like) border. */
+        /* border: none; */
+      }
+      
+      /* Pre-style to avoid FOUC of inline layer- and fallback content. */
+      map[is="web-map"]:not(:defined) + img[usemap],
+      map[is="web-map"]:not(:defined) > :not(area):not(.web-map) {
+        display: none;
+      }
+      /* Ensure inline layer content is hidden if custom/built-in elements isn't
+      supported, or if javascript is disabled. This needs to be defined separately
+      from the above, because the `:not(:defined)` selector invalidates the entire
+      declaration in browsers that do not support it. */
+      layer- {
+        display: none;
+      }
     </style>
+    <noscript>
+      <style>
+        /* Ensure client-side image map fallbacks are displayed if custom/built-in
+        elements is supported but javascript is disabled. */
+        map[is="web-map"]:not(:defined) + img[usemap] {
+          display: initial;
+        }
+      </style>
+    </noscript>
   </head>
   <body>
     <map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
diff --git a/src/layer.js b/src/layer.js
index 823b05f9e..f58488231 100644
--- a/src/layer.js
+++ b/src/layer.js
@@ -91,10 +91,6 @@ export class MapLayer extends HTMLElement {
     }
   }
   connectedCallback() {
-    // this avoids displaying inline mapml content, such as features and inputs
-    // but does not avoid FOUC. 
-    // To avoid FOUC, use <layer- style="display: none"...>...</layer->
-    this.style = "display: none";
     this._ready();
     // if the map has been attached, set this layer up wrt Leaflet map
     if (this.parentNode._map) {
diff --git a/src/mapml.css b/src/mapml.css
index c245c42ea..fdd371d30 100644
--- a/src/mapml.css
+++ b/src/mapml.css
@@ -1,3 +1,11 @@
+.leaflet-container {
+  /* Override the `background-color` set by leaflet.css, enables inheritance from
+     the map or <body> element (same as iframes) to give the author more control. */
+  background-color: transparent;
+  max-height: 100%;
+  max-width: 100%;
+}
+
 /* this is required by tiles which are actually divs with multiple images in them */
 .leaflet-tile img {
         position: absolute;
@@ -42,3 +50,31 @@
 .leaflet-control-layers label {
     display: inline;
 }
+
+.leaflet-control-layers.leaflet-control {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+/* Disable dragging of controls. */
+.leaflet-control a {
+  -webkit-user-drag: none;
+}
+
+/* Hide unintended highlighting of controls from clicking the map display in
+   quick succession. This is a workaround for `user-select: contain`, since it has
+   virtually no browser support: https://www.chromestatus.com/feature/5730263904550912. */
+.leaflet-control a::selection,
+.leaflet-popup-close-button::selection,
+.leaflet-control-attribution::selection {
+  background-color: transparent;
+}
+
+/* Restore the default focus outline of UA stylesheets,
+   which Leaflet unfortunately removes (https://github.com/Leaflet/Leaflet/issues/6986). */
+.leaflet-container :focus {
+  outline-color: -webkit-focus-ring-color!important;
+  outline-style: auto!important;
+  outline-width: thin!important;
+  outline: revert!important;
+}
diff --git a/src/mapml.js b/src/mapml.js
index 12b9d0dac..49f3dc43f 100644
--- a/src/mapml.js
+++ b/src/mapml.js
@@ -1228,7 +1228,7 @@ M.MapMLLayer = L.Layer.extend({
         }
         label.appendChild(input);
         label.appendChild(name);
-        opacityControlSummaryLabel.innerText = 'opacity';
+        opacityControlSummaryLabel.innerText = 'Opacity';
         opacity.id = "o" + L.stamp(opacity);
         opacityControlSummaryLabel.setAttribute('for', opacity.id);
         opacityControlSummary.appendChild(opacityControlSummaryLabel);
diff --git a/src/mm-mapp.js b/src/mm-mapp.js
index 60387fe57..b045883be 100644
--- a/src/mm-mapp.js
+++ b/src/mm-mapp.js
@@ -72,22 +72,40 @@ export class MmMapp extends HTMLElement {
   constructor() {
     // Always call super first in constructor
     super();
-    // SUPER IMPORTANT TO SET THIS UP FIRST SO THAT LEAFLET ISN'T WORKING WITH
-    // A HEIGHT=0 BOX BY DEFAULT.
-    this.style.display = "block";
+    
     let tmpl = document.createElement('template');
     tmpl.innerHTML =
     `<link rel="stylesheet" href="${new URL("leaflet.css", import.meta.url).href}">` +
     `<link rel="stylesheet" href="${new URL("leaflet.fullscreen.css", import.meta.url).href}">` +
     `<link rel="stylesheet" href="${new URL("mapml.css", import.meta.url).href}">`;
+    
     let shadowRoot = this.attachShadow({mode: 'open'});
     this._container = document.createElement('div');
-    // you have to include this otherwise you have to use quirks mode,
-    // (by omitting the doctype), which is bad.
-    this._container.style.height = "100%";
+    
+    // Set default styles for the map element.
+    let mapDefaultCSS = document.createElement('style');
+    mapDefaultCSS.innerHTML =
+    `:host {` +
+    `contain: content;` + // Contain layout and paint calculations within the map element.
+    `display: inline-block;` + // This together with dimension properties is required so that Leaflet isn't working with a height=0 box by default.
+    `overflow: hidden;` + // Make the map element behave and look more like a native element.
+    `height: 150px;` + // Provide a "default object size" (https://github.com/Maps4HTML/HTML-Map-Element/issues/31).
+    `width: 300px;` +
+    `border-width: 2px;` +
+    `border-style: inset;` +
+    `}`;
+    
+    // Hide all (light DOM) children of the map element.
+    let hideElementsCSS = document.createElement('style');
+    hideElementsCSS.innerHTML =
+    `mm-mapp > * {` +
+    `display: none!important;` +
+    `}`;
+
+    shadowRoot.appendChild(mapDefaultCSS);
     shadowRoot.appendChild(tmpl.content.cloneNode(true));
     shadowRoot.appendChild(this._container);
-
+    this.appendChild(hideElementsCSS);
   }
   connectedCallback() {
     if (this.isConnected) {
@@ -112,7 +130,7 @@ export class MmMapp extends HTMLElement {
       }
 
       if (!this.height || this.height !== h) {
-        this._container.style.height = h;
+        this._container.style.height = hpx;
         this.height = h;
       } else {
         this._container.style.height = this.height+"px";
@@ -136,7 +154,7 @@ export class MmMapp extends HTMLElement {
         });
 
         // the attribution control is not optional
-        this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps4HTML Community Group">Maps4HTML</a> | <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
+        this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps4HTML Community Group">Maps4HTML</a> | <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
 
         // optionally add controls to the map
         if (this.controls) {
diff --git a/src/web-map.js b/src/web-map.js
index 23428e270..b90acfa14 100644
--- a/src/web-map.js
+++ b/src/web-map.js
@@ -76,7 +76,7 @@ export class WebMap extends HTMLMapElement {
   constructor() {
     // Always call super first in constructor
     super();
-    this.style.display = "block";
+
     let tmpl = document.createElement('template');
     tmpl.innerHTML =
     `<link rel="stylesheet" href="${new URL("leaflet.css", import.meta.url).href}">` +
@@ -84,18 +84,40 @@ export class WebMap extends HTMLMapElement {
     `<link rel="stylesheet" href="${new URL("mapml.css", import.meta.url).href}">`;
 
     const rootDiv = document.createElement('div');
-    // without this you have to omit the doctype, which is bad because
-    // it triggers quirks mode.
-    rootDiv.style.height = "100%";
-    // the map element is inline by default
-    this.style.display = "block";
+    rootDiv.classList.add('web-map');
+
     let shadowRoot = rootDiv.attachShadow({mode: 'open'});
     this._container = document.createElement('div');
-    this._container.style.minWidth = "100%";
-    this._container.style.minHeight = "100%";
+    
+    // Set default styles for the map element.
+    let mapDefaultCSS = document.createElement('style');
+    mapDefaultCSS.innerHTML =
+    `map[is="web-map"] {` +
+    `contain: content;` +  // Contain layout and paint calculations within the map element.
+    `display: inline-block;` + // This together with dimension properties is required so that Leaflet isn't working with a height=0 box by default.
+    `overflow: hidden;` + // Make the map element behave and look more like a native element.
+    `height: 150px;` + // Provide a "default object size" (https://github.com/Maps4HTML/HTML-Map-Element/issues/31).
+    `width: 300px;` +
+    `border-width: 2px;` +
+    `border-style: inset;` +
+    `}` +
+    `map[is="web-map"] .web-map {` +
+    `display: contents;` + // This div doesn't have to participate in layout by generating its own box.
+    `}`;
+    
+    // Hide all (light DOM) children of the map element except for the
+    // `<area>` and `<div class="web-map">` (shadow root host) elements.
+    let hideElementsCSS = document.createElement('style');
+    hideElementsCSS.innerHTML =
+    `map[is="web-map"] > :not(area):not(.web-map) {` +
+    `display: none!important;` +
+    `}`;
+    
     shadowRoot.appendChild(tmpl.content.cloneNode(true));
     shadowRoot.appendChild(this._container);
     this.appendChild(rootDiv);
+    this.appendChild(hideElementsCSS);
+    document.head.insertAdjacentElement('afterbegin', mapDefaultCSS);
   }
   connectedCallback() {
     if (this.isConnected) {
@@ -120,7 +142,7 @@ export class WebMap extends HTMLMapElement {
       }
 
       if (!this.height || this.height !== h) {
-        this._container.style.height = h;
+        this._container.style.height = hpx;
         this.height = h;
       } else {
         this._container.style.height = this.height+"px";
@@ -144,7 +166,7 @@ export class WebMap extends HTMLMapElement {
         });
 
         // the attribution control is not optional
-        this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps4HTML Community Group">Maps4HTML</a> | <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
+        this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps4HTML Community Group">Maps4HTML</a> | <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
 
         // optionally add controls to the map
         if (this.controls) {
