Bookmarklet does not work within iframes

[aaronbnb]

Description

When one tabs from the main HTML document into an <iframe>, the panel does not appear and the focused element is not logged in the JavaScript console.

How to reproduce bug

1. Go to a website which has an <iframe> which contains focusable elements. Example site: MDN documentation on <iframe>
2. Tab onto a focusable element within the <iframe>
3. Note that the bookmarklet does not work.

Notes

There is no console error.

Interesting exchange on using JS bookmarklets in cross-domain manner (Stack Overflow)

[lloydi]

I'll be honest, @aaronbnb, it is HIGHLY unlikely that I'll get this to work on iframes. I foresee a fair bit of work on this for not much gain with time I don't have ... and coming back to my spaghetti code always takes a while to remember how it all works! So I will leave this issue open as a reminder that this might get looked at one day ... just don't hold your breath.

[aaronbnb]

Yeah for sure @lloydi. I expect any solution would require a great deal of experimentation. I just made the issue for posterity.

I was reviewing a video player, housed within an <iframe>. The elements within the video player provide no visual indication of focus. I needed to demonstrate what element was focused. Even when I added CSS to page `*:focus { outline: 3px solid red !important;}, it did not show a focus indicator.

I wonder whether CSS alone could be used to achieve sort of what you did i.e. can the content property be used to self-reference a focused element. I'm imagining something like *:focus::after { content: this.element}.

In any case, ended up using a Chrome Extension NerdeFocus. In console, it prints out the focused element. It's more clunky than your bookmarklet but it does reach <iframe>.

Tbh, what we need to do is get someone to fund ARC Toolkit to add a feature like your bookmarklet. I'll make the argument. Also, since ARC Toolkit is free, I feel such a feature would benefit the whole web.

[jducrot]

@lloydi could the solution here be to add the overlay info to the console at all times? Can you gather that info when the focus is in an iframe? If you can than you could just add a disclaimer saying "Hey, I know the visual output is missing when transitioning in an iframe but have no fear, the same info is logged to the console". This tool has been a life saver teaching devs and designers the value of keyboard navigation and the importance of accNames. Keep up the good work sir!

[aaronbnb]

@lloydi I've made a pull request to add support for WTFocus within iframes - in short, inject the function in each iframe.