qwc2 2025.11.19 → 2025.11.27

package/components/AppMenu.js

@@ -31,7 +31,6 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { remove as removeDiacritics } from 'diacritics';
 import isEmpty from 'lodash.isempty';
-import isEqual from 'lodash.isequal';
 import mousetrap from 'mousetrap';
 import PropTypes from 'prop-types';
 import { setCurrentTask } from '../actions/task';
@@ -50,9 +49,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "state", {
       menuVisible: false,
       filter: "",
-      submenusVisible: [],
-      curEntry: null,
-      keyNav: false
+      submenusVisible: []
     });
     _defineProperty(_this, "addKeyBindings", function (items) {
       items.forEach(function (item) {
@@ -67,84 +64,6 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         }
       });
     });
-    _defineProperty(_this, "onKeyPress", function (ev) {
-      if (ev.key === 'Enter' || ev.key === 'ArrowLeft' || ev.key === 'ArrowUp' || ev.key === 'ArrowRight' || ev.key === 'ArrowDown') {
-        if (!_this.state.curEntry) {
-          if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
-            _this.setState({
-              curEntry: [ev.key === 'ArrowUp' ? _this.props.menuItems.length - 1 : 0]
-            });
-          }
-        } else {
-          var curEntry = _toConsumableArray(_this.state.curEntry);
-          var stack = [_this.props.menuItems];
-          _this.state.curEntry.forEach(function (entry) {
-            stack.push(stack[stack.length - 1][entry].subitems);
-          });
-          stack.pop();
-          var leaf = curEntry.pop();
-          var level = stack.length - 1;
-          if (ev.key === 'Enter') {
-            if (!isEmpty(stack[stack.length - 1][leaf].subitems)) {
-              _this.onSubmenuClicked(stack[stack.length - 1][leaf].key, level);
-            } else {
-              _this.onMenuitemClicked(stack[stack.length - 1][leaf]);
-            }
-          } else if (ev.key === 'ArrowLeft') {
-            if (!isEmpty(stack[stack.length - 1][leaf].subitems) && _this.state.submenusVisible[level] === stack[stack.length - 1][leaf].key) {
-              _this.onSubmenuClicked(stack[stack.length - 1][leaf].key, level);
-            }
-          } else if (ev.key === 'ArrowUp') {
-            leaf -= 1;
-            if (leaf >= 0 && !isEmpty(stack[stack.length - 1][leaf].subitems) && _this.state.submenusVisible[level] === stack[stack.length - 1][leaf].key) {
-              curEntry.push(leaf);
-              leaf = stack[stack.length - 1][leaf].subitems.length - 1;
-            } else {
-              while (leaf < 0 && curEntry.length > 0) {
-                leaf = curEntry.pop();
-              }
-              if (leaf < 0) {
-                leaf = _this.props.menuItems.length - 1;
-              }
-            }
-          } else if (ev.key === 'ArrowRight') {
-            if (!isEmpty(stack[stack.length - 1][leaf].subitems) && !_this.state.submenusVisible[level]) {
-              _this.onSubmenuClicked(stack[stack.length - 1][leaf].key, level);
-            }
-          } else if (ev.key === 'ArrowDown') {
-            if (!isEmpty(stack[stack.length - 1][leaf].subitems) && _this.state.submenusVisible[level] === stack[stack.length - 1][leaf].key) {
-              curEntry.push(leaf);
-              leaf = 0;
-            } else {
-              leaf += 1;
-              while (leaf > stack[stack.length - 1].length - 1 && curEntry.length > 0) {
-                leaf = curEntry.pop() + 1;
-                stack.pop();
-              }
-              if (leaf > _this.props.menuItems.length - 1) {
-                leaf = 0;
-              }
-            }
-          }
-          _this.setState({
-            curEntry: [].concat(_toConsumableArray(curEntry), [leaf]),
-            keyNav: true
-          });
-        }
-        MiscUtils.killEvent(ev);
-      } else if (ev.key === 'Escape') {
-        _this.toggleMenu();
-        MiscUtils.killEvent(ev);
-      }
-    });
-    _defineProperty(_this, "onMouseMove", function (ev) {
-      if (_this.state.keyNav) {
-        _this.setState({
-          keyNav: false
-        });
-      }
-      MiscUtils.killEvent(ev);
-    });
     _defineProperty(_this, "toggleMenu", function () {
       if (!_this.state.menuVisible && _this.props.currentTaskBlocked) {
         return;
@@ -152,17 +71,6 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       if (!_this.state.menuVisible && _this.props.appMenuClearsTask) {
         _this.props.setCurrentTask(null);
       }
-      if (!_this.props.keepMenuOpen) {
-        if (!_this.state.menuVisible) {
-          document.addEventListener('click', _this.checkCloseMenu);
-          document.addEventListener('keydown', _this.onKeyPress, true);
-          document.addEventListener('mousemove', _this.onMouseMove, true);
-        } else {
-          document.removeEventListener('click', _this.checkCloseMenu);
-          document.removeEventListener('keydown', _this.onKeyPress, true);
-          document.removeEventListener('mousemove', _this.onMouseMove, true);
-        }
-      }
       _this.props.onMenuToggled(!_this.state.menuVisible);
       if (_this.props.menuCompact) {
         _this.props.setMenuMargin(!_this.state.menuVisible ? MiscUtils.convertEmToPx(3.75) : 0, 0);
@@ -178,8 +86,8 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "checkCloseMenu", function (ev) {
       if (_this.menuEl && !_this.menuEl.contains(ev.target) && !_this.props.keepMenuOpen) {
         _this.toggleMenu();
+        MiscUtils.killEvent(ev);
       }
-      MiscUtils.killEvent(ev);
     });
     _defineProperty(_this, "onSubmenuClicked", function (key, level) {
       var a = _this.state.submenusVisible[level] === key ? [] : [key];
@@ -200,102 +108,68 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         _this.props.setCurrentTask(item.task || item.key, item.mode, item.mapClickAction || (item.identifyEnabled ? "identify" : null));
       }
     });
-    _defineProperty(_this, "renderMenuItems", function (items, level, filter, path) {
-      if (items) {
-        return items.map(function (item, idx) {
-          var active = isEqual(_this.state.curEntry, [].concat(_toConsumableArray(path), [idx]));
-          if (item.subitems) {
-            var _item$key;
-            var subitems = _this.renderMenuItems(item.subitems, level + 1, filter, [].concat(_toConsumableArray(path), [idx]));
-            if (filter && isEmpty(subitems)) {
-              return null;
-            }
-            var visible = filter && !isEmpty(subitems) || _this.state.submenusVisible[level] === item.key;
-            var className = classnames({
-              "appmenu-submenu": true,
-              "appmenu-submenu-active": active,
-              "appmenu-submenu-expanded": visible
+    _defineProperty(_this, "renderMenuItems", function (items, level, filter) {
+      var submenu = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      return (items || []).map(function (item) {
+        if (item.subitems) {
+          var _item$key;
+          var expanded = filter || _this.state.submenusVisible[level] === item.key;
+          var subitems = expanded ? _this.renderMenuItems(item.subitems, level + 1, filter, true) : null;
+          if (filter && isEmpty(subitems)) {
+            return null;
+          }
+          var className = classnames({
+            "appmenu-menu-item": true,
+            "appmenu-submenu": true,
+            "appmenu-submenu-expanded": expanded
+          });
+          return [/*#__PURE__*/React.createElement("div", {
+            className: className,
+            key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.title,
+            onClick: function onClick() {
+              return _this.onSubmenuClicked(item.key, level);
+            },
+            onKeyDown: _this.keyNav,
+            onMouseOver: function onMouseOver(ev) {
+              return ev.target.focus();
+            },
+            tabIndex: 0
+          }, /*#__PURE__*/React.createElement(Icon, {
+            icon: item.icon,
+            size: "xlarge"
+          }), item.title ? LocaleUtils.tr(item.title) : LocaleUtils.tr("appmenu.items." + item.key)), subitems];
+        } else {
+          var trargs = item.trargs || [];
+          var label = item.title ? LocaleUtils.tr.apply(LocaleUtils, [item.title].concat(_toConsumableArray(trargs))) : LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "")].concat(_toConsumableArray(trargs)));
+          var comment = item.comment ? LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "") + "_comment"].concat(_toConsumableArray(trargs))) : "";
+          if (!filter || removeDiacritics(label.toLowerCase()).match(filter) || comment && removeDiacritics(comment.toLowerCase()).match(filter)) {
+            var _className = classnames({
+              "appmenu-menu-item": true,
+              "appmenu-menu-item-nested": submenu
             });
-            return /*#__PURE__*/React.createElement("li", {
-              className: className,
-              key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.title,
+            return /*#__PURE__*/React.createElement("div", {
+              className: _className,
+              key: item.key ? item.key + (item.mode || "") : item.title,
               onClick: function onClick() {
-                return _this.onSubmenuClicked(item.key, level);
-              },
-              onMouseEnter: function onMouseEnter() {
-                if (!_this.state.keyNav) {
-                  _this.setState({
-                    curEntry: [].concat(_toConsumableArray(path), [idx])
-                  });
-                }
+                return _this.onMenuitemClicked(item);
               },
-              onMouseLeave: function onMouseLeave() {
-                if (!_this.state.keyNav) {
-                  _this.setState({
-                    curEntry: null
-                  });
-                }
+              onKeyDown: _this.keyNav,
+              onMouseOver: function onMouseOver(ev) {
+                return ev.target.focus();
               },
-              ref: function ref(el) {
-                if (active && el && _this.state.keyNav) {
-                  el.scrollIntoView(false);
-                }
-              }
+              tabIndex: 0
             }, /*#__PURE__*/React.createElement(Icon, {
               icon: item.icon,
               size: "xlarge"
-            }), item.title ? LocaleUtils.tr(item.title) : LocaleUtils.tr("appmenu.items." + item.key), /*#__PURE__*/React.createElement("ul", null, subitems));
-          } else {
-            var trargs = item.trargs || [];
-            var label = item.title ? LocaleUtils.tr.apply(LocaleUtils, [item.title].concat(_toConsumableArray(trargs))) : LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "")].concat(_toConsumableArray(trargs)));
-            var comment = item.comment ? LocaleUtils.tr.apply(LocaleUtils, ["appmenu.items." + item.key + (item.mode || "") + "_comment"].concat(_toConsumableArray(trargs))) : "";
-            if (!filter || removeDiacritics(label.toLowerCase()).match(filter) || comment && removeDiacritics(comment.toLowerCase()).match(filter)) {
-              var _className = classnames({
-                "appmenu-leaf": true,
-                "appmenu-leaf-active": active
-              });
-              return /*#__PURE__*/React.createElement("li", {
-                className: _className,
-                key: item.key ? item.key + (item.mode || "") : item.title,
-                onClick: function onClick() {
-                  return _this.onMenuitemClicked(item);
-                },
-                onMouseEnter: function onMouseEnter() {
-                  if (!_this.state.keyNav) {
-                    _this.setState({
-                      curEntry: [].concat(_toConsumableArray(path), [idx])
-                    });
-                  }
-                },
-                onMouseLeave: function onMouseLeave() {
-                  if (!_this.state.keyNav) {
-                    _this.setState({
-                      curEntry: null
-                    });
-                  }
-                },
-                ref: function ref(el) {
-                  if (active && el && _this.state.keyNav) {
-                    el.scrollIntoView(false);
-                  }
-                }
-              }, /*#__PURE__*/React.createElement(Icon, {
-                icon: item.icon,
-                size: "xlarge"
-              }), /*#__PURE__*/React.createElement("span", {
-                className: "appmenu-leaf-label"
-              }, label, comment ? /*#__PURE__*/React.createElement("div", {
-                className: "appmenu-leaf-comment"
-              }, comment) : null));
-            }
-            return null;
+            }), /*#__PURE__*/React.createElement("span", {
+              className: "appmenu-menu-item-label"
+            }, label, comment ? /*#__PURE__*/React.createElement("div", {
+              className: "appmenu-menu-item-comment"
+            }, comment) : null));
           }
-        }).filter(function (x) {
-          return x;
-        });
-      } else {
-        return null;
-      }
+          return null;
+        }
+      });
     });
     _defineProperty(_this, "setFilterField", function (el) {
       _this.filterfield = el;
@@ -303,6 +177,54 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
         mousetrap(el).bind(_this.props.appMenuShortcut, _this.toggleMenu);
       }
     });
