Transform to pattern menu sets ARIA roles and attributes on the wrong element

[afercia]

Description

Wheb a block can be transformed to a pattern, the transform menu shows a 'Pattern' item as first item. Clicking it, shows the pattern preview. Clicking the pattern preview transforms the block.

There are a few a11y issues here:

• The aria-label and aria-describedbby attribute are set on the wrong element. They should be set on the element with role=option. Instead, they're set on its parent element.
• The focus style of the focusable preview is cut-off on the left and right sides.

Turns out this patterns list BlockPatternsList and pattern item BlockPattern use ad-hoc code instead of the general components already in use in the main inserter. Instead of repeating code, the transform menu should use the general components, which also use correct ARIA.

Step-by-step reproduction instructions

• Use Twenty Twenty Three.
• Edit a post, add a Heading block.
• Open the transform menu from the block toolbar.
• Click 'Patterns'.
• You should see one available pattern. To my understanding, this pattern comes from the Patterns directory.
• If you use Twenty Twenty One instead, you should see two available patterns, as the theme provides one pattern for the heading block.
• Inspect the source in your browser dev tools.
• Observe the element with role=option doesn't have the aria-label and aria-describedby attributes.
• Observe these attributes are set on the option parent.
• Use the keyboard and observe the pattern item focus style is cut-off on the left and right sides.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes