Mobile clicks cancelled with VoiceOver or Talkback

[steverep]

Description

When cancelSyntheticClickEvents is true in lib/utils/settings.js (default), click events initiated by mobile screen readers (VoiceOver or Talkback) are immediately killed by function _handleNative in lib/utils/gestures.js. This obviously affects any element using that module, but also seems to affect every other element on the page (i.e. even non-polymer elements), because the event listeners are injected globally ob the base html element and handle events before any other function.

The latter point means this bug can render nearly an entire application inaccessible even when most components do not use Polymer. See home-assistant/frontend#8178 and home-assistant/frontend#10617.

Please excuse that I cannot verify the breakage with Talkback as I do not currently have a device readily available.

Live Demo

iron-overlay-behavior demo on webcomponents.org

Steps to Reproduce

1. Go to demo on iOS in any browser
2. Turn on VoiceOver
3. Try to click the plain overlay button
4. Try to click the button to copy the code

Expected Results

Buttons should work equivalent to when VoiceOver is off

Actual Results

Nothing happens for either button

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari

Versions

• Polymer: latest
• webcomponents: latest