[wp-trac] [WordPress Trac] #63239: Button focus visibility issue in media upload page

[WordPress Trac]

#63239: Button focus visibility issue in media upload page
-------------------------------------+-------------------------------------
 Reporter:  dilipbheda               |       Owner:  joedolson
     Type:  defect (bug)             |      Status:  accepted
 Priority:  normal                   |   Milestone:  6.9
Component:  Media                    |     Version:  6.6
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-           |     Focuses:  ui, accessibility,
  screenshots has-test-info dev-     |  css, administration
  feedback                           |
-------------------------------------+-------------------------------------

Comment (by sabernhardt):

 PRs [https://github.com/WordPress/wordpress-develop/pull/8656 8656] and
 [https://github.com/WordPress/wordpress-develop/pull/9027 9027] both show
 the overflow for the `.filename` container and remove padding from the
 Edit link.
 - As mentioned in comment:5, the overflow is hidden so the media details
 do not wrap below the floating image (when the filename is very long
 and/or the thumbnail is shorter than it is wide).
 - With its current padding, the "Edit" link is 21.8 by 46.2 pixels in
 English. I would not recommend reducing the target size to less than 24
 pixels in both dimensions (21.8 by 18.2 if padding is `0`).
 - If the Edit link height is reduced at all, `.attachment-tools` might
 need a top margin like what @umesh.nevase proposed in PR 9027.

 In [https://github.com/WordPress/wordpress-develop/pull/8785 PR 8785],
 @ankitkumarshah proposed adding 2 pixels of margin on the left of the Edit
 link. Then the "Edit" text would not line up with the details above it,
 but the focus outline would show properly.

 [attachment:"63239.patch"] adds 2 pixels of padding on the left of the
 `.media-item .filename` element. If this general direction is best, I
 suggest matching that padding value on the right side. The additional
 padding also creates a **trivial** discrepancy of 14 pixels on the left of
 the `.pinkynail` image and 16 pixels on the right, but the image margin
 could be reduced to compensate. Using a value of 2 pixels, that would
 become:
 {{{
 .media-item .pinkynail {
         margin: 14px 12px 14px 14px;
 }
 .media-item .filename {
         padding: 14px 2px;
 }
 }}}

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