+    _defineProperty(_this, "focusFilterField", function (ev) {
+      if (ev.target.classList.contains("appmenu-menu-item-filter")) {
+        var _this$filterfield, _this$filterfield$foc;
+        (_this$filterfield = _this.filterfield) === null || _this$filterfield === void 0 || (_this$filterfield$foc = _this$filterfield.focus) === null || _this$filterfield$foc === void 0 || _this$filterfield$foc.call(_this$filterfield);
+      }
+    });
+    _defineProperty(_this, "clearFocus", function () {
+      document.activeElement.blur();
+    });
+    _defineProperty(_this, "btnKeyNav", function (ev) {
+      if (ev.key === 'ArrowDown') {
+        var _this$menuEl$children;
+        (_this$menuEl$children = _this.menuEl.children[0]) === null || _this$menuEl$children === void 0 || _this$menuEl$children.focus();
+      } else if (ev.key === 'ArrowUp') {
+        var _this$menuEl$children2;
+        (_this$menuEl$children2 = _this.menuEl.children[_this.menuEl.children.length - 1]) === null || _this$menuEl$children2 === void 0 || _this$menuEl$children2.focus();
+      } else {
+        MiscUtils.checkKeyActivate(ev);
+      }
+    });
+    _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;
+        _this.menuEl.children[next].focus();
+        MiscUtils.killEvent(ev);
+      } else if (ev.key === 'Escape') {
+        var _this$menuBtn, _this$menuBtn$focus;
+        if (!_this.props.menuCompact) {
+          _this.toggleMenu();
+        }
+        (_this$menuBtn = _this.menuBtn) === null || _this$menuBtn === void 0 || (_this$menuBtn$focus = _this$menuBtn.focus) === null || _this$menuBtn$focus === void 0 || _this$menuBtn$focus.call(_this$menuBtn);
+        MiscUtils.killEvent(ev);
+      } else if (ev.key === 'Enter' || ev.key === ' ') {
+        if (ev.target.classList.contains("appmenu-menu-item")) {
+          ev.target.click();
+          MiscUtils.killEvent(ev);
+        }
+      }
+    });
+    _this.menuBtn = null;
     _this.menuEl = null;
     _this.filterfield = null;
     _this.boundShortcuts = [];
