Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 4 years ago

#47458 closed defect (bug) (fixed)

Fix tab sequence order in the Media attachment browser

Reported by: afercia's profile afercia Owned by: afercia's profile 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 5 years ago.
Wrong DOM order in the attachments brower
47458.diff (2.8 KB) - added by afercia 5 years ago.
47458.2.diff (3.5 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (14)

@afercia
5 years ago

Wrong DOM order in the attachments brower

@afercia
5 years ago

#1 @afercia
5 years 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
5 years ago

  • Description modified (diff)

#3 @afercia
5 years ago

  • Keywords wpcampus-report added

@afercia
5 years ago

#4 @afercia
5 years 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
5 years 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
5 years 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.


5 years ago

#8 @audrasjb
5 years 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
5 years 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
5 years 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.

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


4 years ago

Note: See TracTickets for help on using tickets.