@domenic @esprehn @tkent-google @TakayoshiKochi

Hi,

As spec'd (as far as I can tell), <dialog> has a few cases where the tabindex + focus behavior is unintuitive to me.

Specs:
https://html.spec.whatwg.org/multipage/forms.html#dialog-focusing-steps
https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation-order
https://html.spec.whatwg.org/multipage/interaction.html#negative-tabindex

First case:

<dialog>
  <div tabindex="-1">
    i don't wish to participate in the tab order,
    but am focused when showModal() is called
  </div>
</dialog>

Second case:

<dialog>
  <button tabindex="-1">
    i get focused on showModal() even with a negative tabindex
  </button>
</dialog>

Third case:

<dialog>
  <button tabindex="-1">
    i get focused on showModal() even with a negative tabindex
  </button>
  <div tabindex="0">
    i lose even through I participate in the tab order
  </div>
</dialog>

It's obviously possible to remove the tabindex="-1" in cases 2 and 3, but some frameworks (i.e. Polymer) use .tabIndex = 0/-1 as if it's the same as calling setAttribute('tabindex', '0') or removeAttribute('tabindex').

Additionally, there's no easy way to remove an element that is tabbable by default (i.e. <button>, <a href>) without the ability to specify tabindex="-1".

I think this generally boils down to spec lingo about the "tabindex focus flag" or being "focusable" when it should be more like being in the "sequential focus navigation order".

This leads to unexpected mismatches in behavior (at least in my mental modal) which actually manifested in Chrome's settings page.

Note: while this currently only affects Chrome, Mozilla seems to be kinda/sorta interested:
https://bugzilla.mozilla.org/show_bug.cgi?id=840640