Make WordPress Core

Opened 6 weeks ago

Last modified 32 hours ago

#47131 new defect (bug)

Cursor suggests functionality even when functionality is not present

Reported by: anevins Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots needs-patch wpcampus-report
Focuses: ui, accessibility, javascript Cc:


Users who mouse over the "Save" heading on the Edit Media page see a
"move" cursor, which suggests to users that the "Save" section can
be dragged and dropped to somewhere else. However, this is only the case
if additional boxes are shown, re-ordering is not possible if "Save"
is the only visible box (although the element can be dragged, there is
nowhere else to drop it).

The use of consistent and relevant cursors may be important for users
who have a cognitive disability, since cursors give a visual clue as to
an element's functionality. Using the move cursor for elements which
cannot be moved may be confusing or counter-intuitive for users.

  • Severity:
    • Medium
  • Affected Populations:
    • Low-Vision
    • Cognitively Impaired
  • Platform(s):
    • All / Universal
  • Components affected:
    • Edit Media

Issue code

    .js .postbox .hndle, .js .widget .widget-top {

        cursor: move;


Remediation Guidance
Only allow the move cursor to appear to users when re-ordering is
functionally possible.

Ideally, the drag and drop functionality should not be available at all
when only one box is present (i.e. it should not even be possible to
drag that one box), however this may be unrealistic to fix, and
therefore the solution of removing the cursor style will go a long way
towards matching user expectations.

Relevant standards

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-78 in Tenon's report

Attachments (2)

57181541-74c8a600-6e95-11e9-9129-95cc46fe0721.jpg (75.5 KB) - added by anevins 6 weeks ago.
panel cursor move.png (20.6 KB) - added by afercia 2 weeks ago.

Download all attachments as: .zip

Change History (10)

#1 @anevins
6 weeks ago

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

Last edited 6 weeks ago by anevins (previous) (diff)

#2 @afercia
6 weeks ago

  • Component changed from General to Media

#3 @afercia
5 weeks ago

  • Milestone changed from Awaiting Review to 5.3

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

2 weeks ago

#5 @anevins
2 weeks ago

Suggestions from the Core Media meeting: https://wordpress.slack.com/archives/C02SX62S6/p1559224344044600

  • Worth investigating whether this is the case with other metaboxes and if so to apply a wider solution.
  • It has been suggested that this may be an issue in the classic editor and not just Media. The icon/dragging shouldn’t be enabled if there’s only one metabox present.
  • In common.js I see the jQuery-UI sortables are enabled for any $sortables = $('.meta-box-sortables'), It could be as simple as checking the length of the jQuery collection and return if 1
Last edited 2 weeks ago by anevins (previous) (diff)

#6 @afercia
2 weeks ago

Testing quickly the Edit Media page, it appears things are a bit more complicated.

This page, like other pages, can be set to a 1 or 3 columns layout in the Screen Options.

  • 2 columns: I can actually move the Save meta box to the bottom of the page (though I wonder how this can be useful)
  • 1 column: there's no place where to move the Save meta box, though it's still draggable

So it appears that a logic to enable / disable the jQuery UI sortables should take into account not only the amount of meta boxes in a page but also the layout option.

#7 @afercia
2 weeks ago

Worth noting the same problem happens in Gutenberg with panels added by plugins. These panels reuse the markup from the legacy meta boxes. In the core files postbox.js and common.js there's some code that targets these panels and tries to attach behaviors for the jQuery UI sortable. Also, common.css sets the cursor style to cursor: move;.

I think there's a related issue on the Gutenberg GitHub repo. See attached screenshot.

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

32 hours ago

Note: See TracTickets for help on using tickets.