Items under non-tabbable shadow-roots should not be tabbable

[Eden-Mironi-Evinced]

The tabbable library identifies elements that are usually tabbable as tabbable even though that in cases the shadow root has attribute of tabIndex="-1" it should remove all of its children from the tabbing sequence.
In this case:

both of the buttons should not get a true value for the isTabbable function.

[stefcameron]

Thanks for bringing this to my attention!

[stefcameron]

@Eden-Mironi-Evinced I had a closer look. There is already a test that covers this use case for the tabbable() API:

• https://github.com/focus-trap/tabbable/blob/master/test/e2e/shadow-dom.cy.js#L170
• Fixture: https://github.com/focus-trap/tabbable/blob/master/test/fixtures/shadow-dom-untabbable.html

So this already works as expected. I'm going to guess the issue is that you're calling isTabbable() (a different API) directly on either one of the buttons inside the non-tabbable shadow root.

Both tabbable() and isTabbable() (and focusable sibblings) operate solely by looking at the given container or node. They don't "look up", so they don't consider the context in which the given container or node, respectively, finds itself within the entire DOM.

We're lacking a test for isTabbable() on a non-tabbable shadow root, so I will add one, but it already passes without changing the implementation, and I will not be changing the behavior of the APIs. They've always operated that way.

If you need the context, then you could implement your own wrapper function that checks isTabbable(node) and then walks up the DOM tree by getting the parent of the node and checking that. Just be aware that this gets tricky if you're starting inside a shadow root, and even more if that shadow root is in an iframe.

I'm going to close this issue as "not a bug" when I merge the additional test.