Make WordPress Core

Opened 3 years ago

Closed 19 months ago

#53174 closed defect (bug) (fixed)

notice in link-popup of WYSIWYG overlapping search field

Reported by: jonny-s's profile jonny-s Owned by: joedolson's profile joedolson
Milestone: 6.1 Priority: normal
Severity: minor Version: 5.7.1
Component: Editor Keywords: has-patch needs-testing commit dev-reviewed
Focuses: ui, accessibility, css, administration Cc:

Description

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

Attachments (14)

Wordpress WYSIWYG skaled text notice-overlap.png (42.6 KB) - added by jonny-s 3 years ago.
Notice is overlapping search field when text-size is scaled
53174.patch (1.7 KB) - added by sabernhardt 3 years ago.
with CSS flex
53174.2.diff (1.9 KB) - added by joedolson 3 years ago.
Update patch to fix keyboard focus position handling
53174.3.diff (2.8 KB) - added by joedolson 20 months ago.
Fix layout issues at high text zoom
53174.png (28.2 KB) - added by joedolson 20 months ago.
Screenshot after patch
53174.4.diff (2.5 KB) - added by joedolson 20 months ago.
Remove unrelated JS change.
after-53174-200-percent.png (30.3 KB) - added by joedolson 20 months ago.
After patch, 200% zoom
before-53174-200percent.png (26.2 KB) - added by joedolson 20 months ago.
Before patch, 200% zoom
after-53174-not-resized.png (18.2 KB) - added by joedolson 20 months ago.
after patch, no zoom
before-53174-not-resized.png (18.2 KB) - added by joedolson 20 months ago.
before patch, no zoom
53174.5.diff (2.5 KB) - added by joedolson 20 months ago.
Taller modal
forum-link-100-percent.png (40.9 KB) - added by sabernhardt 19 months ago.
support forum link popup at 100%
forum-link-125-percent.png (43.4 KB) - added by sabernhardt 19 months ago.
support forum link popup at 125%
53174.6.diff (527 bytes) - added by sabernhardt 19 months ago.
edit negative margin and height breakpoint for taller popup

Download all attachments as: .zip

Change History (55)

@jonny-s
3 years ago

Notice is overlapping search field when text-size is scaled

#1 @sabernhardt
3 years ago

  • Focuses accessibility css added
  • Keywords needs-patch added

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.

Last edited 3 years ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


3 years ago

#3 @joedolson
3 years ago

  • Milestone changed from Awaiting Review to 5.9

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


3 years ago

#5 @joedolson
3 years ago

  • Type changed from enhancement to defect (bug)

@sabernhardt
3 years ago

with CSS flex

#6 @sabernhardt
3 years ago

  • Keywords has-patch added; needs-patch removed

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.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


3 years ago

#8 @joedolson
3 years ago

  • Keywords needs-screenshots needs-testing added

#9 @joedolson
3 years ago

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
3 years ago

Update patch to fix keyboard focus position handling

#10 @sabernhardt
3 years ago

  • Milestone changed from 5.9 to 6.0

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

Last edited 3 years ago by sabernhardt (previous) (diff)

#11 @joedolson
3 years ago

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.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


2 years ago

#13 @sabernhardt
2 years ago

  • Milestone changed from 6.0 to 6.1

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


23 months ago

#15 @ryokuhi
23 months ago

  • Keywords needs-patch added; has-patch removed

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.

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


22 months ago

#17 @joedolson
22 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


20 months ago

@joedolson
20 months ago

Fix layout issues at high text zoom

#19 @joedolson
20 months ago

  • Keywords needs-patch removed

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

@joedolson
20 months ago

Screenshot after patch

#20 @joedolson
20 months ago

  • Keywords needs-screenshots removed

@joedolson
20 months ago

Remove unrelated JS change.

@joedolson
20 months ago

After patch, 200% zoom

@joedolson
20 months ago

Before patch, 200% zoom

@joedolson
20 months ago

after patch, no zoom

@joedolson
20 months ago

before patch, no zoom

#21 @joedolson
20 months ago

  • Keywords commit added; needs-testing removed

#22 @joedolson
20 months ago

  • Keywords commit removed

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

#23 @joedolson
20 months ago

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.

Last edited 20 months ago by joedolson (previous) (diff)

@joedolson
20 months ago

Taller modal

#24 @joedolson
20 months ago

  • Keywords commit added

#25 @joedolson
20 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#26 @sabernhardt
19 months ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

@sabernhardt
19 months ago

support forum link popup at 100%

@sabernhardt
19 months ago

support forum link popup at 125%

@sabernhardt
19 months ago

edit negative margin and height breakpoint for taller popup

#27 @sabernhardt
19 months ago

  • Keywords has-patch needs-testing added

Increasing the modal height required a few more changes.

This ticket was mentioned in Slack in #core by desrosj. View the logs.


19 months ago

This ticket was mentioned in Slack in #core by chaion07. View the logs.


19 months ago

#30 @joedolson
19 months ago

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

Last edited 19 months ago by joedolson (previous) (diff)

#31 @sabernhardt
19 months ago

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

#32 @joedolson
19 months ago

  • Keywords commit added

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

#33 @joedolson
19 months ago

  • Keywords dev-feedback added

This ticket was mentioned in Slack in #core-committers by joedolson. View the logs.


19 months ago

#35 @audrasjb
19 months ago

  • Keywords dev-reviewed added; dev-feedback removed

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

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


19 months ago

#37 @joedolson
19 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#38 @sabernhardt
19 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport consideration

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


19 months ago

#40 @audrasjb
19 months ago

Double committer sign-off: ✅

#41 @audrasjb
19 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.