Style Book: iframe brings an additional tab stop in between tablist and tabpanel

[ciampo]

Originally posted by @ciampo in https://github.com/WordPress/gutenberg/issues/65047#issuecomment-2329250061

Something I've noticed is that there's a tab stop between the menu and the style book block examples. Haven't dug deeper, but it looks like it's focusing the iframe itself. This is pre-existing, but something to note and potentially fix.

Yeah, I noticed that too — it was added in https://github.com/WordPress/gutenberg/pull/48664 by @andrewserong , who added this paragraph in the PR description:

Note / caveat: because of lifting the iframe up to the root of the content area, I had to set the iframe to tabIndex=0 so that the buttons within it could be tabbed to. This seems to work pretty well, but means that the iframe itself now sits within the tab sequence of the style book. Happy for any suggestions on how to improve this.

We can't set tabindex="-1" on the iframe either, because that should skip its contents entirely. What we could do, is to:

• try and detect if the user is trying to go to the previous or to the next tabbable element;
• add a onFocus event listener on the iframe, and:
  • if the user wanted to go to the next tabbable, move focus to the first tabbable element inside the iframe;
  • if the user wanted to go to he previous tabbable, move focus to the first tabbable element before the iframe;

Not sure how robust this approach would be, though.

[andrewserong]

Thanks for opening this issue! It was an unfortunate side-effect in #48664, but on balance appeared to be worth it for the performance and styling benefits of using a single iframe.

What we could do, is to:

Yes, effectively intercepting tabbing behaviour there and moving to the next / previous tabbable as appropriate seems to be about the most direct way to handle it I think.

Not sure how robust this approach would be, though.

Indeed, we'd likely need to test it quite carefully to make sure it's working as expected in all cases.