tabindex behaving erratically inside a paper-dialog

[valdrinkoshi]

From @Kilometers42 on November 6, 2015 16:51

It seems like setting tabindex for elements inside a paper-dialog doesn't work. In the example below, in Chrome, when you tab through it goes W3Schools then Microsoft and never hits Google while in Internet Explorer it never tabs to any of them. Any ideas of what is causing this and how to fix it? Thanks!

<dom-module id="my-modal">
  <template>
    <button on-click="toggle">Test</button>
        <paper-dialog id="modal" modal>
        <a href="http://www.w3schools.com/" tabindex="2">W3Schools</a>
        <a href="http://www.google.com/" tabindex="1">Google</a>
        <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
    </paper-dialog>
  </template>
  <script>
    (function () {
      'use strict';

      Polymer({
        is: 'my-modal',
        toggle: function(){
        this.$.modal.toggle();
        }
      });
    })();
  </script>

</dom-module>

Copied from original issue: PolymerElements/paper-dialog#61

[valdrinkoshi]

This is caused by paper-dialog-behavior setting the dialog's tabindex to -1 here. If we remove it, we can see the focus on all the elements while tabbing.
@cdata, any idea why this is happening? Shall we move this issue to paper-dialog-behavior?

[valdrinkoshi]

From @cdata on December 8, 2015 23:49

Setting tabindex="-1" on the paper-dialog is intentional. I believe that the intent is for the dialog host not to be focusable via tabbing.

You can actually tab to the Google link, but you have to go in reverse tab order. I believe that the problem is that IronOverlayBehavior (or maybe nother behavior) is trying to find something focusable to focus and then focusing that thing. This might be disrupting the normal tab order.

Yeah, I think this issue needs to be moved. Maybe to PaperDialogBehavior, maybe to IronOverlayBehavior.

[valdrinkoshi]

The issue is on PaperDialogBehavior http://jsbin.com/nuwazas/7/edit?html,output

[valdrinkoshi]

I was able to reproduce this also without using Polymer, see here http://jsbin.com/papuwi/4/edit?html,output
If I put the links within a div that has tabindex="-1", it messes the tab order.
@cdata any thoughts?

[valdrinkoshi]

@Kilometers42 this gets solved by setting the autofocus attribute to the element you want to be focused first

<paper-dialog id="overlay">
  <a href="http://www.w3schools.com/" tabindex="2">W3Schools</a>
  <a href="http://www.google.com/" tabindex="1" autofocus>Google</a>
  <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
</paper-dialog>

demo
code

[valdrinkoshi]

Closing this as a solution has been provided & is an issue present in the browser even without using Polymer.

[kirilledelman]

I still can't tab between paper-input fields inside a paper-dialog.

[mutovkin]

I second this issue is still a problem even with autofocus set on one of the paper-input fields. Please re-open or document a solution for tabindex with multiple paper-input and other inputs inside paper-dialog

[valdrinkoshi]

First off, I wanted to point out that using tabindex > 0 is an anti-pattern, and can kill a11y http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html

That said, you can still tab through paper-inputs inside a paper-dialog, but you'll have issues in the focus wrapping when you reach the edges of the dialog (demo - code)
This happens because paper-input internally contains a native <input>, and when it receives focus, it delegates it to the internal <input>.
e.g. hit TAB, you'll see the focus doesn't wrap once reached the end of the dialog. Also, when you Shift+TAB and reach the first paper-input, the focus will move from the internal <input> to the paper-input itself (extra tab needed for wrapping).
I'd suggest to open an issue for this in iron-overlay-behavior. Unfortunately, focus wrapping is tough, and we are hoping to get some help from the platform (e.g. see this discussion)