Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#38142 closed defect (bug) (fixed)

Media modal: handle keyboard focus when closing the modal

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

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 10 years ago.

Download all attachments as: .zip

Change History (5)

@afercia
10 years ago

#1 @afercia
10 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone Awaiting Review → 4.7
  • Owner set to afercia
  • Status new → 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
10 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
10 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 10 years ago by afercia (previous) (diff)

#4 @afercia
10 years ago

  • Resolution → fixed
  • Status assigned → 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.