Screen reader shortcut hidden in block editor on smaller screens

[sabernhardt]

In the viewport range between 600 and 782 pixels, skip links are mostly hidden due to overflow-y: auto in the block editor (​GB28959).

Changes the top value to a positive 7 pixels at the (max-width: 782px) breakpoint within the block editor. With a negative value, it was mostly hidden.

I edited common.css instead of the edit-post styles because I did not want to redefine the negative value at (min-width: 782px).

Before patch, with admin menu showing

With patch, with admin menu showing

Before patch, in Fullscreen mode

With patch, in Fullscreen mode

Trac 63084

[narenin]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested:

​https://github.com/WordPress/wordpress-develop/pull/8493

Environment

OS: macOS 14.6.1
Web Server: PHP.wasm
PHP: 7.4.31-dev
WordPress: 6.8-beta-2
Browser: Chrome Version 133.0.6943.142
Theme: Minimal Child Theme Version 1.0.2

Actual Results

✅ Issue resolved with patch.

[narenin]

Before patch (with admin menu showing)

[narenin]

After patch (with admin menu showing)

[narenin]

Before patch (Fullscreen Mode)

[narenin]

After patch (Fullscreen Mode)

[joedolson]

It's relatively late in 6.8 to be milestoning this, but I think that the intersection of risk to benefit here justifies it.

The patch tests well on my side. This new ticket is good to ship during 6.8 beta cycle.

[audrasjb]

Yes I agree this bugfix looks ready to ship during beta cycle.

The dashboard have similar issue for smaller screen. Do we needs to open separate ticket for that?

The Dashboard intentionally has the shortcut link above the admin toolbar (that's why it has a negative margin of 7 pixels minus the toolbar height).

The bug is when the block editor clips the shortcut link(s). If another screen clips it, we could _consider_ changing the negative margins to 7px at any screen width instead.

[wildworks]

Related Gutenberg issue: ​https://github.com/WordPress/gutenberg/issues/55931

[joedolson]

I think this is good to go; the issue on the dashboard is quite different, as there's no clipping.

[joedolson]

In 59992:

Editor: A11y: Skip link hidden in editor on medium-small screens.

Adjust the position of the skip link in viewports between 600 and 782 pixels, where they were hidden due to overflow-y: auto in the block editor. Ensures that the skip link is visibly available for users on all viewport sizes.

Props sabernhardt, narenin, audrasjb, mukesh27, joedolson, wildworks.
Fixes #63084.

Committed in r59992