WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 5 weeks ago

#39074 new defect (bug)

No method to move meta boxes using keyboard

Reported by: joedolson Owned by:
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Editor Keywords: wpcampus-report needs-design needs-patch
Focuses: ui, accessibility, administration Cc:
PR Number:

Description (last modified by antpb)

Using a mouse, meta boxes can be moved to a new order in the DOM or to a different column. There's no method to do this using the keyboard.

Especially with several plugins installed, being able to customize which meta boxes are closest in tab sequence can be quite helpful for editing efficiency.

I assume this has been in since whatever version added sortable metaboxes.

EDIT BY ANTPB:
This issue was brought to light again through the WPCampus-report when it was discovered that the weight of the edit image attributes was not able to be ordered. This is true for all forms of meta boxes so I’m adding in the details from the specific Edit Image context to highlight the accessibility importance of this issue:

Moved from the WPCampus accessibility report issues on GitHub, see https://github.com/WordPress/gutenberg/issues/15316

Severity:
Low
Affected Populations:
Blind
Motor Impaired
Platform(s):
All / Universal
Components affected:
Edit Media
Issue description
The Edit Media interface* includes the ability to re-arrange the boxes by
drag and drop, however this can only be achieved by mouse users, since
the functionality does not support touch or keyboard users.

Users of touchscreens and keyboards cannot re-order the boxes. Speech
recognition users may be able to if they can manipulate the mouse with
speech (such as using Mouse Move), however this is onerous and
difficult.

Remediation Guidance
Allow keyboard and touchscreen users the ability to re-arrange the
boxes. This can either be done with dedicated buttons, such as are used
within Gutenberg for moving Blocks; or it could be done by extending
drag and drop support to keyboard and touch users (a good example of
which is dragondrop: https://schne324.github.io/dragon-drop/demo/).

Relevant standards

2.1.1 Keyboard (Level A) https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable
Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-80 in Tenon's report

*Original issue description and screenshot are available at page 142 of the complete technical report PDF. However, the screenshot appears to be related to the edit post screen in the classic editor.
https://github.com/WordPress/gutenberg/issues/15316#issuecomment-489460963

Attachments (1)

4A1B714B-6886-470C-BD7C-313BA317BDE7.png (76.9 KB) - added by antpb 2 months ago.
An example where this has accessibility difficulties

Download all attachments as: .zip

Change History (21)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 years ago

#2 @afercia
3 years ago

  • Milestone changed from Awaiting Review to Future Release

Makes sense and probably needs some research.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


21 months ago

#4 @afercia
5 months ago

Related: #47135.

This ticket was mentioned in Slack in #core-media by mike. View the logs.


2 months ago

#6 @anevins
2 months ago

  • Keywords wpcampus-report added; needs-patch removed

Added keyword

#7 @antpb
2 months ago

#47135 was marked as a duplicate.

#8 @antpb
2 months ago

  • Description modified (diff)

#9 @antpb
2 months ago

  • Milestone changed from Future Release to 5.3

@antpb
2 months ago

An example where this has accessibility difficulties

#10 @afercia
2 months ago

Full detailed report available at #47135.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 months ago

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


2 months ago

#13 @audrasjb
2 months ago

  • Keywords needs-design added

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 months ago

#15 @anevins
2 months ago

Hey @antpb we were just wondering whether you envisaged a particular solution when this was moved to 5.3.

If you haven't envisaged a solution, I mentioned that we could look at taking what Drupal does with 'row heights'. It's a very primitive win to the problem, but it could be used as a step forward to a more beautiful solution. The 'row heights' functionality provides a numeric input field and changing the number (and submitting) changes the order of the field.

Ideally we need to have an envisaged solution before going to design, otherwise we could see a lot of back and forth that we might not have time for in this 5.3 release.

#16 @afercia
2 months ago

  • Component changed from Administration to Editor
  • Focuses ui administration added

Discussed during today's accessibility bug-scrub: agreed that the "Administration" component doesn't help this ticket to get much attention. Changing component to "Editor" though it is related to "Media" as well.

#17 @davidbaumwald
2 months ago

This ticket needs direction, and with 5.3 Beta 1 in three days, this is being moved to Future Release. If this can be resolved in time, feel free to revert the milestone back to 5.3.

#18 @davidbaumwald
2 months ago

  • Milestone changed from 5.3 to Future Release

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 weeks ago

#20 @afercia
5 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Future Release to 5.4
Note: See TracTickets for help on using tickets.