Menu has style problem in listing on admin menu page

[punit5658]

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.

[punit5658]

Menu text bug

[punit5658]

Patch for remove text bug

[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:

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

[punit5658]

Update patch using margin

[punit5658]

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:

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

[michalzuber]

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

[punit5658]

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.

[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:

[welcher]

#41521 seems related.

[punit5658]

#41521 seems responsive issue.
Replying to welcher:

#41521 seems related.

[punit5658]

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:

[afercia]

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:

[afercia]

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]

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.

[afercia]

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.