[wp-trac] [WordPress Trac] #37138: Audit usage of the buttons CSS classes

[WordPress Trac]

#37138: Audit usage of the buttons CSS classes
----------------------------+-----------------------------
 Reporter:  afercia         |      Owner:
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:
 Severity:  normal          |   Keywords:  ui-feedback
  Focuses:  ui              |
----------------------------+-----------------------------
 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:

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

 [[Image(https://cldup.com/TlyrJxcJ0m.png)]]

 [[Image(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

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37138>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform