qwc2 2025.11.19 → 2025.11.27

package/plugins/BackgroundSwitcher.js

@@ -1,4 +1,10 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -30,19 +36,17 @@ import Icon from '../components/Icon';
 import MapButton from '../components/MapButton';
 import ConfigUtils from '../utils/ConfigUtils';
 import LocaleUtils from '../utils/LocaleUtils';
+import MiscUtils from '../utils/MiscUtils';
 import './style/BackgroundSwitcher.css';
 
 /**
  * Map button for switching the background layer.
  */
 export var BackgroundSwitcher = /*#__PURE__*/function (_React$Component) {
-  function BackgroundSwitcher() {
+  function BackgroundSwitcher(props) {
     var _this;
     _classCallCheck(this, BackgroundSwitcher);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, BackgroundSwitcher, [].concat(args));
+    _this = _callSuper(this, BackgroundSwitcher, [props]);
     _defineProperty(_this, "state", {
       visible: false
     });
@@ -61,10 +65,13 @@ export var BackgroundSwitcher = /*#__PURE__*/function (_React$Component) {
         key: layer ? layer.name : "empty",
         onClick: function onClick() {
           return _this.backgroundLayerClicked(layer);
-        }
+        },
+        onKeyDown: _this.KeyNav,
+        tabIndex: _this.state.visible ? 0 : -1
       }, /*#__PURE__*/React.createElement("div", {
         className: "background-switcher-item-title"
       }, layer ? /*#__PURE__*/React.createElement("span", {
+        tabIndex: -1,
         title: _this.itemTitle(layer)
       }, _this.itemTitle(layer)) : /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("bgswitcher.nobg"))), /*#__PURE__*/React.createElement("div", {
         className: "background-switcher-item-thumbnail"
@@ -85,10 +92,13 @@ export var BackgroundSwitcher = /*#__PURE__*/function (_React$Component) {
       });
       return /*#__PURE__*/React.createElement("div", {
         className: itemclasses,
-        key: layer.name
+        key: layer.name,
+        onKeyDown: _this.KeyNav,
+        tabIndex: _this.state.visible ? 0 : -1
       }, /*#__PURE__*/React.createElement("div", {
         className: "background-switcher-item-title"
       }, /*#__PURE__*/React.createElement("span", {
+        tabIndex: "-1",
         title: _this.itemTitle(layer)
       }, _this.itemTitle(layer)), /*#__PURE__*/React.createElement(Icon, {
         icon: "chevron-down"
@@ -109,15 +119,23 @@ export var BackgroundSwitcher = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement("div", {
           className: menuitemclasses,
           key: l.name,
+          onBlur: function onBlur(ev) {
+            return _this.updateGroupItem(ev, layer);
+          },
           onClick: function onClick() {
             return _this.backgroundLayerClicked(l);
           },
+          onFocus: function onFocus(ev) {
+            return _this.updateGroupItem(ev, l);
+          },
+          onKeyDown: _this.KeyNav,
           onMouseEnter: function onMouseEnter(ev) {
             return _this.updateGroupItem(ev, l);
           },
           onMouseLeave: function onMouseLeave(ev) {
             return _this.updateGroupItem(ev, layer);
           },
+          tabIndex: 0,
           title: _this.itemTitle(l)
         }, _this.itemTitle(l));
       })));
@@ -127,6 +145,60 @@ export var BackgroundSwitcher = /*#__PURE__*/function (_React$Component) {
       ev.target.parentElement.parentElement.childNodes[0].firstChild.innerText = _this.itemTitle(layer);
       ev.target.parentElement.parentElement.childNodes[1].firstChild.src = assetsPath + "/" + layer.thumbnail;
     });
