Site Editor: the WP admin menu isn't really hidden on small screens

[afercia]

Description

In the Site Editor, the WordPress classic 'admin menu' #adminmenumain is hidden with display: none;.

However, on small screens it is not hidden. Only the inner #adminmenuwrap element is hidden and that's because of the WP 'auto-fold' feature.

Not sure whether there's a reason to not hide the admin menu also on small screens. Cc @jasmussen

This has an impact for accessibility, as:

• The WP skip links are perceivable and can be navigated to via the keyboard.
• The admin menu <nav> element is perceivable, announced by screen readers, and included in the ARIA landmarks available on the page.

Hiding #adminmenumain also on small screens would allow to:

• Hide the skip links: they don't make much sense in the Site Editor:
  • 'Skip to main content' isn't that useful in the Site Editor.
  • 'Skip to toolbar' is broken, as the WP toolbar is hidden.
• Remove an ARIA landmark that is a bit pointless.
• Simplify the labelling of the other Editor ARIA landmarks, specifically the <nav> element in Browse mode navigation sidebar.

Step-by-step reproduction instructions

• Go to the Site Editor.
• Inspect the source and observe that #adminmenumain is hidden with display: none;.
• Emulate a small screen under a viewport width of 782 pixels.
• Inspect the source and observe that #adminmenumain is not hidden with display: none;.

Screenshots, screen recording, code snippet

Skip links and main menu <nav> not really hidden on small screens:

Hidden on desktop:

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

[jasmussen]

I wasn't able to fully reproduce this, but only had a time to give a cursory glance. What I found was the #wpadminbar always having display: none across all width breakpoints, even if the code is pretty messy:

But in case there's a bug I'm not reproducing, I can confirm there's no need to show the classic adminbar in this view. You can always ping @WordPress/gutenberg-design if you want a broader take.

[afercia]

@jasmussen looks like you're looking at the wrong place? #wpadminbar is the wp admin top bar, the horizontal one at the top. The issue I'm reporting here is about the admin menu on the left: #adminmenumain.

[afercia]

Noting that also in the Post Editor, #adminmenumain is not entirely hidden on small screens. Using the keyboard I can tab to the skip links and they become partially visible, as they're partially hidden behind the admin top bar. Screenshot:

[jasmussen]

Apologies, long week. Indeed, that's display block even when not visible, that's not great. If I forcefully apply display: none; to it, however, opening/closing the menu from the adminbar doesn't work. This behavior:

For what it's worth, the adminbar that opens this menu is present only in the post editor, not the site editor, so the whole thing could use an iteration, I'll dive into a mockup for improvements across both next week (see also #49774).

But as far as an immediate fix to the issue, it seems like wp-responsive-open is applied when the menu is shown. So this pseudo code would theoretically work:

#adminmenumain {
	display: none;
}

.wp-responsive-open #adminmenumain {
	display: block;
}

That doesn't seem ideal to me, and I'm not actually sure the history that got us here. In case you have a better fix, I'd be happy to approve it.

[joedolson]

It might make the most sense to handle this in core by observing when the editor is active; this feels to me like a bug in the admin menu handling, and not something that should be getting handled in the block editor.