WordPress.org

Make WordPress Core

#37969 closed defect (bug) (fixed)

Menus: simplify the "Remove" and "Cancel" link styling

Reported by: afercia Owned by: afercia
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-screenshots has-patch
Focuses: ui, accessibility Cc:

Description

Splitting this out from the discussion on #37016.

On the menus screen nav-menus.php the menu items have two links: "Remove" and "Cancel" that use some non-standard styling, a bit outside core conventions for links:

Current normal state:

https://cldup.com/kfHKPefHPV.png

Current hover state:

https://cldup.com/1iHBeFbBlq.png

Current focus state:

https://cldup.com/TiqdObQuw5.png

I remember some discussion about this but I'm not sure if there's a related ticket (couldn't find one).
Looks like this styling is there since a few years and I'm pretty sure at that time it made sense. By the way, looking at this today I'm wondering if it may be better to just use the standard styling for links. This would improve consistency across the admin, make the accessibility work about colour contrast easier (see #35622) and allow to remove a few lines of CSS, which is always a good thing :)

With the standard style for links:

https://cldup.com/rgo9OOL5yh.png

also on :hover and :focus they would use the standard links style.

Attachments (2)

37969.diff (8.2 KB) - added by afercia 14 months ago.
37969.2.diff (8.6 KB) - added by afercia 13 months ago.

Download all attachments as: .zip

Change History (12)

#1 @afercia
14 months ago

Looking a bit into this, the red link uses the submitdelete CSS class that is used also in the menu footer:

https://cldup.com/JC5FXdBXyQ.png

and, more importantly, in the Publish meta box footer (posts, attachments, comments, old link manager):

https://cldup.com/l4v6C9h2Tm.png

Rather than overriding the styles for the menus red link, I'd propose to simplify the CSS and remove a few pixels padding on the Publish box red link. Also, noticed some small inconsistencies in the various publish boxes, mainly caused by the wrong button size (it should be button-large for all the publish boxes) that, though a bit outside the scope of this ticket, need to be fixed.

Worth noting the old Link Manager (can be enabled on old installs and with the dedicated plugin) publish box styling is currently broken, see the extra padding inside the box:

https://cldup.com/vDOo8oYygw.png

@afercia
14 months ago

#2 @afercia
14 months ago

  • Keywords has-patch added; needs-patch removed
  • Owner set to afercia
  • Status changed from new to assigned

37969.diff tries to simplify the CSS and make the Menus screen submitdelete and submitcancel links use the standard links styling. Also makes the submitdelete link in the various Publish meta boxes consistent, fixing the size of the button close to the link.

With the patch applied:

https://cldup.com/tbsBJpLTQB.png

Things to check:

  • the Customizer should be OK since, as far as I see, the styles changed in this patch have more specific rules for the Customizer
  • test and check all the Publish meta boxes: posts, attachments, comments, old link manager (any other?)

The only inconsistency I can see now is the submitdelete link in the Menus footer is underlined:

https://cldup.com/JC5FXdBXyQ.png

while the same link in the Publish box is not underlined:

https://cldup.com/WbwM4mFSfq.png

IMHO they should look the same: either remove the underline in the menus or make them all underlined. I'd greatly appreciate some Ui feedback here :)

This ticket was mentioned in Slack in #design by afercia. View the logs.


14 months ago

#4 @karmatosed
14 months ago

I'd +1 for all being underlined. I absolutely would say they should be standardised so all are the same.

This ticket was mentioned in Slack in #design by afercia. View the logs.


14 months ago

#6 @hugobaeta
14 months ago

+1 as well for underline!

#7 follow-up: @afercia
14 months ago

To recap: changing the submitdelete CSS class will require to adjust the red links in the Publlish box that use this class. The change would remove a 2px padding and add the underline to the links, see screenshot below. Thinking that the change to the publish boxes should go in a separate ticket, to better track the change and for history.

https://cldup.com/PE7M8P40Lv.png

#8 in reply to: ↑ 7 @afercia
14 months ago

Replying to afercia:

the change to the publish boxes should go in a separate ticket, to better track the change and for history.

And there's already #37018 for that.

@afercia
13 months ago

#9 @afercia
13 months ago

  • Keywords ui-feedback removed

Refreshed patch. Fixes also #37018.

#10 @afercia
13 months ago

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

In 38616:

Accessibility: Standardize the remove/delete/cancel links in the Menus screen and Publish meta boxes.

The submitdelete CSS class is used in various places across the admin for some
"red" action links. It is worth simplifying this rule for further improvements
related to color contrast.

  • simplifies a non-standard styling for the "Remove/Cancel" links in the Menus screen
  • underlines all the "Move to trash/Delete" red links in all the Publish meta boxes
  • fixes CSS classes usage for all the Publish meta boxes primary buttons
  • fixes broken layout for the old Link Manager publish meta box

Props karmatosed, hugobaeta, monikarao, afercia.
Fixes #37969, #37018. See #37448, #37138, #27314.

Note: See TracTickets for help on using tickets.