[wp-trac] [WordPress Trac] #30392: Focus moves out of Insert media overlay when tabbing beyond Insert into Post button

[WordPress Trac]

#30392: Focus moves out of Insert media overlay when tabbing beyond Insert into
Post button
--------------------------+--------------------------------------------
 Reporter:  rianrietveld  |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  Media         |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  ui, accessibility, javascript
--------------------------+--------------------------------------------
Changes (by afercia):

 * focuses:  ui, accessibility => ui, accessibility, javascript


Comment:

 Tested and seems specific to Safari and the special treatment Safari gives
 to the inputs of type "file". I can't fully test, sadly I don't have a
 Mac, but reproduced on Safari 5.1 on Windows (sic).
 Attached a reduced test case, it would be great if someone could test this
 on latest Safari versions. See comments in the file.

 TL;DR

 Turns out the last focusable element in the media modal is an input
 type="file" generated by plupload.
 Safari doesn't give focus to file inputs when they're invisible.
 The media views FocusManager (based on jQuery UI ":tabbable") still tries
 to set focus on the file input
 Safari refuses so focus is no more constrained in the modal
 Focus goes to the Safari URL bar when tabbing forwards or to the first
 focusable element in the DOM *before* the media modal when tabbing
 backwards (the footer links as reported by @ceo)

 There are different possible ways to fix this, for example:
 - filter out from the "tabbables" collection the inputs of type "file"
 - rearrange the media modal template to be sure "Insert into post" is
 always the last focusable element
 - CSS: let Safari believe the input element is visible

 What worked for me:

 {{{
 .media-modal .moxie-shim.moxie-shim-html5 {
         min-width: 1px;
         min-height: 1px;
 }
 }}}

 in /wp-admin/css/media.css

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30392#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform