WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#38142 closed defect (bug) (fixed)

Media modal: handle keyboard focus when closing the modal

Reported by: afercia Owned by: afercia
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch
Focuses: accessibility, javascript Cc:

Description

When the media modal closes, it tries to set focus back to a "useful location" and assumes there's an element with id 'wpbody-content', i.e. the admin pages main content.

This is not always true, for example there's no wpbody-content element:

  • in the Customizer
  • in Press This
  • when the media modal is used on the front end
  • plugins may provide completely customised pages that don't have wpbody-content

This is very evident in the Customizer, for example when setting a Background Image and using the keyboard :

  • press "Select Image"
  • the media modal opens
  • press Escape to close the modal
  • focus is lost and the tab order starts again from the document root (or the browser's toolbar)

Ideally, when the media modal opens it should store a reference to the element that was clicked to open it and then when the modal closes, focus should be restored on this element.

The only exception is TinyMCE: when an imag eis actually inserted in the editable area, focus should go in the editable area. As far as I see TinyMCE already takes care of this.

Attachments (1)

38142.diff (2.6 KB) - added by afercia 3 years ago.

Download all attachments as: .zip

Change History (5)

@afercia
3 years ago

#1 @afercia
3 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 4.7
  • Owner set to afercia
  • Status changed from new to assigned

38142.diff is a first pass. Removes an old hack for Opera 12 that prevented to correctly get document.activeElement, see [22665]. Feedback welcome. Since it relates also to the insertion of images in TinyMCE, I'm going to /cc @azaozz :)

#2 follow-up: @azaozz
3 years ago

38142.diff looks good. If there is still somebody using Opera <= 12 (which I doubt), they may see some visual artifacts. This browser like pretty much any other browser older than couple of years, falls into the "still supported but no guarantee to look pretty" category.

#3 in reply to: ↑ 2 @afercia
3 years ago

Replying to azaozz:

38142.diff looks good. If there is still somebody using Opera <= 12 (which I doubt), they may see some visual artifacts.

Thanks very much for reviewing :) Just for the record, I've actually tested with Opera 12 and I think the issue is solved by the fact the focus is now moved to the media modal and doesn't stay on the Add Media button.

Edit: tested also when inserting images in the "Text" editor.

Last edited 3 years ago by afercia (previous) (diff)

#4 @afercia
3 years ago

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

In 38652:

Accessibility: Handle focus when closing the media modal.

When closing the media modal, by default focus should be moved back to the UI
control that was clicked to open the modal. The only exception is when inserting
images into the Visual or Text editor.

Fixes #38142.

Note: See TracTickets for help on using tickets.