[wp-trac] [WordPress Trac] #31476: Semantic elements for non-link links: /wp-admin/includes/widgets.php

[WordPress Trac]

#31476: Semantic elements for non-link links: /wp-admin/includes/widgets.php
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |       Owner:  afercia
     Type:  defect (bug)             |      Status:  reopened
 Priority:  normal                   |   Milestone:  4.8
Component:  Widgets                  |     Version:  4.1
 Severity:  normal                   |  Resolution:
 Keywords:  semantic-buttons needs-  |     Focuses:  ui, accessibility,
  patch                              |  javascript
-------------------------------------+-------------------------------------

Comment (by afercia):

 I can reproduce this, but only when the browser's (Chrome or Firefox)
 console is open. Quick video:

 https://cloudup.com/coo28zBex7r

 The real reason is when I open the console, the viewport height gets less
 then 700 pixels and this media query in `customize-widgets.css` kicks in:
 `@media screen and (max-height: 700px) and (min-width: 981px)`

 At that point two things happen:
 - the widget title gets a smaller height (different top and bottom
 padding)
 - the toggle button has the same height, and now it's a bit taller than
 the title, see below

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

 So seems that during the animation, the button exceeding the title height
 breaks things. However, I'd consider to remove the title height change.
 Seems this always worked this way and seems intentional (I've also
 commented in the stylesheet) but it makes things more difficult for a
 small gain. Thoughts?

 If keeping the height change is preferable, the real fix would be changing
 this:

 {{{
 .widget-top .widget-action {
         padding-bottom: 8px;
 }
 }}}


 to 6px.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31476#comment:32>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform