iron-a11y-keys responding to key presses on non-target elements in shady DOM

[talimarcus]

Description

In shady DOM, iron-a11y-keys responds to key presses that happen on non-target elements.

Expected outcome

When I focus on a <button> element that is a sibling of the iron-a11y-keys target Node and tap the Space or Enter keys, iron-a11y-keys does not respond to the key press.

Actual outcome

When I focus on a <button> element that is a sibling of the iron-a11y-keys target Node and tap the Space or Enter keys, iron-a11y-keys responds to the key press.

Live Demo

https://codepen.io/talimarcus/pen/aqLpmG?editors=1010

Steps to reproduce

1. Open the CodePen linked above in Firefox
2. Open the developer console
3. Move keyboard focus to the <button> element
4. Press the Enter or Space key -- Two events are fired, and their rootTargets are printed in the Console. The rootTarget of the first is iron-a11y-keys, even though the element with focus (the button) is not the target of iron-a11y-keys.

Other notes

When I add

if (e.detail.keyboardEvent) {
  e.detail.keyboardEvent.preventDefault();
}

to the _handleTapped function (above the console.log()), the second (correct) event is no longer fired when Enter is tapped, but the rootTarget of the event that does fire is still wrong.

Browsers Affected

• Chrome*
• Firefox
• Safari 9*
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

*The issue also exists in Chrome 64 and Safari 11, but only in shady DOM.

[talimarcus]

@robdodson any idea who could help with this?

[valdrinkoshi]

This is caused by a bug in ShadyDOM where removeEventListener doesn't work properly on document fragments webcomponents/shadydom#190