qwc2 2025.11.18 → 2025.11.26

package/components/widgets/ToggleSwitch.js

@@ -23,6 +23,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import MiscUtils from '../../utils/MiscUtils';
 import Icon from '../Icon';
 import './style/ToggleSwitch.css';
 var ToggleSwitch = /*#__PURE__*/function (_React$Component) {
@@ -52,7 +53,9 @@ var ToggleSwitch = /*#__PURE__*/function (_React$Component) {
       });
       return /*#__PURE__*/React.createElement("div", {
         className: classNames,
-        onClick: this.onClick
+        onClick: this.onClick,
+        onKeyDown: MiscUtils.checkKeyActivate,
+        tabIndex: 0
       }, /*#__PURE__*/React.createElement("span", {
         className: "toggle-switch-yes"
       }, /*#__PURE__*/React.createElement(Icon, {
@@ -72,7 +75,7 @@ var ToggleSwitch = /*#__PURE__*/function (_React$Component) {
         readOnly: this.props.readOnly,
         required: this.props.required,
         style: {
-          visibility: 'none'
+          visibility: 'hidden'
         },
         type: "checkbox",
         value: this.props.active

package/components/widgets/style/ComboBox.css

@@ -40,35 +40,18 @@ div.combobox-button > span.icon {
     flex: 0 0 1em;
 }
 
-div.combobox-menu {
-    border: 1px solid var(--border-color);
-    background-color: var(--list-bg-color);
-    user-select: none;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-}
-
 div.combobox-menu-entry {
     padding: 0.25em;
 }
 
-div.combobox-menu-entry:not(.combobox-menu-entry-disabled):hover  {
-    background-color: var(--list-item-bg-color-hover);
-    color: var(--list-item-text-color-hover);
-}
-
 div.combobox-menu-entry-active {
     background-color: var(--list-item-bg-color-active);
     color: var(--list-item-text-color-active);
 }
 
-div.combobox-menu-entry-active:hover {
-    background-color: var(--list-item-bg-color-active-hover)!important;
-    color: var(--list-item-text-color-active-hover)!important;
-}
-
-div.combobox-menu-entry-disabled {
-    color: var(--text-color-disabled);
+div.combobox-menu-entry-active:focus {
+    background-color: var(--list-item-bg-color-active-hover);
+    color: var(--list-item-text-color-active-hover);
 }
 
 div.combobox-menu-entry-group-header {
@@ -78,6 +61,10 @@ div.combobox-menu-entry-group-header {
     font-weight: bold;
 }
 
+div.combobox-menu-entry-group-header:focus {
+    background-color: var(--list-section-bg-color-hover);
+}
+
 div.combobox-menu-entry-group-header > span.icon {
     flex: 0 0 auto;
 }

package/components/widgets/style/EditableSelect.css

@@ -11,10 +11,8 @@ div.editable-select-inputcontainer > span.icon-clear {
 }
 
 div.editable-select-dropdown {
-    border: 1px solid var(--border-color);
     max-height: 8em;
     overflow-y: auto;
-    background-color: var(--input-bg-color);
 }
 
 div.editable-select-dropdown > div {

package/components/widgets/style/MenuButton.css

@@ -64,36 +64,20 @@ div.menubutton-togglebutton span.menubotton-button-arrow {
     border-left: 1px solid var(--border-color);
 }
 
-div.menubutton-menu {
-    background-color: var(--list-bg-color);
-    border: 1px solid var(--border-color);
-    color: var(--text-color);
-    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
-}
-
 div.menubutton-menu > div {
     padding: 0.25em;
 }
 
-div.menubutton-menu > div:hover {
-    background-color: var(--list-item-bg-color-hover);
-    color: var(--list-item-text-color-hover);
-}
-
 div.menubutton-menu > div.menubutton-menu-active {
     background-color: var(--list-item-bg-color-active);
     color: var(--list-item-text-color-active);
 }
 
-div.menubutton-menu > div.menubutton-menu-active:hover {
+div.menubutton-menu > div.menubutton-menu-active:focus {
     background-color: var(--list-item-bg-color-active-hover);
     color: var(--list-item-text-color-active-hover);
 }
 
-div.menubutton-menu-disabled {
-    color: var(--text-color-disabled);
-}
-
 span.menubutton-tooltip {
     position: absolute;
     display: none;

package/components/widgets/style/PopupMenu.css

@@ -0,0 +1,20 @@
+div.popup-menu {
+    background-color: var(--list-bg-color);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
+}
+
+div.popup-menu:focus {
+    outline: none;
+}
+
+div.popup-menu-item-disabled {
+    color: var(--text-color-disabled);
+}
+
+div.popup-menu > *:focus {
+    background-color: var(--list-item-bg-color-hover);
+    color: var(--list-item-text-color-hover);
+    outline: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "qwc2",
-    "version": "2025.11.18",
+    "version": "2025.11.26",
     "description": "QGIS Web Client",
     "author": "Sourcepole AG",
     "license": "BSD-2-Clause",
@@ -17,7 +17,7 @@
     ],
     "dependencies": {
         "@furkot/webfonts-generator": "^2.0.2",
-        "@giro3d/giro3d": "^0.43.4",
+        "@sourcepole/qwc-giro3d": "^0.44.0-dev",
         "@kayahr/text-encoding": "^2.0.0",
         "@loaders.gl/core": "^4.3.3",
         "@loaders.gl/shapefile": "^4.3.3",

package/plugins/AttributeTable.js

@@ -76,7 +76,6 @@ var AttributeTable = /*#__PURE__*/function (_React$Component) {
         iface: this.props.iface,
         initialLayer: (_this$props$taskData = this.props.taskData) === null || _this$props$taskData === void 0 ? void 0 : _this$props$taskData.layer,
         limitToExtent: this.props.limitToExtent,
-        role: "body",
         showEditFormButton: this.props.showEditFormButton,
         showHiddenFields: this.props.showHiddenFields,
         showLimitToExtent: this.props.showLimitToExtent,

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';
@@ -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) {

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", {