qwc2 2025.11.19 → 2025.11.27

package/components/widgets/LayerCatalogWidget.js

@@ -22,11 +22,15 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
+import { connect } from 'react-redux';
 import { remove as removeDiacritics } from 'diacritics';
 import isEmpty from 'lodash.isempty';
 import PropTypes from 'prop-types';
+import { addLayer, removeLayer, replacePlaceholderLayer } from '../../actions/layers';
+import { NotificationType, showNotification, closeWindow } from '../../actions/windows';
 import LayerUtils from '../../utils/LayerUtils';
 import LocaleUtils from '../../utils/LocaleUtils';
+import MiscUtils from '../../utils/MiscUtils';
 import ServiceLayerUtils from '../../utils/ServiceLayerUtils';
 import Icon from '../Icon';
 import InputContainer from './InputContainer';
@@ -94,31 +98,57 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
         };
       });
     });
-    _defineProperty(_this, "addServiceLayer", function (entry) {
+    _defineProperty(_this, "checkAddServiceLayer", function (entry) {
+      var _entry$name;
       var asGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      if (entry.resource) {
+      var resource = entry.resource ? LayerUtils.splitLayerUrlParam(entry.resource) : null;
+      var existingSublayers = _this.props.layers.reduce(function (res, layer) {
+        var _entry$type, _entry$url;
+        if (layer.type === ((_entry$type = entry.type) !== null && _entry$type !== void 0 ? _entry$type : resource === null || resource === void 0 ? void 0 : resource.type) && layer.url === ((_entry$url = entry.url) !== null && _entry$url !== void 0 ? _entry$url : resource === null || resource === void 0 ? void 0 : resource.url)) {
+          return [].concat(_toConsumableArray(res), _toConsumableArray(LayerUtils.getSublayerNames(layer)), [layer.name]);
+        }
+        return res;
+      }, []);
+      if (existingSublayers.includes((_entry$name = entry.name) !== null && _entry$name !== void 0 ? _entry$name : resource === null || resource === void 0 ? void 0 : resource.name)) {
+        var _ref;
+        var text = (_ref = LocaleUtils.tr("themelayerslist.existinglayers") + ": " + entry.title) !== null && _ref !== void 0 ? _ref : entry.name;
+        var actions = [{
+          name: LocaleUtils.tr("themelayerslist.addanyway"),
+          onClick: function onClick() {
+            _this.addServiceLayer(entry, resource, asGroup);
+            return true;
+          }
+        }];
+        _this.props.showNotification("existinglayers", text, NotificationType.INFO, false, actions);
+      } else {
+        _this.addServiceLayer(entry, resource, asGroup);
+      }
+    });
+    _defineProperty(_this, "addServiceLayer", function (entry, resource) {
+      var asGroup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      _this.props.closeWindow("existinglayers");
+      if (resource) {
         var _entry$title;
-        var params = LayerUtils.splitLayerUrlParam(entry.resource);
         // Create placeholder layer
         _this.props.addLayer({
-          id: params.id,
+          id: resource.id,
           type: "placeholder",
-          name: params.name,
-          title: (_entry$title = entry.title) !== null && _entry$title !== void 0 ? _entry$title : params.name,
-          role: params.USERLAYER,
+          name: resource.name,
+          title: (_entry$title = entry.title) !== null && _entry$title !== void 0 ? _entry$title : resource.name,
+          role: resource.USERLAYER,
           loading: true
         });
-        ServiceLayerUtils.findLayers(params.type, params.url, [params], _this.props.mapCrs, function (id, layer) {
+        ServiceLayerUtils.findLayers(resource.type, resource.url, [resource], _this.props.mapCrs, function (id, layer) {
           if (layer) {
             if (entry.sublayers === false || !asGroup) {
               layer.sublayers = null;
             }
-            LayerUtils.propagateLayerProperty(layer, "opacity", params.opacity);
-            _this.props.replacePlaceholderLayer(params.id, layer);
+            LayerUtils.propagateLayerProperty(layer, "opacity", resource.opacity);
+            _this.props.replacePlaceholderLayer(resource.id, layer);
           } else {
             // eslint-disable-next-line
             alert(LocaleUtils.tr("importlayer.addfailed"));
-            _this.props.removeLayer(params.id);
+            _this.props.removeLayer(resource.id);
           }
         });
       } else if (entry.type === "wms" || entry.type === "wfs" || entry.type === "wmts") {
@@ -144,6 +174,11 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
         });
       }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.closeWindow("existinglayers");
+    }
   }, {
     key: "renderCatalogEntry",
     value: function renderCatalogEntry(entry, path) {
@@ -174,14 +209,16 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
       }), /*#__PURE__*/React.createElement("span", {
         className: "layer-catalog-widget-entry-contents",
         onClick: function onClick() {
-          return type ? _this2.addServiceLayer(entry, !hasSublayers) : _this2.toggleLayerListEntry(path);
-        }
+          return type ? _this2.checkAddServiceLayer(entry, !hasSublayers) : _this2.toggleLayerListEntry(path);
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        tabIndex: 0
       }, type ? /*#__PURE__*/React.createElement("span", {
         className: "layer-catalog-widget-entry-service"
       }, type) : null, entry.title), hasSublayers && type === "wms" ? /*#__PURE__*/React.createElement(Icon, {
         icon: "group",
         onClick: function onClick() {
-          return _this2.addServiceLayer(entry, true);
+          return _this2.checkAddServiceLayer(entry, true);
         },
         title: LocaleUtils.tr("importlayer.asgroup")
       }) : null), entry.expanded ? sublayers : null);
@@ -234,10 +271,23 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
 _defineProperty(LayerCatalogWidget, "propTypes", {
   addLayer: PropTypes.func,
   catalog: PropTypes.array,
+  closeWindow: PropTypes.func,
+  layers: PropTypes.array,
   levelBasedIndentSize: PropTypes.bool,
   mapCrs: PropTypes.string,
   pendingRequests: PropTypes.number,
   removeLayer: PropTypes.func,
-  replacePlaceholderLayer: PropTypes.func
+  replacePlaceholderLayer: PropTypes.func,
+  showNotification: PropTypes.func
 });
-export { LayerCatalogWidget as default };
+export default connect(function (state) {
+  return {
+    layers: state.layers.flat
+  };
+}, {
+  addLayer: addLayer,
+  closeWindow: closeWindow,
+  removeLayer: removeLayer,
+  replacePlaceholderLayer: replacePlaceholderLayer,
+  showNotification: showNotification
+})(LayerCatalogWidget);

package/components/widgets/MenuButton.js

@@ -15,6 +15,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 PopupMenu from './PopupMenu';
 import './style/MenuButton.css';
@@ -62,7 +63,7 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
   _inherits(MenuButton, _React$Component);
   return _createClass(MenuButton, [{
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       if (this.props.active !== prevProps.active && this.props.active && this.props.active !== this.state.selected) {
         this.setState({
           selected: this.props.active
@@ -74,7 +75,6 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
       var children = React.Children.toArray(this.props.children);
-      var rect = this.el ? this.el.getBoundingClientRect() : null;
       var buttonContents = null;
       if (this.props.menuIcon || this.props.menuLabel) {
         buttonContents = [this.props.menuIcon ? /*#__PURE__*/React.createElement(Icon, {
@@ -97,14 +97,17 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
         "menubutton-button-active": !!this.props.active,
         "menubutton-button-hover": this.state.popup
       });
+      var menuClassnames = "menubutton-menu" + (this.props.menuClassName ? " " + this.props.menuClassName : "");
       return /*#__PURE__*/React.createElement("div", {
-        className: classes,
-        ref: function ref(el) {
-          _this2.el = el;
-        }
+        className: classes
       }, /*#__PURE__*/React.createElement("div", {
         className: buttonClassnames,
-        onClick: this.onMenuClicked
+        onClick: this.onMenuClicked,
+        onKeyDown: MiscUtils.checkKeyActivate,
+        ref: function ref(el) {
+          _this2.el = el;
+        },
+        tabIndex: 0
       }, /*#__PURE__*/React.createElement("span", {
         className: "menubutton-button-content",
         onClick: this.onButtonClicked
@@ -115,23 +118,21 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
       })), this.props.tooltip ? /*#__PURE__*/React.createElement("span", {
         className: "menubutton-tooltip " + ("menubutton-tooltip-" + this.props.tooltipPos)
       }, this.props.tooltip) : null), this.el && this.state.popup ? /*#__PURE__*/React.createElement(PopupMenu, {
-        className: "menubutton-menu" + (this.props.menuClassName ? " " + this.props.menuClassName : ""),
+        anchor: this.el,
+        className: menuClassnames,
         onClose: function onClose() {
           return _this2.setState({
             popup: false
           });
-        },
-        width: rect.width,
-        x: rect.left,
-        y: rect.bottom
+        }
       }, children.map(function (child) {
         var classNames = classnames(_defineProperty({
-          "menubutton-menu-active": child.props.value === _this2.state.selected && !child.props.disabled,
-          "menubutton-menu-disabled": child.props.disabled
+          "menubutton-menu-active": child.props.value === _this2.state.selected && !child.props.disabled
         }, child.props.className, !!child.props.className));
         return /*#__PURE__*/React.cloneElement(child, {
           className: classNames,
-          onClickCapture: function onClickCapture() {
+          disabled: child.props.disabled,
+          onClick: function onClick() {
             return _this2.onChildClicked(child);
           }
         });

package/components/widgets/PopupMenu.js

@@ -12,14 +12,71 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Copyright 2024 Sourcepole AG
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+import isEmpty from 'lodash.isempty';
 import PropTypes from 'prop-types';
-var PopupMenu = /*#__PURE__*/function (_React$Component) {
+import MiscUtils from '../../utils/MiscUtils';
+import './style/PopupMenu.css';
+var PopupMenu = /*#__PURE__*/function (_React$PureComponent) {
   function PopupMenu(props) {
     var _this;
     _classCallCheck(this, PopupMenu);
     _this = _callSuper(this, PopupMenu, [props]);
+    _defineProperty(_this, "setFocus", function (el) {
+      var _this$props$anchor;
+      _this.menuEl = el;
+      if (el && ((_this$props$anchor = _this.props.anchor) === null || _this$props$anchor === void 0 ? void 0 : _this$props$anchor.nodeName) !== "INPUT") {
+        _this.menuEl.focus();
+      }
+    });
+    _defineProperty(_this, "clearFocus", function () {
+      var _this$props$anchor2;
+      if (((_this$props$anchor2 = _this.props.anchor) === null || _this$props$anchor2 === void 0 ? void 0 : _this$props$anchor2.nodeName) === "INPUT") {
+        _this.props.anchor.focus();
+      } else {
+        _this.menuEl.focus();
+      }
+    });
+    _defineProperty(_this, "keyNav", function (ev) {
+      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+        var childCount = _this.menuEl.children.length;
+        var delta = ev.key === 'ArrowUp' ? -1 : 1;
+        var currentIndex = Array.from(_this.menuEl.children).findIndex(function (el) {
+          return document.activeElement === el || el.contains(document.activeElement);
+        });
+        if (currentIndex === -1) {
+          currentIndex = delta === 1 ? childCount - 1 : 0;
+        }
+        var next = (currentIndex + childCount + delta) % childCount;
+        while (_this.menuEl.children[next].tabIndex !== 0 && next !== currentIndex) {
+          next = (next + childCount + delta) % childCount;
+        }
+        if (next !== currentIndex) {
+          _this.menuEl.children[next].focus();
+        }
+        MiscUtils.killEvent(ev);
+      } else if (ev.key === 'Escape') {
+        var _this$props$onClose, _this$props, _this$props$anchor3, _this$props$anchor3$f;
+        (_this$props$onClose = (_this$props = _this.props).onClose) === null || _this$props$onClose === void 0 || _this$props$onClose.call(_this$props);
+        (_this$props$anchor3 = _this.props.anchor) === null || _this$props$anchor3 === void 0 || (_this$props$anchor3$f = _this$props$anchor3.focus) === null || _this$props$anchor3$f === void 0 || _this$props$anchor3$f.call(_this$props$anchor3);
+        MiscUtils.killEvent(ev);
+      } else if (ev.key === 'Enter' || ev.key === ' ') {
+        MiscUtils.killEvent(ev);
+      } else if (ev.key !== 'Tab' && ev.key !== 'Shift') {
+        var _this$props$anchor4, _this$props$anchor4$f;
+        (_this$props$anchor4 = _this.props.anchor) === null || _this$props$anchor4 === void 0 || (_this$props$anchor4$f = _this$props$anchor4.focus) === null || _this$props$anchor4$f === void 0 || _this$props$anchor4$f.call(_this$props$anchor4);
+      }
+    });
     _this.container = document.createElement("div");
     _this.container.id = 'popup-container';
     _this.container.style.position = 'fixed';
@@ -28,43 +85,126 @@ var PopupMenu = /*#__PURE__*/function (_React$Component) {
     _this.container.style.top = 0;
     _this.container.style.bottom = 0;
     _this.container.style.zIndex = 100000;
+    if (_this.props.anchor) {
+      _this.shields = [];
+      var _loop = function _loop(i) {
+        _this.shields[i] = document.createElement("div");
+        _this.shields[i].style.position = 'absolute';
+        _this.shields[i].style.left = "0px";
+        _this.shields[i].style.right = "0px";
+        _this.shields[i].style.top = "0px";
+        _this.shields[i].style.bottom = "0px";
+        _this.shields[i].style.pointerEvents = 'initial';
+        _this.shields[i].style.zIndex = 0;
+        setTimeout(function () {
+          return _this.shields[i].addEventListener('click', function () {
+            var _this$props$onClose2, _this$props2;
+            (_this$props$onClose2 = (_this$props2 = _this.props).onClose) === null || _this$props$onClose2 === void 0 || _this$props$onClose2.call(_this$props2);
+          });
+        }, 0);
+        _this.container.appendChild(_this.shields[i]);
+      };
+      for (var i = 0; i < 4; ++i) {
+        _loop(i);
+      }
+      _this.container.style.pointerEvents = 'none';
+    }
+    _this.menuEl = null;
     setTimeout(function () {
       return _this.container.addEventListener('click', function () {
-        var _this$props$onClose, _this$props;
-        (_this$props$onClose = (_this$props = _this.props).onClose) === null || _this$props$onClose === void 0 || _this$props$onClose.call(_this$props);
+        var _this$props$onClose3, _this$props3;
+        (_this$props$onClose3 = (_this$props3 = _this.props).onClose) === null || _this$props$onClose3 === void 0 || _this$props$onClose3.call(_this$props3);
       });
     }, 0);
     document.body.appendChild(_this.container);
     return _this;
   }
-  _inherits(PopupMenu, _React$Component);
+  _inherits(PopupMenu, _React$PureComponent);
   return _createClass(PopupMenu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props$anchor5;
+      if (((_this$props$anchor5 = this.props.anchor) === null || _this$props$anchor5 === void 0 ? void 0 : _this$props$anchor5.nodeName) === "INPUT") {
+        this.props.anchor.addEventListener('keydown', this.keyNav);
+      }
+    }
+  }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$props$anchor6, _this$props$anchor7, _this$props$anchor7$f;
       document.body.removeChild(this.container);
+      if (((_this$props$anchor6 = this.props.anchor) === null || _this$props$anchor6 === void 0 ? void 0 : _this$props$anchor6.nodeName) === "INPUT") {
+        this.props.anchor.removeEventListener('keydown', this.keyNav);
+      }
+      (_this$props$anchor7 = this.props.anchor) === null || _this$props$anchor7 === void 0 || (_this$props$anchor7$f = _this$props$anchor7.focus) === null || _this$props$anchor7$f === void 0 || _this$props$anchor7$f.call(_this$props$anchor7);
     }
   }, {
     key: "render",
     value: function render() {
+      var _rect$left, _rect, _rect$bottom, _rect2, _ref, _rect$width, _rect3, _this$props$disabledI;
+      if (isEmpty(this.props.children)) {
+        return null;
+      }
+      var rect = null;
+      if (this.props.anchor) {
+        if ((this.props.anchor.parentElement.className || "").includes("input-container")) {
+          rect = this.props.anchor.parentElement.getBoundingClientRect();
+        } else {
+          rect = this.props.anchor.getBoundingClientRect();
+        }
+        this.shields[0].style.height = rect.top + "px";
+        this.shields[0].style.bottom = 0;
+        this.shields[1].style.width = rect.left + "px";
+        this.shields[1].style.right = 0;
+        this.shields[2].style.left = rect.right + "px";
+        this.shields[3].style.top = rect.bottom + "px";
+      }
+      var x = (_rect$left = (_rect = rect) === null || _rect === void 0 ? void 0 : _rect.left) !== null && _rect$left !== void 0 ? _rect$left : this.props.x;
+      var y = ((_rect$bottom = (_rect2 = rect) === null || _rect2 === void 0 ? void 0 : _rect2.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : this.props.y) - 1;
+      var minWidth = (_ref = (_rect$width = (_rect3 = rect) === null || _rect3 === void 0 ? void 0 : _rect3.width) !== null && _rect$width !== void 0 ? _rect$width : this.props.width) !== null && _ref !== void 0 ? _ref : 0;
       var style = {
         position: 'absolute',
-        left: this.props.x + 'px',
-        top: this.props.y + 'px',
-        minWidth: this.props.width + 'px',
-        maxHeight: window.innerHeight - this.props.y + 'px',
-        overflowY: 'auto'
+        left: x + 'px',
+        top: y + 'px',
+        minWidth: minWidth + 'px',
+        maxHeight: window.innerHeight - y - 5 + 'px',
+        overflowY: 'auto',
+        zIndex: 1,
+        pointerEvents: 'initial'
       };
+      if (this.props.setMaxWidth) {
+        style.maxWidth = minWidth + 'px';
+      }
+      var disabledItemClass = (_this$props$disabledI = this.props.disabledItemClass) !== null && _this$props$disabledI !== void 0 ? _this$props$disabledI : "popup-menu-item-disabled";
+      var children = Array.isArray(this.props.children) ? this.props.children : [this.props.children];
       return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
-        className: this.props.className,
-        style: style
-      }, this.props.children), this.container);
+        className: "popup-menu " + this.props.className,
+        onKeyDown: this.keyNav,
+        onMouseLeave: this.clearFocus,
+        ref: this.setFocus,
+        style: style,
+        tabIndex: 0
+      }, children.flat(Infinity).filter(Boolean).map(function (child) {
+        var className = classnames(_defineProperty(_defineProperty({}, disabledItemClass, child.props.disabled), child.props.className, !!child.props.className));
+        return /*#__PURE__*/React.cloneElement(child, {
+          className: className,
+          tabIndex: child.props.disabled ? undefined : 0,
+          onKeyDown: child.props.disabled ? undefined : MiscUtils.checkKeyActivate,
+          onMouseOver: child.props.disabled ? undefined : function (ev) {
+            return ev.target.focus();
+          }
+        });
+      })), this.container);
     }
   }]);
-}(React.Component);
+}(React.PureComponent);
 _defineProperty(PopupMenu, "propTypes", {
+  anchor: PropTypes.object,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   className: PropTypes.string,
+  disabledItemClass: PropTypes.string,
   onClose: PropTypes.func,
+  setMaxWidth: PropTypes.bool,
   width: PropTypes.number,
   x: PropTypes.number,
   y: PropTypes.number

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.19",
+    "version": "2025.11.27",
     "description": "QGIS Web Client",
     "author": "Sourcepole AG",
     "license": "BSD-2-Clause",

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,