[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 has-screenshots              |  administration
-------------------------------------+-------------------------------------

Comment (by afercia):

 Thanks @xkon for the updated patch! Looking at
 [attachment:"39074.8_preview.gif"], the ability to move the meta boxes
 through the various "groups" is really interesting.

 A few things I noticed:

 1
 The buttons appear only on hover / focus.
 Specifically:
 - on mousenter: buttons appear
 - on mouseleave: buttons disappear
 - on focus: buttons appear and stay visible when tabbing away
 Regardless, things that appear and disappear on the screen are generally
 not so ideal for accessibility. I do realize the intent to keep the UI
 "clean" but I think we should find a different mechanism and maybe discuss
 this in the next meeting and have some design feedback.

 2
 On the Dashboard, on a medium-sized screen where there are just two
 columns, the visual feedback is a bit confusing, e.g.:
 - when moving down, the box is actually moved to `postbox-container-3` and
 then to `postbox-container-4`
 - as these groups are laid out in the second column, nothing seems to
 happen ''visually''
 - same when moving up: when the box is at the last position, the first and
 second click seem to do nothing (even if the buttons get actually moved)
 Can't think of a way to solve this off the top of my head, we should find
 some way to make the visual feedback reliable.

 3
 All the buttons should be moved after the heading. The visual order needs
 to match the DOM order, see comment:31

 4
 The `screen-reader-text` of the buttons should be simplified. While screen
 reader users would benefit from the current, detailed, text e.g.:
 `Order Activity panel higher`
 `Order Activity panel lower`
 Other users would need a simpler text. Speech recognition software users,
 for example, will see just Up and Down arrows. The control name isn't
 exposed visually, which is a problem, but I guess the most logic command
 to voice would be just "Move Up" and "Move Down". Having multiple controls
 named "Move Up" and "Move Down" would also be slightly annoying because
 the speech recognition software would show numbers overlaid on the buttons
 to allow users to choose one of them. That's what we have though :) Maybe
 something to discuss in the next meeting.

 5
 The `speak()` messages use the term "postbox". Users aren't supposed to
 know what a postbox is.
 Both in the dashboard and in the Classic Editor pages, the inline Help
 refers to "box/boxes" e.g. `you can reposition all the other boxes ...`.
 I'd just use the term "box".

 6
 I'd try to reduce the amount of `else if` used in the patch. A simple `if`
 and returning when necessary could make the code simpler and more
 readable.

 7
 The `keyup` event on the `body` is a bit too invasive maybe.

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