fix: disable cancelSyntheticClickEvents globally

packages/component-base/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 || {};
 
 /**

packages/component-base/test/element-mixin.test.js

@@ -1,4 +1,5 @@
 import { expect } from '@esm-bundle/chai';
+import { click, touchend, touchstart } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { flush } from '../src/debounce.js';
@@ -35,6 +36,27 @@ describe('ElementMixin', () => {
     });
   });
 
+  describe('cancelSyntheticClickEvents', () => {
+    let button;
+
+    beforeEach(() => {
+      button = document.createElement('div');
+      document.body.appendChild(button);
+    });
+
+    afterEach(() => {
+      button.remove();
+    });
+
+    it('should disable cancelSyntheticClickEvents globally', async () => {
+      await import('@polymer/polymer/lib/utils/gestures.js');
+      touchstart(button);
+      touchend(button);
+      const event = click(button);
+      expect(event.__polymerGesturesHandled).to.be.undefined;
+    });
+  });
+
   describe('version', () => {
     let XElement;