Make WordPress Core

Opened 9 months ago

Last modified 2 months ago

#53174 new defect (bug)

notice in link-popup of WYSIWYG overlapping search field

Reported by: jonny-s Owned by:
Milestone: 6.0 Priority: normal
Severity: minor Version: 5.7.1
Component: Editor Keywords: has-patch needs-screenshots needs-testing
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 (3)

Wordpress WYSIWYG skaled text notice-overlap.png (42.6 KB) - added by jonny-s 9 months ago.
Notice is overlapping search field when text-size is scaled
53174.patch (1.7 KB) - added by sabernhardt 3 months ago.
with CSS flex
53174.2.diff (1.9 KB) - added by joedolson 3 months ago.
Update patch to fix keyboard focus position handling

Download all attachments as: .zip

Change History (14)

@jonny-s
9 months ago

Notice is overlapping search field when text-size is scaled

#1 @sabernhardt
7 months 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 7 months ago by sabernhardt (previous) (diff)

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


6 months ago

#3 @joedolson
6 months ago

  • Milestone changed from Awaiting Review to 5.9

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


3 months ago

#5 @joedolson
3 months ago

  • Type changed from enhancement to defect (bug)

@sabernhardt
3 months ago

with CSS flex

#6 @sabernhardt
3 months 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 months ago

#8 @joedolson
3 months ago

  • Keywords needs-screenshots needs-testing added

#9 @joedolson
3 months 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 months ago

Update patch to fix keyboard focus position handling

#10 @sabernhardt
2 months 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 2 months ago by sabernhardt (previous) (diff)

#11 @joedolson
2 months 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.

Note: See TracTickets for help on using tickets.