WordPress.org

Make WordPress Core

#37448 closed defect (bug) (fixed)

Primary and secondary buttons need to reset the outline property

Reported by: afercia Owned by: afercia
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-patch good-first-bug
Focuses: ui Cc:

Description

Seems that only the main CSS class .button resets the outline property while .button-primary and .button-secondary don't. And there are cases where button elements use just .button-primary and .button-secondary without the main CSS class. This is particularly evident on webkit-based browsers on OS X, see screenshot below (the thick blue "border" is the native webkit outline):

https://cldup.com/rrcsfsa5kP.png

Maybe the intended usage is to always set the main class together with the other ones, e.g. class="button button-secondary" and this would fix it, on the other hand an easier solution would be resetting outline also for .button-primary and .button-secondary.

Attachments (1)

37448.patch (15.6 KB) - added by mhowell 13 months ago.
As suggested, this patch adds the 'button' class to all elements with the class 'button-primary' or 'button-secondary'. This includes files both in wp-admin and wp-includes. The patch does NOT affect any calls to PHP functions where individual class names are used as parameters.

Download all attachments as: .zip

Change History (9)

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


13 months ago

#2 @Presskopp
13 months ago

I would go adding the class button.
Would this only be necessary for primary/secondary, or also for link/group etc.?

@mhowell
13 months ago

As suggested, this patch adds the 'button' class to all elements with the class 'button-primary' or 'button-secondary'. This includes files both in wp-admin and wp-includes. The patch does NOT affect any calls to PHP functions where individual class names are used as parameters.

#4 @afercia
12 months ago

Turns out I was partially wrong, because the .button-secondary 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: #37138

#5 @afercia
11 months ago

  • Milestone changed from Future Release to 4.7
  • Owner set to afercia
  • Status changed from new to assigned

#6 @afercia
11 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.


11 months ago

#8 @afercia
11 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.