@vaadin/component-base 23.0.0 → 23.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "23.0.0",
+  "version": "23.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "e5ce38429a14de1448d732614e359fb32b2c42e0"
+  "gitHead": "05fcc6daa21325753cf528c9c1072ccd8dd1e52e"
 }

package/src/element-mixin.js

@@ -3,11 +3,18 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { setCancelSyntheticClickEvents } from '@polymer/polymer/lib/utils/settings.js';
 import { usageStatistics } from '@vaadin/vaadin-usage-statistics/vaadin-usage-statistics.js';
 import { idlePeriod } from './async.js';
 import { Debouncer, enqueueDebouncer } from './debounce.js';
 import { DirMixin } from './dir-mixin.js';
 
+// This setting affects the legacy Polymer gestures which get activated
+// once you import any iron component e.g iron-icon.
+// It has to be explicitly disabled to prevent click issues in iOS + VoiceOver
+// for buttons that are based on `[role=button]` e.g vaadin-button.
+setCancelSyntheticClickEvents(false);
+
 window.Vaadin = window.Vaadin || {};
 
 /**
@@ -32,7 +39,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '23.0.0';
+      return '23.0.1';
     }
 
     /** @protected */

package/src/focus-trap-controller.js

@@ -5,6 +5,8 @@
  */
 import { getFocusableElements, isElementFocused } from './focus-utils.js';
 
+const instances = [];
+
 /**
  * A controller for trapping focus within a DOM node.
  */
@@ -61,6 +63,8 @@ export class FocusTrapController {
       throw new Error('The trap node should have at least one focusable descendant or be focusable itself.');
     }
 
+    instances.push(this);
+
     if (this.__focusedElementIndex === -1) {
       this.__focusableElements[0].focus();
     }
@@ -72,6 +76,8 @@ export class FocusTrapController {
    */
   releaseFocus() {
     this.__trapNode = null;
+
+    instances.pop();
   }
 
   /**
@@ -90,6 +96,11 @@ export class FocusTrapController {
       return;
     }
 
+    // Only handle events for the last instance
+    if (this !== Array.from(instances).pop()) {
+      return;
+    }
+
     if (event.key === 'Tab') {
       event.preventDefault();