search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.48k stars 4.18k forks source link

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

Open afercia opened 5 months ago

afercia commented 5 months ago

Description

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

https://github.com/WordPress/gutenberg/pull/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

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 commented 5 months ago

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 https://github.com/WordPress/gutenberg/pull/61421 the panel now has two 'Close' buttons. Screenshot:

On latest trunk:

trunk

On WordPress 6.5:

wp 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.