"Tab order" skips elements in shadow DOM

[oczki]

Describe the bug

The "Tab order" highlight feature doesn't point the arrows to tabbable elements in shadow root (open).
As a result, the extension's user might think that their <button> or <a> is not reachable via keyboard, while in fact they work normally. It's just that the extension skips them.

To Reproduce

1. Go to https://www.ig.com/uk
2. Open ARC Toolkit in dev tools, then Highlight, then Tab order
3. See that the arrows don't point to elements that can be reached by the user via keyboard

Expected behavior

Arrows should show the correct tab order across all elements, including shadow DOM.

Screenshots

On https://www.ig.com/uk - links in some sections are kept in shadow root (open). As the screenshot shows, I've tabbed to one of the links (it has a black outline). On the right side of the screenshot, the elements tree shows one of the <a> elements in an open shadow root. The tab order arrows are incorrect on this site.

Version information

• Browser and version: Brave 1.61.114 (Chromium: 120.0.6099.199) 64-bit
• ARC Toolkit version: 5.6.0

[ferllings]

Shadow DOM is not supported yet.
Let's keep that ticket open to test once available