Gutenberg: The new inserter "Patterns" tab needs accessibility improvements

[afercia]

Describe the bug
In the Gutenberg plugin version 8.2.1 the new Inserter has a new "Patterns" tab:

The tab displays a list of preset block layout patterns. Each pattern uses an element with role button labelled with the name of the pattern (which is nice) and displays the pattern preview.

However, when using the Tab key to navigate through these aria-buttons, there's the need to press Tab _twice_ to get to the next button.

This is a subpar experience for all keyboard users:

• sighted keyboard users will be confused by the double tab stop
• screen reader users sill be even more confused, as there's a "silent" tab stop that doesn't announce anything

I think the root cause is the iframe element within the button. I don't know much about this iframe but I seem to recall it's used for responsiveness and to display the preview. I think I discussed a while ago another related issue with @aduth since this iframs as a very incorrect aria-label="resize-listener" and if i remember correclty this was reported upstrea,.

Regardless, iframes are _focusable_ which explains the double tab stop.

I'm not sure if this iframe is really necessary in the first place. If it is, it should be made non-focusable. However, the best option would be to not use an iframe in the first place, if possible.

To reproduce

• install and activate the Gutenberg plugin 8..2.1
• edit a post and open the inserter
• switch to the Patterns tab
• use the Tab key to navigate through the patterns
• observe there's the need to press the Tab key twice to get to the following pattern

Expected behavior
Keyboard navigation to be standard (one Tab press) and predictable.

Editor version (please complete the following information):

• WordPress version: 5.4
• Gutenber gplugin 8.2.1

Note: I'd like to stress the fact the current implementation is far from ideal from an accessibility perspective. Also, keyboard navigation is part of basic accessibility testing and after more than 3 years of this project I'd expect new features to be merged after they are proved to be keyboard accessible, at least.

For this reason I'd kindly ask to not release this feature in its current state in WordPress 5.5. Keyboard navigation needs to be fixed first.

[aduth]

I think I discussed a while ago another related issue with @aduth since this iframs as a very incorrect aria-label="resize-listener" and if i remember correclty this was reported upstrea,.

A pull request was proposed and merged at https://github.com/FezVrasta/react-resize-aware/pull/42 , but a release has yet to be published. I've followed up.

Edit: It's now published as [email protected]. I've opened a pull request at #22868 to upgrade in Gutenberg.

[afercia]

Thanks @aduth!

The double tab stop still need ot be fixed though, as keyboard navigation is still broken. Reopening.

[aduth]

Thanks @aduth!

The double tab stop still need ot be fixed though, as keyboard navigation is still broken. Reopening.

Sorry, I intentionally didn't include any auto-closing syntax in my pull request. Someone else had edited it in.

[youknowriad]

Seems like this is fixed now.