@@ -324,11 +246,18 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
-      if (this.state.menuVisible && !prevState.menuVisible && this.filterfield && !this.props.menuCompact) {
+      if (this.state.menuVisible && !prevState.menuVisible && !this.props.menuCompact) {
         // Need to wait until slide in transition is over
         setTimeout(function () {
-          _this2.filterfield.focus();
+          var _this2$filterfield, _this2$filterfield$fo;
+          (_this2$filterfield = _this2.filterfield) === null || _this2$filterfield === void 0 || (_this2$filterfield$fo = _this2$filterfield.focus) === null || _this2$filterfield$fo === void 0 || _this2$filterfield$fo.call(_this2$filterfield);
         }, 400);
+        // Delay one cycle
+        setTimeout(function () {
+          return document.addEventListener('click', _this2.checkCloseMenu);
+        }, 0);
+      } else if (prevState.menuVisible && !this.state.menuVisible && !this.props.menuCompact) {
+        document.removeEventListener('click', this.checkCloseMenu);
       }
     }
   }, {
@@ -340,11 +269,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       if (this.props.appMenuShortcut) {
         mousetrap.unbind(this.props.appMenuShortcut, this.toggleMenu);
       }
-      if (this.state.menuVisible) {
-        document.removeEventListener('click', this.checkCloseMenu);
-        document.removeEventListener('keydown', this.onKeyPress, true);
-        document.removeEventListener('mousemove', this.onMouseMove, true);
-      }
+      document.removeEventListener('click', this.checkCloseMenu);
     }
   }, {
     key: "render",
@@ -362,14 +287,15 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       });
       var filter = this.state.filter ? new RegExp(removeDiacritics(this.state.filter).replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"), "i") : null;
       return /*#__PURE__*/React.createElement("div", {
-        className: className,
-        ref: function ref(el) {
-          _this3.menuEl = el;
-          MiscUtils.setupKillTouchEvents(el);
-        }
+        className: className
       }, /*#__PURE__*/React.createElement("div", {
         className: "appmenu-button",
-        onMouseDown: this.toggleMenu,
+        onClick: this.toggleMenu,
+        onKeyDown: this.btnKeyNav,
+        ref: function ref(el) {
+          _this3.menuBtn = el;
+        },
+        tabIndex: 0,
         title: this.props.buttonLabel
       }, showLabel ? /*#__PURE__*/React.createElement("span", {
         className: "appmenu-label"
@@ -378,17 +304,28 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "menu-hamburger"
       }))), /*#__PURE__*/React.createElement("div", {
-        className: "appmenu-menu-container"
-      }, /*#__PURE__*/React.createElement("ul", {
-        className: "appmenu-menu"
-      }, this.props.showFilterField ? /*#__PURE__*/React.createElement("li", {
-        className: "appmenu-leaf"
+        className: "appmenu-menu-container",
+        tabIndex: -1
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "appmenu-menu",
+        inert: visible ? undefined : "true",
+        onMouseLeave: this.clearFocus,
+        ref: function ref(el) {
+          _this3.menuEl = el;
+          MiscUtils.setupKillTouchEvents(el);
+        }
+      }, this.props.showFilterField ? /*#__PURE__*/React.createElement("div", {
+        className: "appmenu-menu-item appmenu-menu-item-filter",
+        onFocus: this.focusFilterField,
+        onKeyDown: this.keyNav,
+        onMouseOver: function onMouseOver(ev) {
+          return ev.target.focus();
+        },
+        tabIndex: 0
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "search",
         size: "xlarge"
-      }), /*#__PURE__*/React.createElement(InputContainer, {
-        className: "appmenu-filter"
-      }, /*#__PURE__*/React.createElement("input", {
+      }), /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement("input", {
         onChange: function onChange(ev) {
           return _this3.setState({
             filter: ev.target.value,
@@ -408,7 +345,7 @@ var AppMenu = /*#__PURE__*/function (_React$Component) {
           });
         },
         role: "suffix"
-      }))) : null, this.renderMenuItems(this.props.menuItems, 0, filter, []))));
+      }))) : null, this.renderMenuItems(this.props.menuItems, 0, filter))));
     }
   }]);
 }(React.Component);

