Widgets page and Customizer: The inserter should not use ARIA tabs semantics

[afercia]

Description

In the Widgets page, the Inserter doesn't need tabs because it is only supposed to show the 'Blocks' panel.

#61510 hid the entire panel header via CSS. The panel header contains the wrapper with role="tablist" that contains the 3 role="tab" panels. They're now hidden with display: none which makes them not perceivable by assistive technology. However, the panel with blocks still use a role="tabpanel", which is not associated with any 'tab'. As such, the ARIA tabs pattern is semantically broken.

Instead of using CSS, the inserter in the Widgets page should render a dirrerent UI that doesn't use the ARIA tabs pattern in the first palce, as it was before the latest changes to reunify the editor.

Cc @youknowriad @MaggieCabrera @scruffian

Step-by-step reproduction instructions

• Activate Twenty Twenty-One.
• Go to Appearance > Widgets.
• Open the main inserter.
• Observe the main inserter doesn't have tabs (they are hidden via CSS together with the whole panel header).
• Inspect the source via your browser dev tools.
• Obaserve the panel element with class block-editor-inserter__tabpanel still has a role="tabpanel" attribute.

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

[afercia]

I updated this issue title to include the Customizer.

After latest changes, the 'inserter' panel in Customize > Widgets shows 3 tabs, including Patterns and Media. It is expected to only show the Blocks panel.

Also, after #61421 the panel now has two 'Close' buttons. Screenshot:

On latest trunk:

On WordPress 6.5:

As mentioned above, the unnecessary tabs can't be hidden with CSS. Instead, the panel should render a UI that doesn't use ARIA tabs.