<iframe> elements break Toolkit's Highlight feature

[aaronbnb]

Describe the bug
<iframe> breaks ARC Toolkit's Highlight feature.

When a page contains an <iframe> which contains an element that ARC Toolkit can highlight, ARC Toolkit highlights the elements in the viewport but does not display the element in the DevTools pane. This issue applies to all highlightable elements - such as:

• Headings
• Lists
• Table
• ARIA usage
• ARIA hidden
• ARIA UI
• tabindex
• IDs
• Landmarks

For example, when a page contains an <iframe> which contains a heading nested within that <iframe>, ARC Toolkit's Highlight Headings feature highlights the headings on the page in the viewport but does not display any heading elements within the DevTools pane.

To Reproduce
For this example, let's use headings or form fields:

1. Go to a page which has an <iframe> which contains a heading (either native or ARIA role="heading") or a form field
2. Open ARC Toolkit and select Highlight
3. In Highlight, select Highlight Headings or Forms
4. Note that the headings and form fields on the page (and within the <iframe>) are highlighted in the viewport but not displayed within the DevTools pane

Test Case: Acme Restaurant - test site
The <iframe> contains an <h2> and multiple <input>.

Screenshots

Note that the DevTools pane is blank.

Expected behavior

1. The elements highlighted in the browser viewport should also be displayed in the DevTools pane
2. In the DevTools pane, the elements should be displayed AND indicated as being located within an <iframe>

Version information

• Browser and version: Chrome 101*
• ARC Toolkit version: 5.5.3

Notes
This issue was reported by an external education institution which uses ARC Toolkit.

[ferllings]

https://dev.azure.com/tpgarc/AAP%20Portal%20R2/_workitems/edit/9148/

Fixed in https://dev.azure.com/tpgarc/AAP%20Portal%20R2/_git/ARC.ToolKit/pullrequest/1942