Setting hidden to true can break accessibility in paper-dialog

[notwaldorf]

From @cbelden on June 15, 2016 18:42

Came across an issue where a hidden paper-input elements prevent correct tabbing behavior in a paper-dialog.

    <paper-dialog with-backdrop>
      <h2 class="header">Hello</h2>
      <paper-input hidden="true" type="text"></paper-input>
      <div>
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm>OK</paper-button>
      </div>
    </paper-dialog>

After opening the dialog, and clicking on the header, pressing tab does not focus the buttons. Here's the jsfiddle: https://jsfiddle.net/cbelden/tjrt692z/2/

Is this expected behavior? Should we enclose dynamic input elements in dom-ifs instead of setting the hidden attribute?

Note: setting disabled="true" on the paper-input element had no effect.

Copied from original issue: googlearchive/paper-input#200

[notwaldorf]

@valdrinkoshi I think this sounds like a paper-dialog issue, possibly with the focus wrapping code?

[notwaldorf]

From @valdrinkoshi on June 21, 2016 0:9

Yes and no...paper-input is considered to be focusable, but the hidden="true" makes it effectively not focusable. I would suggest to also set tabindex="-1" to the hidden paper-input http://jsbin.com/qiyero/1/edit?html,output

[notwaldorf]

Shouldn't there be a rule about ignoring all hidden elements, whatever they are? Even if I have a <button hidden>, that will never be focusable as is, so it shouldn't be considered the first element in the chain, no?

[notwaldorf]

From @valdrinkoshi on June 21, 2016 0:19

Uhm, then we'd need to do the same for all the visual properties that effectively disable the possibility to focus an element like display: none or opacity: 0.

[notwaldorf]

Well, if hidden works, which it doesn't, it literally does display:none and removes the element. opacity or visibility still leave the element there, and just make it invisible. I understand what you mean, but I also think that having a hidden input be considered for anything is unintuitive.

[notwaldorf]

From @blasten on June 21, 2016 0:46

This is the 0.5 element 😅

[notwaldorf]

@blasten This is the 0.5 repo, but if you look at the linked code, it's about the 1.0 elements. Since I wasn't sure if I should move the issue to paper-dialog, i wanted to get @valdrinkoshi's opinion first.

[notwaldorf]

From @valdrinkoshi on June 21, 2016 12:6

I believe this is definitely related to the incapability of iron-overlay-behavior to recognize the tabbable elements. Feel free to move it there :)