Clay: @clayui/shared FocusScope focuses elements with `tabindex="-1"`

[pat270]

https://clayui.com/ tabbing through cog icon shows a state with no focus border. This is because the element <span class="c-inner" tabindex="-1"> receives focus. That dropdown is using ClayDropDownWithItems.

Also shift+tab backwards causes c-inner to be focused twice.

[matuzalemsteles]

Hey @pat270 I'm not sure if we should ignore FocusManager's tabindex="-1", ideally we want to control everything that is focusable. Why not remove tabindex="-1" for this case? I may be missing the requirement here to add tabindex="-1" to span.

[jbalsas]

Hey @matuzalemsteles, not sure what @pat270 is saying, but the way other FocusManagers work if I remember correctly is that they set tabindex=-1 in all elements they control and then set tabindex=0 in the one that's actively focused.

[jbalsas]

Failed to say that you configure which elements become part of the focus selection providing a css selector, so you have a more fine-grained control.

[matuzalemsteles]

Yeah, I understand that when we want tabindex="-1" we want to control the focus via JS and it deviates from the standard focus of the browser. So for this case because we are adding a tabindex="-1" and we don't want to control the focus, would it be just for the control via the css selector?

Although now I'm really thinking about ignoring the tabindex="-1" from FocusManager and assuming that whoever is add tabindex="-1" wants to control it and our FocusManager will behave like the "browser". Makes sense?

[jbalsas]

Although now I'm really thinking about ignoring the tabindex="-1" from FocusManager and assuming that whoever is add tabindex="-1" wants to control it and our FocusManager will behave like the "browser". Makes sense?

If we're not touching the tabindex ourselves while tabbing, then yeah, tabindex=-1 shouldn't be a focusable thing

[pat270]

Yes, I added the tabindex="-1". It wasn't added by Focus Manager.