Focus should work in shadow DOM in addition to light DOM

[helenxywu]

Description

When an element with iron overlay behavior contains custom elements, the overlay with backdrop should be able to tab into the shadow DOM of those elements. If not a full fix, would be nice to be able to provide focusable nodes to the containing element and have a behavior that finds the focusable nodes in an element.

Expected outcome

The elements inside of shadow DOM should be tabbed to.

Actual outcome

Only elements in light DOM can be tabbed to (captured by focusableNodes)

Steps to reproduce

1. Use an element with iron overlay behavior and withBackdrop on.
2. Create a custom element and place it inside of the overlay.
3. Try to tab through element

[valdrinkoshi]

Hi @helenxywu, the custom element needs to be focusable (aka should have tabindex >= 0).
Another option is to insert focusable placeholder elements as first and last child of the paper-dialog http://jsbin.com/tinafe/7/edit?html,output

[kirilledelman]

I'm having an issue with this behavior:

I'm using paper-dialog to wrap and display various forms. These forms are components by themselves - e.g. share-dialog, signup-dialog etc. Paper-dialog gets these forms as a child.

I found that I'm unable to tab from field to field inside my forms, because paper-dialog considers my form an atomic element, and ignores tabbable elements in the shadow dom.

I'm having a hard time finding a workaround that doesn't require me to rewrite a huge amount of code.

[kirilledelman]

Here's a workaround I've come up with. I hope Polymer team can make this obsolete:

// override getter of _focusableNodes ( gets called when the dialog first opens )
// modalDialog : paper-dialog
// dialogBodyElement : custom element with tabbable fields in its shady dom that 
//      paper-dialog prevents from tabbing properly
modalDialog.__defineGetter__( '_focusableNodes', function () {

    // add any elements that need to be tabbable inside shady dom of my form
    return Polymer.dom( this.root ).querySelectorAll( 'paper-input,paper-button,a,paper-checkbox' ); 

}.bind( dialogBodyElement ) );

[valdrinkoshi]

The _focusableNodes getter can already be overridden by the implementors the behavior. It is a protected since the idea is to not expose it to the element user.
Is it an option for you to implement paper-dialog-behavior (which includes iron-overlay-behavior) and override _focusableNodes, instead of using paper-dialog?

[valdrinkoshi]

Ideally, the platform should help us with something like this whatwg/html#897; with that, all the overlay would do is:

// on open
document.blockingElements.push(this);
// on close
document.blockingElements.remove(this);