notice in link-popup of WYSIWYG overlapping search field

[jonny-s]

Hi,

I just noticed, that if text-size is scaled by browser-settings, in the WYSIWYG-Editor's link modal popup the notice is overlapping the search field (see screenshot).

[jonny-s]

Notice is overlapping search field when text-size is scaled

[sabernhardt]

Thanks for the report!

I see a similar overlap with a minimum font size.

The #wp-link .query-results container uses absolute positioning from the top (either 166px or 210px) in editor.css.

I tried changing the value to an em measurement, but that does not seem to work well.

[sabernhardt]

with CSS flex

[sabernhardt]

CSS flex could help with larger text. I returned the layout to static positioning and removed some overflow: hidden rules. I'm not sure this is better overall, but it's at least a start.

[joedolson]

Unfortunately, this has created some big problems with focus and keyboard access - the active item scrolls out of view on click, keyboard navigation no longer keeps things in view. This will probably need some more work.

If the #search-results div has absolute positioning, the keyboard/focus works as expected, and with the other style changes, doesn't trigger the overlap with the search input.

Updating patch to apply absolute positioning on results and give the results div width.

[joedolson]

Update patch to fix keyboard focus position handling

[sabernhardt]

Thanks for updating the patch!

It might be ready, but I'm not confident about committing it today. I'll move this to the next release (if someone else thinks it's ready now, the ticket can go back to 5.9).

[joedolson]

This works fairly well at low levels of text zoom, but there are a lot of CSS issues at higher levels of text zoom (over 170%). Browser zoom works fine.

Practically speaking, I think this is a significant improvement on the current state, and it does resolve the specific problem documented. However, with a little more time, it could definitely be improved.

[ryokuhi]

We reviewed this ticket today during the Accessibility Team's weekly bug scrub.
As mentioned by @joedolson in one of the above comments, there are a few issues with high levels of text zoom.
WCAG 2.1 Success Criterion 1.4.4 require the text to be resizable up to 200% without loss of functionality, so if someone is able to test with this level of zoom, it would really help in finding all issues.

[joedolson]

Fix layout issues at high text zoom

[joedolson]

This patch significantly improves the layout when text zoom is at 200%.

[joedolson]

Screenshot after patch

[joedolson]

Remove unrelated JS change.

[joedolson]

After patch, 200% zoom

[joedolson]

Before patch, 200% zoom

[joedolson]

after patch, no zoom

[joedolson]

before patch, no zoom

[joedolson]

This still has broken keyboard functionality; need to fix that before can be committed.

[joedolson]

On further testing, what I'm observing isn't new; it's just a little hard to follow at high zoom because the shifts impacting what's currently visible happen a lot more frequently. To help with this, I'm going to increase the modal height a bit more.

[joedolson]

Taller modal

[joedolson]

In 54216:

Editor: Fix text zoom on link popup editor.

Update CSS in the classic visual editor link popup to remove sizing in pixels that caused significant text overlaps when the base font size is scaled or set to a larger custom value in the browser or operating system.

Props jonny-s, sabernhardt, joedolson.
Fixes #53174.

[sabernhardt]

support forum link popup at 100%

[sabernhardt]

support forum link popup at 125%

[sabernhardt]

edit negative margin and height breakpoint for taller popup

[sabernhardt]

Increasing the modal height required a few more changes.

[joedolson]

@sabernhardt Can you give a text description of the problem and solution? I'm not clear what this is solving from the screenshots.

[sabernhardt]

@joedolson The "Cancel" and "Add link" buttons can be hidden behind the bottom of the browser window because the Link Options modal is 100 pixels taller now.

1. If the zoom level is at 100%, resize the browser window to a height between 521 and 600 pixels and any width.
2. Activate Classic Editor.
3. Create a new post in the post editor.
4. Insert a link, and open the Link Options.
5. Look for the "Add link" button at the bottom.

[joedolson]

Tested; looks good. Marking for commit. Good catch! I didn't check the max height issues carefully enough.

[audrasjb]

Thanks @sabernhardt for the detailed testing procedure :)
Patch tested, works for me 👍

[joedolson]

In 54660:

Editor: Fix modal height responsiveness on link popup editor.

Fix the responsive breakpoint styles for short vertical viewports on the link popup modal. Follow up to [54216].

Props sabernhardt.
Fixes #53174.

[sabernhardt]

Reopening for backport consideration

[audrasjb]

Double committer sign-off: ✅

[audrasjb]

In 54684:

Editor: Fix modal height responsiveness on link popup editor.

Fix the responsive breakpoint styles for short vertical viewports on the link popup modal. Follow-up to [54216].

Props sabernhardt, joedolson.
Fixes #53174.
Merges [54660] to the 6.1 branch.