package/components/AttributeTableWidget.js

@@ -55,6 +55,7 @@ import { FeatureCache, KeyValCache, parseExpression, getFeatureTemplate } from '
 import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MapUtils from '../utils/MapUtils';
+import MiscUtils from '../utils/MiscUtils';
 import VectorLayerUtils from '../utils/VectorLayerUtils';
 import './style/AttributeTableWidget.css';
 var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
@@ -761,6 +762,8 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             return _this2.sortBy("id");
           },
+          onKeyDown: MiscUtils.checkKeyActivate,
+          tabIndex: 0,
           title: this.translateFieldName("id")
         }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
           className: "attribtable-table-headername"
@@ -770,6 +773,8 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
             onClick: function onClick() {
               return _this2.sortBy(field.id);
             },
+            onKeyDown: MiscUtils.checkKeyActivate,
+            tabIndex: 0,
             title: _this2.translateFieldName(field.name)
           }, /*#__PURE__*/React.createElement("span", null, _this2.renderColumnResizeHandle(idx + 1, 'l'), /*#__PURE__*/React.createElement("span", {
             className: "attribtable-table-headername"

package/components/FeatureAttributesWindow.js

@@ -151,8 +151,7 @@ var FeatureAttributesWindow = /*#__PURE__*/function (_React$Component) {
         scrollable: true,
         title: LocaleUtils.tr("featureattributes.windowtitle")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "feature-attributes-body",
-        role: "body"
+        className: "feature-attributes-body"
       }, body));
     }
   }]);

