[wp-trac] [WordPress Trac] #47136: Reading and focus order do not match visual order

[WordPress Trac]

#47136: Reading and focus order do not match visual order
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  audrasjb
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  normal                               |   Milestone:  Future
                                                 |  Release
Component:  Media                                |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots needs-patch          |     Focuses:  ui,
  wpcampus-report needs-design                   |  accessibility
-------------------------------------------------+-------------------------

Comment (by sabernhardt):

 It's almost certainly too late to make a change like this for 5.3.0 and I
 (too) would like a better edit screen in 5.4 or later, but the following
 patch might be a good start to fixing the order in 5.3.1.

 In `image-edit.php`, I simply moved the `imgedit-panel-content` container
 above the `imgedit-settings` <div> and then added `wp-clearfix` to the
 `imgedit-settings` <div> (even though I didn't notice a specific need for
 the class).

 The stylesheet introduces a bottom padding on `imgedit-panel-content` for
 when it stacks and also sets both `min-width` and `max-width` when on
 larger screens. (400 pixels is currently the maximum width and height of
 any cropped image here.)

 {{{
 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
         float: left;
         padding: 3px 16px 20px 0;
 }

 @media only screen and (min-width: 783px) {
         .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
                 min-width: 400px;
                 max-width: calc( 100% - 266px );
         }
 }
 }}}

 Note about `box-sizing`:
 I chose to subtract the right padding value from the `max-width` rather
 than setting the `box-sizing` property. If `box-sizing: border-box` is
 preferable, then the padding value needs to be added to the `min-width`
 instead.

 {{{
 @media only screen and (min-width: 783px) {
         .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
                 box-sizing: border-box;
                 min-width: 416px;
                 max-width: calc( 100% - 250px );
         }
 }
 }}}

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