Open afercia opened 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:
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.
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 3role="tab"
panels. They're now hidden withdisplay: none
which makes them not perceivable by assistive technology. However, the panel with blocks still use arole="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
block-editor-inserter__tabpanel
still has arole="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