package/components/FullscreenSwitcher.js

@@ -26,6 +26,7 @@ import PropTypes from 'prop-types';
 import { toggleFullscreen } from '../actions/display';
 import ConfigUtils from '../utils/ConfigUtils';
 import LocaleUtils from '../utils/LocaleUtils';
+import MiscUtils from '../utils/MiscUtils';
 import './style/FullscreenSwitcher.css';
 var FullscreenSwitcher = /*#__PURE__*/function (_React$Component) {
   function FullscreenSwitcher() {
@@ -75,6 +76,8 @@ var FullscreenSwitcher = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement("div", {
         className: "FullScreenSwitcher",
         onClick: this.toggleFullscreen,
+        onKeyDown: MiscUtils.checkKeyActivate,
+        tabIndex: 0,
         title: tooltip
       }, /*#__PURE__*/React.createElement("span", {
         className: this.props.fullscreen ? "minimize" : "maximize"

package/components/Icon.js

@@ -40,6 +40,8 @@ var Icon = /*#__PURE__*/function (_React$Component) {
         icon_disabled: this.props.disabled,
         icon_clickable: !!this.props.onClick || !!this.props.onMouseDown || !!this.props.onPointerDown
       }, "icon-" + this.props.icon, true), "icon_" + this.props.size, !!this.props.size), this.props.className, !!this.props.className));
+      var tabIndex = this.props.onClick ? 0 : undefined;
+      var onKeyDown = tabIndex !== undefined ? MiscUtils.checkKeyActivate : null;
       if (this.props.icon.startsWith(":/")) {
         var assetsPath = ConfigUtils.getAssetsPath();
         var src = assetsPath + this.props.icon.substr(1);
@@ -48,10 +50,12 @@ var Icon = /*#__PURE__*/function (_React$Component) {
           className: classes,
           onClick: this.props.disabled ? null : this.props.onClick,
           onContextMenu: MiscUtils.killEvent,
+          onKeyDown: onKeyDown,
           onMouseDown: this.props.onMouseDown,
           onMouseUp: this.props.onMouseUp,
           onPointerDown: this.props.onPointerDown,
           src: src,
+          tabIndex: tabIndex,
           title: this.props.title || undefined
         });
       } else {
@@ -59,9 +63,11 @@ var Icon = /*#__PURE__*/function (_React$Component) {
           className: classes,
           onClick: this.props.disabled ? null : this.props.onClick,
           onContextMenu: MiscUtils.killEvent,
+          onKeyDown: onKeyDown,
           onMouseDown: this.props.onMouseDown,
           onMouseUp: this.props.onMouseUp,
           onPointerDown: this.props.onPointerDown,
+          tabIndex: tabIndex,
           title: this.props.title || undefined
         });
       }

