[wp-trac] [WordPress Trac] #39074: No method to move meta boxes using keyboard

[WordPress Trac]

#39074: No method to move meta boxes using keyboard
-------------------------------------+-------------------------------------
 Reporter:  joedolson                |       Owner:  xkon
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  5.4
Component:  Editor                   |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  wpcampus-report has-     |     Focuses:  ui, accessibility,
  patch needs-design-feedback        |  administration
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  wpcampus-report has-patch 2nd-opinion needs-design-feedback =>
     wpcampus-report has-patch needs-design-feedback


Comment:

 Looking a bit into patches 2 and 3:

 > I don't know if this is entirely correct as this catches all click and
 keyup (bound to Tab only) events on body so we can focus/unfocus the
 postboxes as well depending on where the mouse or current tabbing is.

 Yep, I'd tend to think it's a bit too much :) The blue outline is also
 displayed when normally tabbing within a meta box, which doesn't feel
 correct. Not sure the moved box needs an additional visual indication to
 start with, because focus is already on one of its move buttons. Anyways,
 we can maybe explore a lighter, simpler, visual indication. Maybe an
 animation à la Gutenberg?


 > you can re-order only within the same "group"

 Maybe it wouldn't be so hard to implement. By using something like:

 `$( '.meta-box-sortables .postbox' ).index( closestPostbox )`

 it is possible to get the index of the "to be moved" meta box within the
 collection of all meta boxes in a page. At that point, it is possible to
 select the previous or next meta box by its index. This would allow move a
 meta box through all the meta boxes in a page, in a sort of "loop". Then,
 some logic should be implemented when the moved meta box enters in a new
 group so that it is moved to the correct position. I played a bit with
 this and I think it can be done :)

 From an accessibility perspective there are a few things to address. They
 can be done later, when the functionality is stable. For example:
 - the visual order of the buttons doesn't match the DOM order: this is
 partially a pre-existing issue but it's more evident now with the new
 buttons
 - the buttons text should be greatly simplified, especially for speech
 recognition software users
 - it would be nice to use a `speak()` message when the order is saved
 successfully: I'd modify the AJAX action to use `wp_send_json_success()`
 with a short message and then use that for `speak()`
 - when a meta box is at the first position, the "Move up" button should be
 disabled
 - similarly when it's at the last position, the "Move down" button should
 be disabled

 Note: disabled or removed? In any case, there should be some textual
 information to communicate to users why the box can't be further moved.

 - since we're working on these buttons, it would be a good opportunity to
 avoid to use the word "Toggle", see
 https://core.trac.wordpress.org/ticket/34753

 As said, these things can be done later.

 From a code perspective, I'd suggest to bind to the new buttons new
 specific click events and separate, new, callbacks instead of reusing the
 event that is only meant to collapse/expand the boxes. Basically: not put
 everything inside `handle_click()`.

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