WordPress.org

Make WordPress Core

#47458 closed defect (bug) (fixed)

Fix tab sequence order in the Media attachment browser

Reported by: afercia Owned by: afercia
Milestone: 5.2.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch wpcampus-report commit fixed-major needs-refresh
Focuses: accessibility Cc:

Description (last modified by afercia)

In the media views attachments browser, the visual order of the Close, Previous, and Next buttons doesn't match the DOM order.

For accessibility, visual order and DOM order must match when this affects the meaning and operability of a page.

Success Criterion 2.4.3 Focus Order
https://www.w3.org/TR/WCAG21/#focus-order

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

Making visual and DOM order match benefits keyboard users who navigate documents sequentially and expect the focus order to be consistent with the sequential reading order.

Affects, for example:

  • keyboard users, whether they just prefer to use a keyboard or must rely on keyboard
  • users with disabilities that make reading difficult
  • users with visual impairments
  • screen magnifier users

Attachments (3)

attachments browser order.png (179.2 KB) - added by afercia 3 months ago.
Wrong DOM order in the attachments brower
47458.diff (2.8 KB) - added by afercia 3 months ago.
47458.2.diff (3.5 KB) - added by afercia 2 months ago.

Download all attachments as: .zip

Change History (13)

@afercia
3 months ago

Wrong DOM order in the attachments brower

@afercia
3 months ago

#1 @afercia
3 months ago

  • Keywords has-patch added; needs-patch removed

Problem :

  • the Close button comes from the media modal template thus the CLose button is first in the DOM order
  • then, the edit-attachments view adds the Previous and Next buttons: they're after in the DOM source and absolutely positioned to make them appear before the Close button
  • these elements can't be rearranged because they pertain to different views

47458.diff:

  • makes the modal Close button optional via a hasCloseButton property, default: true
  • makes the edit-attachments template use its own Close button so it can be placed in the right order
  • no visual changes

#2 @afercia
2 months ago

  • Description modified (diff)

#3 @afercia
2 months ago

  • Keywords wpcampus-report added

@afercia
2 months ago

#4 @afercia
2 months ago

  • Keywords commit added
  • Owner set to afercia
  • Status changed from new to assigned

47458.2.diff refreshes the patch. Also, resets all the attributes inherited from the Attachment view, including tabindex=0, data-id, etc. that are inappropriate on the attachment details <div>. See [30483] / #30390.

#5 @afercia
2 months ago

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

In 45506:

Accessibility: Fix the order of the Previous, Next, and Close buttons in the Attachment Details modal.

Making the visual and DOM order match benefits keyboard users who navigate documents sequentially and expect the focus order to be consistent with the sequential reading order.

Fixes #47458.

#6 @joemcgill
4 days ago

  • Keywords fixed-major added
  • Milestone changed from 5.3 to 5.2.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening this so it can be back-ported to the 5.2 branch.

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


3 days ago

#8 @audrasjb
3 days ago

  • Keywords needs-refresh added

Adding needs-testing keyword to validate if this ticket is good to land in 5.2.3 (should be ok though).

#9 @audrasjb
3 days ago

Tested on my side against 5.2.2, but unless I'm mistaken [45506] doesn't look to apply cleanly: trunk/src/wp-includes/media-template.php seems to have some dependancies to previous commits.

Could you check on your side @afercia?

#10 @SergeyBiryukov
14 minutes ago

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

In 45849:

Accessibility: Fix the order of the Previous, Next, and Close buttons in the Attachment Details modal.

Making the visual and DOM order match benefits keyboard users who navigate documents sequentially and expect the focus order to be consistent with the sequential reading order.

Props afercia.
Merges [45506] to the 5.2 branch.
Fixes #47458.

Note: See TracTickets for help on using tickets.