+    _defineProperty(_this, "KeyNav", function (ev) {
+      if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
+        var group = null;
+        if (ev.target.parentElement.classList.contains("background-switcher-group")) {
+          group = ev.target.parentElement;
+        } else {
+          group = ev.target.getElementsByClassName("background-switcher-group")[0];
+        }
+        if (!group) {
+          return;
+        }
+        var childCount = group.children.length;
+        var delta = ev.key === 'ArrowUp' ? -1 : 1;
+        var currentIndex = Array.from(group.children).findIndex(function (el) {
+          return document.activeElement === el || el.contains(document.activeElement);
+        });
+        if (currentIndex === -1) {
+          currentIndex = Array.from(group.children).findIndex(function (el) {
+            return el.classList.contains("background-switcher-group-item-active");
+          });
+        }
+        var next = (currentIndex + childCount + delta) % childCount;
+        while (group.children[next].tabIndex !== 0 && next !== currentIndex) {
+          next = (next + childCount + delta) % childCount;
+        }
+        if (next !== currentIndex) {
+          group.children[next].focus();
+        }
+        MiscUtils.killEvent(ev);
+      } else if (ev.key === "Tab") {
+        // Move to next tile
+        var current = _toConsumableArray(_this.listEl.children).find(function (el) {
+          return el === document.activeElement || el.contains(document.activeElement);
+        });
+        if (current) {
+          if (ev.shiftKey) {
+            if (current.previousElementSibling) {
+              current.previousElementSibling.focus();
+            } else {
+              _this.listEl.children[_this.listEl.children.length - 1].focus();
+            }
+          } else {
+            if (current.nextElementSibling) {
+              current.nextElementSibling.focus();
+            } else {
+              _this.listEl.children[0].focus();
+            }
+          }
+        }
+        MiscUtils.killEvent(ev);
+      } else {
+        MiscUtils.checkKeyActivate(ev, _this.hide);
+      }
+    });
     _defineProperty(_this, "buttonClicked", function () {
       _this.setState(function (state) {
         return {
@@ -149,10 +221,28 @@ export var BackgroundSwitcher = /*#__PURE__*/function (_React$Component) {
         visible: false
       });
     });
+    _defineProperty(_this, "hide", function () {
+      _this.setState({
+        visible: false
+      });
+    });
+    _this.buttonEl = null;
+    _this.listEl = null;
     return _this;
   }
   _inherits(BackgroundSwitcher, _React$Component);
   return _createClass(BackgroundSwitcher, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (this.state.visible && !prevState.visible) {
+        var _this$listEl, _this$listEl$focus;
+        (_this$listEl = this.listEl) === null || _this$listEl === void 0 || (_this$listEl = _this$listEl.firstElementChild) === null || _this$listEl === void 0 || (_this$listEl$focus = _this$listEl.focus) === null || _this$listEl$focus === void 0 || _this$listEl$focus.call(_this$listEl);
+      } else if (!this.state.visible && prevState.visible) {
+        var _this$buttonEl, _this$buttonEl$focus;
+        (_this$buttonEl = this.buttonEl) === null || _this$buttonEl === void 0 || (_this$buttonEl$focus = _this$buttonEl.focus) === null || _this$buttonEl$focus === void 0 || _this$buttonEl$focus.call(_this$buttonEl);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -185,12 +275,18 @@ export var BackgroundSwitcher = /*#__PURE__*/function (_React$Component) {
       if (entries.length > 0) {
         return /*#__PURE__*/React.createElement(MapButton, {
           active: this.state.visible,
+          buttonRef: function buttonRef(el) {
+            _this2.buttonEl = el;
+          },
           icon: "bglayer",
           onClick: this.buttonClicked,
           position: this.props.position,
           tooltip: LocaleUtils.tr("tooltip.background")
         }, /*#__PURE__*/React.createElement("div", {
-          className: "background-switcher " + (this.state.visible ? 'background-switcher-active' : '')
+          className: "background-switcher " + (this.state.visible ? 'background-switcher-active' : ''),
+          ref: function ref(el) {
+            _this2.listEl = el;
+          }
         }, this.renderLayerItem(null, backgroundLayers.filter(function (layer) {
           return layer.visibility === true;
         }).length === 0), entries.map(function (entry) {

package/plugins/Cyclomedia.js

@@ -358,8 +358,7 @@ var Cyclomedia = /*#__PURE__*/function (_React$Component) {
         title: LocaleUtils.tr("cyclomedia.title"),
         usePortal: false
       }, /*#__PURE__*/React.createElement("div", {
-        className: "cyclomedia-body",
-        role: "body"
+        className: "cyclomedia-body"
       }, this.props.mapScale > this.props.maxMapScale && this.state.status > Status.LOGIN ? /*#__PURE__*/React.createElement("div", {
         className: "cyclomedia-scale-hint"
       }, LocaleUtils.tr("cyclomedia.scalehint", this.props.maxMapScale)) : null, this.state.status > Status.LOGIN ? /*#__PURE__*/React.createElement("iframe", {

package/plugins/FeatureForm.js

@@ -224,15 +224,13 @@ var FeatureForm = /*#__PURE__*/function (_React$Component) {
         var body = null;
         if (this.state.pendingRequests > 0) {
           body = /*#__PURE__*/React.createElement("div", {
-            className: "feature-query-body",
-            role: "body"
+            className: "feature-query-body"
           }, /*#__PURE__*/React.createElement("span", {
             className: "identify-body-message"
           }, LocaleUtils.tr("featureform.querying")));
         } else if (isEmpty(this.state.pickedFeatures)) {
           body = /*#__PURE__*/React.createElement("div", {
-            className: "feature-query-body",
-            role: "body"
+            className: "feature-query-body"
           }, /*#__PURE__*/React.createElement("span", {
             className: "identify-body-message"
           }, LocaleUtils.tr("featureform.noresults")));
@@ -252,8 +250,7 @@ var FeatureForm = /*#__PURE__*/function (_React$Component) {
             });
           }
           body = /*#__PURE__*/React.createElement("div", {
-            className: "feature-query-body",
-            role: "body"
+            className: "feature-query-body"
           }, Object.keys(this.state.pickedFeatures).length > 1 ? /*#__PURE__*/React.createElement("div", {
             className: "feature-query-selection"
           }, /*#__PURE__*/React.createElement("select", {

package/plugins/GeometryDigitizer.js

@@ -332,8 +332,7 @@ var GeometryDigitizer = /*#__PURE__*/function (_React$Component) {
         title: _this.state.outputWindowTitle,
         visible: _this.state.outputWindowVisible
       }, /*#__PURE__*/React.createElement("div", {
-        className: "geomdigitizer-output-window-body",
-        role: "body"
+        className: "geomdigitizer-output-window-body"
       }, !_this.state.outputLoaded ? /*#__PURE__*/React.createElement("span", {
         className: "geomdigitizer-output-window-wait"
       }, /*#__PURE__*/React.createElement(Spinner, null), " ", /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("geomdigitizer.wait"))) : null, /*#__PURE__*/React.createElement("iframe", {

package/plugins/HeightProfile.js

@@ -299,8 +299,7 @@ var HeightProfile = /*#__PURE__*/function (_React$Component) {
       }
       if (_this3.state.data.error) {
         return /*#__PURE__*/React.createElement("div", {
-          className: "height-profile-error",
-          role: "body"
+          className: "height-profile-error"
         }, LocaleUtils.tr("heightprofile.error") + ": " + _this3.state.data.error);
       }
       var distanceStr = LocaleUtils.tr("heightprofile.distance");
@@ -449,7 +448,6 @@ var HeightProfile = /*#__PURE__*/function (_React$Component) {
       }
       return /*#__PURE__*/React.createElement("div", {
         className: "height-profile-chart-container",
-        role: "body",
         style: {
           position: 'relative'
         }
@@ -735,8 +733,7 @@ var HeightProfile = /*#__PURE__*/function (_React$Component) {
         title: LocaleUtils.tr("heightprofile.title"),
         usePortal: false
       }, this.state.isloading ? /*#__PURE__*/React.createElement("div", {
-        className: "height-profile-loading-indicator",
-        role: "body"
+        className: "height-profile-loading-indicator"
       }, /*#__PURE__*/React.createElement(Spinner, {
         className: "spinner"
       }), " ", LocaleUtils.tr("heightprofile.loading")) : this.renderHeightProfile(function (el) {

package/plugins/Identify.js

@@ -389,15 +389,13 @@ var Identify = /*#__PURE__*/function (_React$Component) {
         if (isEmpty(this.state.identifyResults)) {
           if (this.state.pendingRequests > 0) {
             body = /*#__PURE__*/React.createElement("div", {
-              className: "identify-body",
-              role: "body"
+              className: "identify-body"
             }, /*#__PURE__*/React.createElement("span", {
               className: "identify-body-message"
             }, LocaleUtils.tr("identify.querying")));
           } else {
             body = /*#__PURE__*/React.createElement("div", {
-              className: "identify-body",
-              role: "body"
+              className: "identify-body"
             }, /*#__PURE__*/React.createElement("span", {
               className: "identify-body-message"
             }, LocaleUtils.tr("identify.noresults")));
@@ -417,7 +415,6 @@ var Identify = /*#__PURE__*/function (_React$Component) {
             longAttributesDisplay: this.props.longAttributesDisplay,
             replaceImageUrls: this.props.replaceImageUrls,
             resultDisplayMode: this.props.resultDisplayMode,
-            role: "body",
             showLayerSelector: this.props.showLayerSelector
           });
         }

package/plugins/LayerCatalog.js

@@ -25,7 +25,6 @@ import { connect } from 'react-redux';
 import axios from 'axios';
 import { remove as removeDiacritics } from 'diacritics';
 import PropTypes from 'prop-types';
-import { addLayer, removeLayer, replacePlaceholderLayer } from '../actions/layers';
 import { setCurrentTask } from '../actions/task';
 import ResizeableWindow from '../components/ResizeableWindow';
 import LayerCatalogWidget from '../components/widgets/LayerCatalogWidget';
@@ -197,22 +196,17 @@ var LayerCatalog = /*#__PURE__*/function (_React$Component) {
         onClose: this.onClose,
         title: LocaleUtils.tr("layercatalog.windowtitle")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "layer-catalog",
-        role: "body"
+        className: "layer-catalog"
       }, /*#__PURE__*/React.createElement(LayerCatalogWidget, {
-        addLayer: this.props.addLayer,
         catalog: this.state.catalog,
         levelBasedIndentSize: this.props.levelBasedIndentSize,
-        pendingRequests: 0,
-        removeLayer: this.props.removeLayer,
-        replacePlaceholderLayer: this.props.replacePlaceholderLayer
+        pendingRequests: 0
       })));
     }
   }]);
 }(React.Component);
 _defineProperty(LayerCatalog, "propTypes", {
   active: PropTypes.bool,
-  addLayer: PropTypes.func,
   /** The URL to the catalog JSON file. */
   catalogUrl: PropTypes.string,
   /** Default window geometry with size, position and docking status. Positive position values (including '0') are related to top (InitialY) and left (InitialX), negative values (including '-0') to bottom (InitialY) and right (InitialX). */
@@ -228,8 +222,6 @@ _defineProperty(LayerCatalog, "propTypes", {
   levelBasedIndentSize: PropTypes.bool,
   /** Whether to register a search provider which allows searching catalog layers through the global search field. */
   registerCatalogSearchProvider: PropTypes.bool,
-  removeLayer: PropTypes.func,
-  replacePlaceholderLayer: PropTypes.func,
   setCurrentTask: PropTypes.func
 });
 _defineProperty(LayerCatalog, "defaultProps", {
@@ -249,8 +241,5 @@ export default connect(function (state) {
     active: state.task.id === "LayerCatalog"
   };
 }, {
-  addLayer: addLayer,
-  removeLayer: removeLayer,
-  replacePlaceholderLayer: replacePlaceholderLayer,
   setCurrentTask: setCurrentTask
 })(LayerCatalog);

package/plugins/LayerTree.js

@@ -51,6 +51,7 @@ import LayerInfoWindow from '../components/LayerInfoWindow';
 import ResizeableWindow from '../components/ResizeableWindow';
 import ServiceInfoWindow from '../components/ServiceInfoWindow';
 import SideBar from '../components/SideBar';
+import PopupMenu from '../components/widgets/PopupMenu';
 import { Image } from '../components/widgets/Primitives';
 import Spinner from '../components/widgets/Spinner';
 import ConfigUtils from '../utils/ConfigUtils';
@@ -165,7 +166,7 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
         "layertree-item-menubutton": true,
         "layertree-item-menubutton-active": _this.state.activestylemenu === groupId
       });
-      var allowRemove = ConfigUtils.getConfigProp("allowRemovingThemeLayers", _this.props.theme) === true || layer.role !== LayerRole.THEME;
+      var allowRemove = _this.props.allowRemovingThemeLayers || ConfigUtils.getConfigProp("allowRemovingThemeLayers", _this.props.theme) === true || layer.role !== LayerRole.THEME;
       var allowReordering = ConfigUtils.getConfigProp("allowReorderingLayers", _this.props.theme) === true && !_this.state.filterinvisiblelayers;
       var sortable = allowReordering && ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering", _this.props.theme) === true;
       var styles = layer.type === "wms" && path.length === 0 ? _this.getLayerStyles(layer) : null;
@@ -251,7 +252,7 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
         return null;
       }
       var sublayerId = layer.id + ":" + sublayer.name;
-      var allowRemove = ConfigUtils.getConfigProp("allowRemovingThemeLayers", _this.props.theme) === true || layer.role !== LayerRole.THEME;
+      var allowRemove = _this.props.allowRemovingThemeLayers || ConfigUtils.getConfigProp("allowRemovingThemeLayers", _this.props.theme) === true || layer.role !== LayerRole.THEME;
       var allowReordering = ConfigUtils.getConfigProp("allowReorderingLayers", _this.props.theme) === true;
       var checkboxstate = sublayer.visibility === true ? 'checked' : 'unchecked';
       if (inMutuallyExclusiveGroup) {
@@ -354,7 +355,7 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
       }
       var allowOptions = layer.type !== "placeholder" && layer.type !== "separator";
       var flattenGroups = ConfigUtils.getConfigProp("flattenLayerTreeGroups", _this.props.theme) || _this.props.flattenGroups;
-      var allowSeparators = flattenGroups && allowReordering && ConfigUtils.getConfigProp("allowLayerTreeSeparators", _this.props.theme);
+      var allowSeparators = allowReordering && (_this.props.allowLayerTreeSeparators || ConfigUtils.getConfigProp("allowLayerTreeSeparators", _this.props.theme));
       var separatorTitle = LocaleUtils.tr("layertree.separator");
       var separatorTooltip = LocaleUtils.tr("layertree.separatortooltip");
       return /*#__PURE__*/React.createElement("div", {
@@ -505,7 +506,9 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
           key: name,
           onClick: function onClick() {
             return onStyleChange(name);
-          }
+          },
+          onKeyDown: MiscUtils.checkKeyActivate,
+          tabIndex: 0
         }, /*#__PURE__*/React.createElement(Icon, {
           icon: selectedStyles.includes(name) ? checkedIcon : "radio_unchecked"
         }), /*#__PURE__*/React.createElement("div", null, title));
@@ -588,7 +591,9 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
       if (_this.props.allowImport) {
         layerImportExpander = /*#__PURE__*/React.createElement("div", {
           className: "layertree-option",
-          onClick: _this.toggleImportLayers
+          onClick: _this.toggleImportLayers,
+          onKeyDown: MiscUtils.checkKeyActivate,
+          tabIndex: 0
         }, /*#__PURE__*/React.createElement(Icon, {
           icon: _this.state.importvisible ? 'collapse' : 'expand'
         }), " ", LocaleUtils.tr("layertree.importlayer"));
@@ -663,12 +668,6 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
         "layertree-visibility-button": true,
         "layertree-visibility-button-active": _this.state.visibilityMenu
       });
-      var style = {};
-      if (_this.props.side === 'left') {
-        style.left = 0;
-      } else {
-        style.right = 0;
-      }
       return /*#__PURE__*/React.createElement("span", {
         className: buttonClasses,
         onClick: function onClick() {
@@ -677,14 +676,24 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
               visibilityMenu: !state.visibilityMenu
             };
           });
-        }
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        ref: function ref(el) {
+          _this.visibilityButton = el;
+        },
+        tabIndex: 0
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "eye"
       }), /*#__PURE__*/React.createElement(Icon, {
         icon: "chevron-down"
-      }), _this.state.visibilityMenu ? /*#__PURE__*/React.createElement("div", {
+      }), _this.state.visibilityMenu ? /*#__PURE__*/React.createElement(PopupMenu, {
+        anchor: _this.visibilityButton,
         className: "layertree-visibility-menu",
-        style: style
+        onClose: function onClose() {
+          return _this.setState({
+            visibilityMenu: false
+          });
+        }
       }, _this.props.showToggleAllLayersCheckbox ? /*#__PURE__*/React.createElement("div", {
         onClick: function onClick() {
           return _this.toggleLayerTreeVisibility(vis === 0);
@@ -760,8 +769,7 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
         },
         title: LocaleUtils.tr("layertree.printlegend")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "layertree-legend-print-body",
-        role: "body"
+        className: "layertree-legend-print-body"
       }, /*#__PURE__*/React.createElement("iframe", {
         ref: setLegendPrintContents,
         src: MiscUtils.resolveAssetsPath(_this.props.templatePath)
@@ -966,6 +974,7 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
+    _this.visibilityButton = null;
     _this.legendPrintWindow = null;
     window.addEventListener('beforeunload', function () {
       if (_this.legendPrintWindow && !_this.legendPrintWindow.closed) {
@@ -1022,7 +1031,7 @@ var LayerTree = /*#__PURE__*/function (_React$Component) {
         });
       }
       var deleteAllLayersIcon = null;
-      if (ConfigUtils.getConfigProp("allowRemovingThemeLayers") === true) {
+      if (this.props.allowRemovingThemeLayers || ConfigUtils.getConfigProp("allowRemovingThemeLayers") === true) {
         var deleteAllLayersTooltip = LocaleUtils.tr("layertree.deletealllayers");
         deleteAllLayersIcon = /*#__PURE__*/React.createElement(Icon, {
           className: "layertree-delete-legend",
@@ -1073,8 +1082,12 @@ _defineProperty(LayerTree, "propTypes", {
   allowCompare: PropTypes.bool,
   /** Whether to allow importing external layers. */
   allowImport: PropTypes.bool,
+  /** Whether to allow adding layer tree separators. */
+  allowLayerTreeSeparators: PropTypes.bool,
   /** Whether to allow enabling map tips. */
   allowMapTips: PropTypes.bool,
+  /** Whether to allow removing theme layers. */
+  allowRemovingThemeLayers: PropTypes.bool,
   /** Whether to allow selection of identifyable layers. The `showQueryableIcon` property should be `true` to be able to select identifyable layers. */
   allowSelectIdentifyableLayers: PropTypes.bool,
   /** Whether to display a BBOX dependent legend. Can be `true|false|"theme"`, latter means only for theme layers. */

package/plugins/MapLegend.js

@@ -179,8 +179,7 @@ var MapLegend = /*#__PURE__*/function (_React$Component) {
         onClose: this.props.lockedWindow ? null : this.onClose,
         title: LocaleUtils.tr("maplegend.windowtitle")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "map-legend",
-        role: "body"
+        className: "map-legend"
       }, this.props.layers.map(function (layer) {
         if (_this2.state.onlyVisibleLegend && !layer.visibility) {
           return null;

package/plugins/ObjectList.js

@@ -74,7 +74,6 @@ var ObjectList = /*#__PURE__*/function (_React$Component) {
         initialLayer: (_this$props$taskData = this.props.taskData) === null || _this$props$taskData === void 0 ? void 0 : _this$props$taskData.layer,
         limitToExtent: this.props.limitToExtent,
         readOnly: true,
-        role: "body",
         showDisplayFieldOnly: true,
         showEditFormButton: false,
         showHiddenFields: false,

package/plugins/Panoramax.js

@@ -237,8 +237,7 @@ var Panoramax = /*#__PURE__*/function (_React$Component) {
         splitScreenWhenDocked: true,
         title: LocaleUtils.tr("panoramax.title")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "panoramax-body",
-        role: "body"
+        className: "panoramax-body"
       }, !queryData ? /*#__PURE__*/React.createElement("div", {
         style: {
           display: 'flex',

package/plugins/Print.js

@@ -582,8 +582,7 @@ var Print = /*#__PURE__*/function (_React$Component) {
         title: LocaleUtils.tr("print.output"),
         visible: _this.state.printOutputVisible
       }, /*#__PURE__*/React.createElement("div", {
-        className: "print-output-window-body",
-        role: "body"
+        className: "print-output-window-body"
       }, !_this.state.outputLoaded ? /*#__PURE__*/React.createElement("span", {
         className: "print-output-window-wait"
       }, /*#__PURE__*/React.createElement(Spinner, null), " ", LocaleUtils.tr("print.wait")) : null, /*#__PURE__*/React.createElement("iframe", {

package/plugins/Routing.js

@@ -1172,8 +1172,7 @@ var Routing = /*#__PURE__*/function (_React$Component) {
         },
         title: LocaleUtils.tr("routing.windowtitle")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "routing-body",
-        role: "body"
+        className: "routing-body"
       }, /*#__PURE__*/React.createElement(ButtonBar, {
         active: this.state.currentTab,
         buttons: tabButtons,

package/plugins/TimeManager.js

@@ -240,8 +240,7 @@ var TimeManager = /*#__PURE__*/function (_React$Component) {
         enddate = dayjs(_this.props.filter.timeRange.tend);
       }
       return /*#__PURE__*/React.createElement("div", {
-        className: "time-manager-body",
-        role: "body"
+        className: "time-manager-body"
       }, /*#__PURE__*/React.createElement("div", {
         className: "time-manager-toolbar"
       }, /*#__PURE__*/React.createElement("div", {
@@ -821,9 +820,7 @@ var TimeManager = /*#__PURE__*/function (_React$Component) {
       var timeValues = this.state.timeData.values;
       var body = null;
       if (timeValues.length < 2) {
-        body = /*#__PURE__*/React.createElement("div", {
-          role: "body"
-        }, /*#__PURE__*/React.createElement("div", {
+        body = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
           className: "time-manager-notemporaldata"
         }, LocaleUtils.tr("timemanager.notemporaldata")));
       } else {

package/plugins/ValueTool.js

@@ -363,8 +363,7 @@ var ValueTool = /*#__PURE__*/function (_React$Component) {
         onClose: this.onWindowClose,
         title: LocaleUtils.tr("valuetool.title")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "valuetool-body",
-        role: "body"
+        className: "valuetool-body"
       }, /*#__PURE__*/React.createElement(ButtonBar, {
         active: this.state.activeTab,
         buttons: buttons,

package/plugins/View3D.js

@@ -108,7 +108,6 @@ var View3D = /*#__PURE__*/function (_React$Component) {
           splitTopAndBottomBar: true,
           title: LocaleUtils.tr("map3d.title")
         }, _this.state.componentLoaded ? /*#__PURE__*/React.createElement(Provider, {
-          role: "body",
           store: _this.store
         }, /*#__PURE__*/React.createElement(PluginsContainer, {
           pluginsConfig: pluginsConfig

package/plugins/map/MeasurementSupport.js

@@ -174,10 +174,10 @@ var MeasurementSupport = /*#__PURE__*/function (_React$Component) {
       var opts = {};
       if (_this.props.measurement.geomType === 'LineString') {
         opts.headmarker = _this.props.measurement.lineHeadMarker;
-        opts.tailmarker = _this.props.measurement.lineHeadMarker;
+        opts.tailmarker = _this.props.measurement.lineTailMarker;
       } else if (_this.props.measurement.geomType === 'Bearing') {
         opts.headmarker = _this.props.measurement.bearingHeadMarker;
-        opts.tailmarker = _this.props.measurement.bearingHeadMarker;
+        opts.tailmarker = _this.props.measurement.bearingTailMarker;
       }
       return [].concat(_toConsumableArray(FeatureStyles.measureInteraction(feature, opts)), [FeatureStyles.measureInteractionVertex({
         geometryFunction: geometryFunction

package/plugins/map3d/Identify3D.js

@@ -234,8 +234,7 @@ var Identify3D = /*#__PURE__*/function (_React$Component) {
         onClose: this.clear,
         title: LocaleUtils.tr("identify.title")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "identify-body",
-        role: "body"
+        className: "identify-body"
       }, isEmpty(this.state.pickAttrs) ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", null, LocaleUtils.tr("identify.noattributes"))) : /*#__PURE__*/React.createElement("div", {
         className: "identify-result-box"
       }, /*#__PURE__*/React.createElement("table", {