package/components/ImportLayer.js

@@ -39,7 +39,7 @@ import isEmpty from 'lodash.isempty';
 import { WorkerMessageHandler } from "pdfjs-dist/build/pdf.worker";
 import Proj4js from 'proj4';
 import PropTypes from 'prop-types';
-import { addLayer, addLayerFeatures, removeLayer, replacePlaceholderLayer } from '../actions/layers';
+import { addLayer, addLayerFeatures } from '../actions/layers';
 import EditableSelect from '../components/widgets/EditableSelect';
 import ConfigUtils from '../utils/ConfigUtils';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
@@ -683,9 +683,7 @@ var ImportLayer = /*#__PURE__*/function (_React$Component) {
         layerList = /*#__PURE__*/React.createElement(LayerCatalogWidget, {
           addLayer: this.props.addLayer,
           catalog: this.state.serviceLayers,
-          pendingRequests: this.state.pendingRequests,
-          removeLayer: this.props.removeLayer,
-          replacePlaceholderLayer: this.props.replacePlaceholderLayer
+          pendingRequests: this.state.pendingRequests
         });
       }
       var disableLocal = ConfigUtils.getConfigProp("disableImportingLocalLayers", this.props.theme);
@@ -716,8 +714,6 @@ _defineProperty(ImportLayer, "propTypes", {
   addLayer: PropTypes.func,
   addLayerFeatures: PropTypes.func,
   mapCrs: PropTypes.string,
-  removeLayer: PropTypes.func,
-  replacePlaceholderLayer: PropTypes.func,
   theme: PropTypes.object,
   themes: PropTypes.object
 });
