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

[WordPress Trac]

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

 * keywords:  has-screenshots needs-patch wpcampus-report needs-design =>
     has-screenshots wpcampus-report has-patch needs-testing


Comment:

 [attachment:"47136.1.diff"] could fix the focus order within the current
 design.

 1. PHP: Move `.imgedit-panel-content` container before `.imgedit-
 settings`. The code for each section should remain exactly the same as it
 has been.
 2. CSS: Add 16 pixels of padding to the bottom of each container for
 screens up to 782 pixels wide. It's only necessary on `.imgedit-panel-
 content`, but I like it on both.
 3. JS: Adjust the focused element after the Edit Image button is
 activated/clicked. Focus moves to the first `.imgedit-menu` button (Crop)
 instead of to the first help button (Scale Image).

 I like the idea of also dividing the settings groups into two columns when
 on narrower screens (from either 400 or 480 pixels up to 782), so the
 Image Crop box would be closer to the image to edit. If that might be
 desired, I could upload a patch to show that layout concept. However, I
 still would want this part committed before any additional adjustments.

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