Refactoring HTML anatomy of items in layers (#531)

* refactored the layer HTML anatomy to not include nested interactive elements

* made span a child element of label to fix a few issues

* changed the locators in tests to reflect changes in the layer layout

* deleted css that was no longer needed

* deleted unused variables and changed the x to an html icon

* fixed the Style and Time details element

* fixed the vertical alignment of labels under Style

* replaced the x button with the html icon

* made the time label clickable

* repositioned properties

* positioned the layer-item-properties class

* fixed some css

* deleted the title attribute to fix an accessibility issue

* made suggested changes to the css

* condensed some code

* made whitespace clickable and fixed some alignment

* reverted a change in drag.test

* fixed the alignment of the span element

* Update src/mapml.css

Co-authored-by: Robert Linder <[email protected]>

* Update src/mapml.css

Co-authored-by: Robert Linder <[email protected]>

* allwed the layer to be dragged from the Remove Layer Control button to allow for better consistency

* changed document.createElement to L.DomUtil.create for better consistency

Co-authored-by: Anshpreet <[email protected]>
Co-authored-by: Robert Linder <[email protected]>

Author: 3 people

src/mapml.css

@@ -189,48 +189,17 @@
   min-height: 44px;
 }
 
-.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary,
-.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary ~ * {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.leaflet-control-layers-overlays > fieldset > .mapml-control-layers > summary {
-  padding-top: 12.5px;
-  padding-bottom: 12.5px;
-}
-
-.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details > summary {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details {
-  padding-bottom: 4px;
-  margin: 0 0 0 15px;
+.leaflet-control-layers label {
+  display: inline;
 }
 
-.leaflet-control-layers-overlays > fieldset > .mapml-control-layers details > summary ~ * {
+.leaflet-control-layers-overlays > fieldset > .mapml-layer-item-settings > .mapml-control-layers > summary ~ * {
   display: block;
   margin-top: 5px;
   margin-left: 15px;
   width: calc(100% - 15px);
 }
 
-.leaflet-control-layers label {
-  display: inline;
-}
-
-.mapml-control-layers summary::marker {
-  margin-right: 5px;
-}
-
-.mapml-control-layers details [type="radio"],
-.mapml-control-layers details [type="checkbox"] {
-  margin-right: 5px;
-  margin-left: 0;
-}
-
 .leaflet-control-layers-list .leaflet-control-layers-overlays > :not(:last-of-type) {
   border-bottom: 1px solid #e3e3e3;
 }
@@ -240,9 +209,6 @@
   margin-top: revert;
   position: revert;
 }
-.mapml-control-layers summary label > * {
-  vertical-align: middle;
-}
 
 /*
  * Context menu.
@@ -423,9 +389,8 @@
 /* Disable pointer events where they'd interfere with the intended action. */
 .leaflet-tooltip,
 .leaflet-crosshair *,
-.mapml-contextmenu-item > *,
-.mapml-control-layers .mapml-control-layers summary label,
-.mapml-draggable [aria-grabbed="true"] .mapml-control-layers > * {
+.mapml-layer-item-settings .mapml-control-layers summary label,
+.mapml-contextmenu-item > * {
   pointer-events: none!important;
 }
 
@@ -585,23 +550,6 @@ summary {
   height: 100%;
   width: 100%;
 }
-
-/* Quick fix for https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/358,
-   refactor TBD in https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/263. */
-.mapml-control-summary-container {
-  display: contents;
-}
-.mapml-control-summary-container .mapml-layer-remove-button {
-  text-decoration: none;
-  float: right;
-}
-.mapml-control-summary-container * {
-  display: inline;
-}
-.mapml-control-summary-container label {
-  margin-right: 15px;
-}
-
 
  /* Force printers to include background-images of controls for printing.
    (https://github.com/Maps4HTML/Web-Map-Custom-Element/issues/294) */
@@ -635,4 +583,108 @@ svg.leaflet-image-layer.leaflet-interactive g {
 .mapml-link-preview > p {
   margin: 3px 5px 2px 3px;
   color: rgb(60,64,67);
+}
+
+/**
+* layer item controls
+*/
+
+button.mapml-button:disabled,
+.mapml-button[aria-disabled="true"],
+.mapml-layer-item:disabled button.mapml-button {
+  opacity: .3;
+}
+
+.mapml-button-icon {
+  pointer-events: none;
+}
+
+.mapml-button-icon svg {
+  fill: currentColor;
+}
+
+.mapml-layer-item,
+.mapml-layer-item *,
+.mapml-layer-item ::before,
+.mapml-layer-item ::after {
+  box-sizing: border-box;
+}
+
+.mapml-layer-item {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.mapml-layer-item:not(:last-of-type) {
+  border-bottom: 1px solid #e3e3e3;
+}
+
+.mapml-layer-item-properties {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-inline-start: .5rem;
+}
+.mapml-layer-item-controls {
+  margin-inline-start: auto;
+}
+
+
+.mapml-layer-item-controls button span {
+  font-size: large;
+  font-weight: 900;
+  vertical-align: middle;
+}
+
+.mapml-layer-item-controls button svg {
+  vertical-align: text-bottom;
+}
+
+.mapml-layer-item-controls,
+.mapml-layer-item-remove-control,
+.mapml-layer-item-settings-control {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+
+.mapml-layer-item-remove-control,
+.mapml-layer-item-settings-control {
+  min-height: 44px;
+  min-width: 44px;
+  height: 44px;
+  width: 44px;
+}
+
+.mapml-layer-item-toggle{
+  display: inline-flex !important;
+  width: 100%;
+}
+
+.mapml-layer-item-name {
+  word-break: break-word;
+  text-align: inline-start;
+  padding-inline-start: .25rem;
+  padding-inline-end: 1rem;
+}
+
+.mapml-layer-item-settings > * {
+  display: block;
+  padding-block-start: .25rem;
+  padding-block-end: .25rem;
+  padding-inline-start: 2rem;
+  padding-inline-end: 1rem;
+}
+
+.mapml-layer-item-settings summary {
+  -webkit-user-select: none;
+          user-select: none;
+}
+
+.mapml-layer-item-opacity [type="range"] {
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  width: 100%;
 }

src/mapml/layers/MapLayer.js

@@ -481,66 +481,91 @@ export var MapMLLayer = L.Layer.extend({
         return this.options.attribution;
     },
     getLayerUserControlsHTML: function () {
-      var fieldset = document.createElement('fieldset'),
-        input = document.createElement('input'),
-        label = document.createElement('label'),
-        name = document.createElement('span'),
-        details = document.createElement('details'),
-        summary = document.createElement('summary'),
-        summaryContainer = document.createElement('div'),
-        opacity = document.createElement('input'),
-        opacityControl = document.createElement('details'),
-        opacityControlSummary = document.createElement('summary'),
-        opacityControlSummaryLabel = document.createElement('label'),
+      var fieldset = L.DomUtil.create('fieldset', 'mapml-layer-item'),
+        input = L.DomUtil.create('input'),
+        layerItemName = L.DomUtil.create('span', 'mapml-layer-item-name'),
+        settingsButtonNameIcon = L.DomUtil.create('span'),
+        layerItemProperty = L.DomUtil.create('div', 'mapml-layer-item-properties', fieldset),
+        layerItemSettings = L.DomUtil.create('div', 'mapml-layer-item-settings', fieldset),
+        itemToggleLabel = L.DomUtil.create('label', 'mapml-layer-item-toggle', layerItemProperty),
+        layerItemControls = L.DomUtil.create('div', 'mapml-layer-item-controls', layerItemProperty),
+        opacityControl = L.DomUtil.create('details', 'mapml-layer-item-opacity', layerItemSettings),
+        opacity = L.DomUtil.create('input'),
+        opacityControlSummary = L.DomUtil.create('summary'),
+        svgSettingsControlIcon = L.SVG.create('svg'),
+        settingsControlPath1 = L.SVG.create('path'),
+        settingsControlPath2 = L.SVG.create('path'),
         mapEl = this._layerEl.parentNode;
         this.opacityEl = opacity;
+
+        // append the paths in svg for the remove layer and toggle icons
+        svgSettingsControlIcon.setAttribute('viewBox', '0 0 24 24');
+        svgSettingsControlIcon.setAttribute('height', '22');
+        svgSettingsControlIcon.setAttribute('width', '22');
+        settingsControlPath1.setAttribute('d', 'M0 0h24v24H0z');
+        settingsControlPath1.setAttribute('fill', 'none');
+        settingsControlPath2.setAttribute('d', 'M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z');
+        svgSettingsControlIcon.appendChild(settingsControlPath1);
+        svgSettingsControlIcon.appendChild(settingsControlPath2);
 
-        summaryContainer.classList.add('mapml-control-summary-container');
+        layerItemSettings.hidden = true;
+        settingsButtonNameIcon.setAttribute('aria-hidden', true);
 
-        let removeButton = document.createElement('button');
-        removeButton.type = 'button';
-        removeButton.title = 'Remove Layer';
-        removeButton.innerHTML = "<span aria-hidden='true'>&#10006;</span>";
-        removeButton.classList.add('mapml-layer-remove-button', 'mapml-button');
-        L.DomEvent.disableClickPropagation(removeButton);
-        L.DomEvent.on(removeButton, 'click', L.DomEvent.stop);
-        L.DomEvent.on(removeButton, 'click', (e)=>{
+        let removeControlButton = L.DomUtil.create('button', 'mapml-layer-item-remove-control', layerItemControls);
+        removeControlButton.type = 'button';
+        removeControlButton.title = 'Remove Layer';
+        removeControlButton.innerHTML = "<span aria-hidden='true'>&#10005;</span>";
+        removeControlButton.classList.add('mapml-button');
+        //L.DomEvent.disableClickPropagation(removeControlButton);
+        L.DomEvent.on(removeControlButton, 'click', L.DomEvent.stop);
+        L.DomEvent.on(removeControlButton, 'click', (e)=>{
           mapEl.removeChild(e.target.closest("fieldset").querySelector("span").layer._layerEl);
         }, this);
 
+        let itemSettingControlButton = L.DomUtil.create('button', 'mapml-layer-item-settings-control', layerItemControls);
+        itemSettingControlButton.type = 'button';
+        itemSettingControlButton.title = 'Layer Settings';
+        itemSettingControlButton.setAttribute('aria-expanded', false);
+        itemSettingControlButton.classList.add('mapml-button');
+        L.DomEvent.on(itemSettingControlButton, 'click', (e)=>{
+          if(layerItemSettings.hidden == true){
+            itemSettingControlButton.setAttribute('aria-expanded', true);
+            layerItemSettings.hidden = false;
+          } else {
+            itemSettingControlButton.setAttribute('aria-expanded', false);
+            layerItemSettings.hidden = true;
+          }
+        }, this);
+
         input.defaultChecked = this._map ? true: false;
         input.type = 'checkbox';
-        input.className = 'leaflet-control-layers-selector';
-        name.layer = this;
+        layerItemName.layer = this;
 
         if (this._legendUrl) {
           var legendLink = document.createElement('a');
           legendLink.text = ' ' + this._title;
           legendLink.href = this._legendUrl;
           legendLink.target = '_blank';
           legendLink.draggable = false;
-          name.appendChild(legendLink);
+          layerItemName.appendChild(legendLink);
         } else {
-          name.innerHTML = ' ' + this._title;
+          layerItemName.innerHTML = this._title;
         }
-        label.appendChild(input);
-        label.appendChild(name);
-        opacityControlSummaryLabel.innerText = 'Opacity';
-        opacity.id = "o" + L.stamp(opacity);
-        opacityControlSummaryLabel.setAttribute('for', opacity.id);
-        opacityControlSummary.appendChild(opacityControlSummaryLabel);
+        layerItemName.id = this._title;
+        opacityControlSummary.innerText = 'Opacity';
+        opacityControlSummary.id = 'mapml-layer-item-opacity-' + this._title;
         opacityControl.appendChild(opacityControlSummary);
         opacityControl.appendChild(opacity);
-        L.DomUtil.addClass(details, 'mapml-control-layers');
-        L.DomUtil.addClass(opacityControl,'mapml-control-layers');
         opacity.setAttribute('type','range');
         opacity.setAttribute('min', '0');
         opacity.setAttribute('max','1.0');
         opacity.setAttribute('value', this._container.style.opacity || '1.0');
         opacity.setAttribute('step','0.1');
+        opacity.setAttribute('aria-labelledby', 'mapml-layer-item-opacity-' + this._title);
         opacity.value = this._container.style.opacity || '1.0';
 
         fieldset.setAttribute("aria-grabbed", "false");
+        fieldset.setAttribute('aria-labelledby', this._title);
 
         fieldset.onmousedown = (downEvent) => {
           if(downEvent.target.tagName.toLowerCase() === "input" || downEvent.target.tagName.toLowerCase() === "select") return;
@@ -609,15 +634,13 @@ export var MapMLLayer = L.Layer.extend({
 
         L.DomEvent.on(opacity,'change', this._changeOpacity, this);
 
-        fieldset.appendChild(details);
-        details.appendChild(summary);
-        summaryContainer.appendChild(label);
-        summaryContainer.appendChild(removeButton);
-        summary.appendChild(summaryContainer);
-        details.appendChild(opacityControl);
+        itemToggleLabel.appendChild(input);
+        itemToggleLabel.appendChild(layerItemName);
+        itemSettingControlButton.appendChild(settingsButtonNameIcon);
+        settingsButtonNameIcon.appendChild(svgSettingsControlIcon);
 
         if (this._styles) {
-          details.appendChild(this._styles);
+          layerItemSettings.appendChild(this._styles);
         }
         if (this._userInputs) {
           var frag = document.createDocumentFragment();
@@ -631,21 +654,19 @@ export var MapMLLayer = L.Layer.extend({
                 // don't add it again if it is referenced > once
                 if (mapmlInput.tagName.toLowerCase() === 'map-select' && !frag.querySelector(id)) {
                   // generate a <details><summary></summary><select...></details>
-                  var selectdetails = document.createElement('details'),
-                      selectsummary = document.createElement('summary'),
-                      selectSummaryLabel = document.createElement('label');
+                  var selectdetails = L.DomUtil.create('details', 'mapml-control-layers', frag),
+                      selectsummary = L.DomUtil.create('summary'),
+                      selectSummaryLabel = L.DomUtil.create('label');
                       selectSummaryLabel.innerText = mapmlInput.getAttribute('name');
                       selectSummaryLabel.setAttribute('for', mapmlInput.getAttribute('id'));
-                      L.DomUtil.addClass(selectdetails, 'mapml-control-layers');
                       selectsummary.appendChild(selectSummaryLabel);
                       selectdetails.appendChild(selectsummary);
                       selectdetails.appendChild(mapmlInput.htmlselect);
-                  frag.appendChild(selectdetails);
                 }
               }
             }
           }
-          details.appendChild(frag);
+          layerItemSettings.appendChild(frag);
         }
         return fieldset;
     },

test/e2e/core/debugMode.test.js

@@ -164,7 +164,7 @@ jest.setTimeout(50000);
 
         test("[" + browserType + "]" + " Layer deselected then reselected", async () => {
           await page.hover(".leaflet-top.leaflet-right");
-          await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > details > summary");
+          await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span");
           const feature = await page.$eval(
             "xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g",
             (tile) => tile.childElementCount
@@ -174,7 +174,7 @@ jest.setTimeout(50000);
 
         test("[" + browserType + "]" + " Layer deselected then reselected", async () => {
           await page.hover(".leaflet-top.leaflet-right");
-          await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > details > summary");
+          await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(1) > div:nth-child(1) > label > span");
           const feature = await page.$eval(
             "xpath=//html/body/mapml-viewer >> css=div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > svg > g > path:nth-child(4)",
             (tile) => tile.getAttribute("d")