WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#41497 closed defect (bug) (fixed)

Menu has style problem in listing on admin menu page

Reported by: punit5658 Owned by: afercia
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-patch has-screenshots
Focuses: ui, administration Cc:
PR Number:

Description

WordPress admin panel Appearance > Menu > Create Menu.
After add menu from side panel. High pick character like : "l" is displaying bottom part of each list. I have added screenshot which explain how it look like.

Attachments (5)

menu-issue.png (153.2 KB) - added by punit5658 2 years ago.
Menu text bug
41497.diff (423 bytes) - added by punit5658 2 years ago.
Patch for remove text bug
41497-1.diff (384 bytes) - added by punit5658 2 years ago.
Update patch using margin
41497-2.diff (371 bytes) - added by michalzuber 2 years ago.
Tried https://youtu.be/-gVcFRyTneY What about lowering height instead adding margin.
41497.2.diff (2.6 KB) - added by afercia 2 years ago.

Download all attachments as: .zip

Change History (19)

@punit5658
2 years ago

Menu text bug

@punit5658
2 years ago

Patch for remove text bug

#1 @punit5658
2 years ago

  • Component changed from General to Menus

#2 @punit5658
2 years ago

  • Keywords has-patch added

#3 follow-up: @afercia
2 years ago

  • Keywords needs-refresh added
  • Version trunk deleted

@punit5658 thanks! I can't reproduce this on Chrome and Firefox on macOS. What browser are you testing with? I see some text becoming visible just when zooming out the page. However, using line-height to fix this would also alter the shape of the circular focus making it oval:

https://cldup.com/MphuMy_vVv.png

would you mind tryiing with another method, for example using some margin-bottom?

@punit5658
2 years ago

Update patch using margin

#4 in reply to: ↑ 3 @punit5658
2 years ago

I have update code using margin.
For reproduce add character "lllllllll" like where small later of "L" like character top will display after save and before hover on icon.

  • High resolution retina display like macOS has very small tip of character but in low resolution monitor like Ubuntu 16.04 linux (1366 x 1024) display can clearly shows small tip of character in chrome browser.
  • It's vary in different resolution

Replying to afercia:

@punit5658 thanks! I can't reproduce this on Chrome and Firefox on macOS. What browser are you testing with? I see some text becoming visible just when zooming out the page. However, using line-height to fix this would also alter the shape of the circular focus making it oval:

https://cldup.com/MphuMy_vVv.png

would you mind tryiing with another method, for example using some margin-bottom?

@michalzuber
2 years ago

Tried https://youtu.be/-gVcFRyTneY What about lowering height instead adding margin.

#5 @punit5658
2 years ago

Hi @michalzuber lowering height will be create space at bottom of anchor tag container. I suggest to add https://core.trac.wordpress.org/attachment/ticket/41497/41497-1.diff patch for it. Please share your thought.
Thanks for look on ticket.

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


2 years ago

#7 follow-up: @afercia
2 years ago

  • Keywords has-screenshots added
  • Milestone changed from Awaiting Review to 4.9
  • Owner set to afercia
  • Status changed from new to assigned

I couldn't reproduce on Windows too but I understand this depends on the actual system font used. On Ubuntu, the font WordPress uses has probably different metrics. Slightly altering the font-size or line-height makes the visually hidden text appear also on other operating systems, for example:

https://cldup.com/jTQHOn4y7i.png

#8 follow-up: @welcher
2 years ago

#41521 seems related.

#9 in reply to: ↑ 8 @punit5658
2 years ago

#41521 seems responsive issue.
Replying to welcher:

#41521 seems related.

#10 in reply to: ↑ 7 ; follow-up: @punit5658
2 years ago

Yes, I can also see in macOS but due to very small font it's hardly visible. One more thing I noticed is that If we hover then it gone disappear.
Replying to afercia:

I couldn't reproduce on Windows too but I understand this depends on the actual system font used. On Ubuntu, the font WordPress uses has probably different metrics. Slightly altering the font-size or line-height makes the visually hidden text appear also on other operating systems, for example:

https://cldup.com/jTQHOn4y7i.png

#11 @afercia
2 years ago

When touching this part of the admin code, there's also the need to consider this screen has a no-js fallback where some elements get revealed:

https://cldup.com/UR01c2uF0D.png

#12 in reply to: ↑ 10 @afercia
2 years ago

Replying to punit5658:

If we hover then it gone disappear.

Yes, the visually hidden text gets updated on hover and focus. This implementation is some years old and could be improved. I'm going to simplify it a bit.

@afercia
2 years ago

#13 @afercia
2 years ago

  • Keywords needs-refresh removed

41497.2.diff uses screen-reader-text as it's the standard WordPress way to visually hide text. Also, it avoids to update via JS the link text, since the aria-label attribute already gets updated.

#14 @afercia
2 years ago

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

In 41227:

Menus: Visually hide the menu item edit link text in a consistent way.

Fixes a visual glitch visible on Ubuntu. WordPress uses system fonts and they have
different metrics across operating systems. Uses screen-reader-text as a more
solid way to visually hide text.

Props punit5658, afercia.
Fixes #41497.

Note: See TracTickets for help on using tickets.