WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 7 months ago

#37138 closed defect (bug) (fixed)

Audit usage of the buttons CSS classes

Reported by: afercia Owned by: afercia
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Administration Keywords: ui-feedback
Focuses: ui Cc:

Description

Looks like the buttons styling in WordPress is built in a way that the "base" CSS class .button should always be used. Then, controls (links or buttons) may have additional classes like .button-primary and .button-secondary.

By the way, there are places where the base class is missing and elements use only .button-primary or .button-secondary. This affects the focus style when elements are focused, and it actually depends also on the platform and browser used.

For example, the buttons in the Quick Edit form miss the base .button class and this is how they look in Chrome on OS X:

https://cldup.com/_JEXqUbi8K.png

This happens because the native outline style (which is different across platforms and browsers) is reset only by the base .button CSS class:

.wp-core-ui .button:active,
.wp-core-ui .button:focus {
	outline: none;
}

Worth noting links that look like buttons are not affected because common.css already resets the links outline. So this applies just to buttons, see in the screenshots below:

https://cldup.com/TlyrJxcJ0m.png

https://cldup.com/984FqlY24P.png

There are probably two options:

  • check all the buttons and make sure they have the .button class
  • just reset the outline also in the other button CSS rules

Related: #34904

Change History (10)

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


10 months ago

#2 @oric2016
10 months ago

I would prefer to add the selector *[class*='button-'] after .button selector. So it may look like this:

.button, *[class*='button-'] { ... button's base style ... }

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


10 months ago

#4 @afercia
9 months ago

Turns out I was partially wrong and worth clarifying that the .button-secondary class is there just for backward
compatibility reasons and should not be used. From wp-includes/css/buttons.css:

WordPress-style Buttons
=======================
Create a button by adding the `.button` class to an element. For backward
compatibility, we support several other classes (such as `.button-secondary`),
but these will *not* work with the stackable classes described below.

Related: #27314, #37448

#5 @karmatosed
8 months ago

@afercia so is the outline not going to appear?

#6 @afercia
8 months ago

@karmatosed yep, the outline property should be reset for all the buttons. I think that's the intended behaviour, it doesn't work well in some cases just because the classes are used incorrectly.

#7 @afercia
8 months ago

  • Milestone changed from Awaiting Review to 4.7
  • Owner set to afercia
  • Status changed from new to assigned

One more example is about a few places where button-large is used without the base class button. For example, in the edit attachment screen, the primary button in the publish box uses these classes:
button-primary button-large
and they should be
button button-primary button-large

Currently, this button has the standard size, with a height of 28px:

https://cldup.com/G71KxT5dJ0.png

but it should be a bit bigger, also for consistency with the similar button in the Post Publish meta box:

https://cldup.com/CWPHfK7Ecs.png

The base class button is necessary also to properly reset the outline property, see what happens in Chrome on OS X without the button class:

https://cldup.com/UhRM1rWYoS.png

and with:

https://cldup.com/8Nov6ZLkxs.png

#8 @afercia
8 months ago

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.

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


7 months ago

#10 @afercia
7 months ago

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

In 38672:

Administration: Improve the usage of the button CSS classes.

Introduces some consistency in the usage of the button CSS classes, fixes the
focus style for accessibility and responsiveness of the buttons.

  • Adds the button class to all primary buttons make them responsive
  • Removes all secondary-button classes and replaces it with button when needed. button-secondary shouldn't be used and exists just for backward compatibility reasons
  • Replaces classes inside submit_button() with a shorthand for some buttons, and use an empty string for the default button class. Passing button is unnecessary
  • Adjusts get_submit_button() to remove empty items

Props iseulde, dimchik, chris_d2d, mhowell, afercia.
Fixes #27314, #37138, #37448.

Note: See TracTickets for help on using tickets.