Re: [WICG/webcomponents] Mechanism for setting the tabindex focus flag without sprouting tabindex attribute? (#762)

The problem I'm having is wrapping a native element (eg: `<button>` or `<input>`) in a web component and not duplicating the roles.

````html
<x-toolbar role=toolbar>
  <x-button role=none tabindex=0>
    #shadow
      <button tabindex=0>Button 1</button>
  </x-button>
  <x-button role=none tabindex=-1>
    #shadow
      <button tabindex=-1>Button 2</button>
  </x-button>
</x-toolbar>
````
      
This works fine and Chrome and will show the AOM tree correctly. `<x-button>` will use `delegatesFocus` and properly focus the `<button>` But Firefox doesn't like it (warnings). Also, I'm not supposed to mix `[tabindex]` with `[role=none]`. But the problem I'm having is: how do I tell `x-toolbar` that `x-button` is a focusable element and should manage in a roving tabindex of it's children? 

I created another setup, but it requires now rewrite my mostly universal roving tabindex code for a custom attribute (`x-tabindex`):

Another example:

````html
<x-listbox role=toolbar>
  <x-listbox-option role=none x-tabindex=0>
    #shadow
        <input type=checkbox role=option tabindex=0 name=option1>
  </x-listbox-option>
  <x-listbox-option role=none x-tabindex=-1>
    #shadow
        <input type=checkbox role=option tabindex=-1 name=option2>
  </x-listbox-option>
</x-listbox>
````

Who's in the right here? Chrome or Firefox? Firefox doesn't seem to like a focusable element with `role=none` even with the custom `x-tabindex` attribute. Do I move forward with `tabindex` + `delegatesFocus` (Chrome) or start making general focusable elements in light DOM that don't use any semantic HTML in shadowDOM (FireFox)? I'll test these mechanics in Safari, but right now it's pretty concerning to not have a single solution for semantic+ARIA+tabindex. 

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/762#issuecomment-1231881636
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/762/1231881636@github.com>