@@ -728,7 +724,5 @@ export default connect(function (state) {
   };
 }, {
   addLayer: addLayer,
-  addLayerFeatures: addLayerFeatures,
-  removeLayer: removeLayer,
-  replacePlaceholderLayer: replacePlaceholderLayer
+  addLayerFeatures: addLayerFeatures
 })(ImportLayer);

package/components/LayerInfoWindow.js

@@ -117,8 +117,7 @@ var LayerInfoWindow = /*#__PURE__*/function (_React$Component) {
         onClose: this.onClose,
         title: LocaleUtils.tr("layerinfo.title")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "layer-info-window-body",
-        role: "body"
+        className: "layer-info-window-body"
       }, /*#__PURE__*/React.createElement("h4", {
         className: "layer-info-window-title"
       }, this.props.sublayer.title), /*#__PURE__*/React.createElement("div", {

package/components/MapButton.js

@@ -68,6 +68,7 @@ var MapButton = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("button", {
         className: "".concat(className, " ").concat(this.props.className || ""),
         onClick: this.props.onClick,
+        ref: this.props.buttonRef,
         title: this.props.tooltip
       }, this.props.busy ? /*#__PURE__*/React.createElement(Spinner, null) : /*#__PURE__*/React.createElement(Icon, {
         icon: this.props.icon,
@@ -80,6 +81,7 @@ _defineProperty(MapButton, "contextType", MapButtonPortalContext);
 _defineProperty(MapButton, "propTypes", {
   active: PropTypes.bool,
   busy: PropTypes.bool,
+  buttonRef: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   className: PropTypes.string,
   disabled: PropTypes.bool,

package/components/NumericInputWindow.js

@@ -332,8 +332,7 @@ var NumericInputWindow = /*#__PURE__*/function (_React$Component) {
         scrollable: true,
         title: LocaleUtils.tr("numericinput.windowtitle")
       }, /*#__PURE__*/React.createElement("div", {
-        className: "numeric-input-widget-body",
-        role: "body"
+        className: "numeric-input-widget-body"
       }, body));
     }
   }], [{

package/components/PickFeature.js

@@ -260,7 +260,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
           var key = (entry.mapName || "") + "." + entry.layer + ":" + entry.feature.id;
           return /*#__PURE__*/React.createElement("div", {
             key: key,
-            onClickCapture: function onClickCapture() {
+            onClick: function onClick() {
               return _this3.props.featurePicked(entry.layer, entry.feature, entry.mapName);
             },
             onMouseOut: function onMouseOut() {