Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#55364 closed defect (bug) (fixed)

Proximity of controls: Quick Edit and Bulk Edit forms improvements

Reported by: afercia's profile afercia Owned by: joedolson's profile joedolson
Milestone: 6.0 Priority: normal
Severity: normal Version:
Component: Quick/Bulk Edit Keywords: a11y-proximity has-patch has-screenshots commit
Focuses: accessibility Cc:

Description

See tracking ticket #40822.
See also #45972.

In the Quick Edit and Bulk Edit forms, the Submit and Cancel buttons are placed at the opposite sides of the form.

As mentioned in the tracking ticket #40822, proximity of related information is an universal design principle which benefits everyone and it's particularly important for users with a reduced visual field, low vision, or other vision or cognitive impairments.

User interface controls that are logically grouped should be placed close each other. For more details and related WCAG recommendations, please see the tracking ticket #40822.

The primary action button should be on the left. See the detailed design feedback in https://core.trac.wordpress.org/ticket/40822#comment:9

In #45972 / [44757] the Comment form was changed to align the button on the left. See screenshots:

Comment form before:

http://cldup.com/9vOa-gSotk.png

Comment form after:

http://cldup.com/KymCNBNbsL.png

The same change should be implemented for the Quick Edit and Bulk Edit forms.

Attachments (5)

55364.diff (2.2 KB) - added by afercia 2 years ago.
quick edit.png (119.8 KB) - added by afercia 2 years ago.
Quick edit form with the patch applied.
bulk edit.png (157.1 KB) - added by afercia 2 years ago.
Bulk edit form with the patch applied.
55364.2.diff (3.4 KB) - added by afercia 2 years ago.
edit tags quick edit.png (52.3 KB) - added by afercia 2 years ago.
Edit tags Quick Edit form

Download all attachments as: .zip

Change History (19)

@afercia
2 years ago

#1 @afercia
2 years ago

  • Keywords has-patch has-screenshots added

55364.diff switches the buttons order and aligns them to the left. See screenshots below.

@afercia
2 years ago

Quick edit form with the patch applied.

@afercia
2 years ago

Bulk edit form with the patch applied.

#2 @afercia
2 years ago

Note: props should go also to @landwire who made a PR on the GitHub repository a while ago. See ticket:40822#comment:22

#3 @afercia
2 years ago

Note: 55364.diff needs to be updated to take into account also the Quick Edit form in edit-tags.php.

@afercia
2 years ago

#4 @afercia
2 years ago

55364.2.diff adjusts position and order of the buttons also for the 'edit tags' Quick Edit form. See attached screenshot.

@afercia
2 years ago

Edit tags Quick Edit form

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


2 years ago

#6 @ryokuhi
2 years ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.0

Hello @afercia,
happy to have you back onboard!
We reviewed this ticket today during the accessibility team's weekly bug-scrub.
As this ticket already has a patch, I'm moving it to the 6.0 milestone and adding the needs-testing label.

#7 @joedolson
2 years ago

  • Owner set to joedolson
  • Status changed from new to accepted

This ticket was mentioned in Slack in #core by abhanonstopnews. View the logs.


2 years ago

#9 @marybaum
2 years ago

  • Owner changed from joedolson to marybaum
  • Status changed from accepted to assigned

Looks like we need to test the patch. I can do that when I'm working with the previous ticket from the scrib of 3-16-22.

This ticket was mentioned in Slack in #core by abhanonstopnews. View the logs.


2 years ago

This ticket was mentioned in Slack in #core by abhanonstopnews. View the logs.


2 years ago

#12 @marybaum
2 years ago

  • Keywords commit added; needs-testing removed
  • Status changed from assigned to accepted

Applied the patch to a local site running 5.9.2 and Twenty-Twenty-Two, and it works nicely!

Recommend moving this along to commit.

#13 @joedolson
2 years ago

  • Owner changed from marybaum to joedolson

#14 @joedolson
2 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 53023:

Quick/Bulk Edit: Position action buttons in close proximity.

Move the Submit and Cancel buttons in quick edit forms to be next to each other and change the order of the buttons. Improve accessibility for low vision and cognitive impairments for quick editing.

Props afercia, marybaum.
Fixes #55364.

Note: See TracTickets for help on using tickets.