[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:  3.5
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  ui, accessibility,
  dev-feedback                       |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  needs-patch => has-patch needs-testing dev-feedback


Comment:

 The previous CSS that worked for me is not a perfect solution of course,
 there's still a tab stop between "Insert into post" and the "Close" link.
 This tab stop is actually the file input.

 A better solution would be to filter out the file input from the
 ":tabbable" element collection, this would mean hacking jQuery UI or
 plupload, I guess that's out of question.

 Just realized there is a CSS way to filter out that file input: to make
 jQuery UI consider an element being "tabbable", "the element and all of
 its ancestors must be visible", see jQuery UI core.js.
 So this will work:
 {{{
 .media-modal .moxie-shim.moxie-shim-html5 {
         visibility: hidden;
 }
 .media-modal .moxie-shim.moxie-shim-html5 input[type="file"] {
         visibility: visible;
 }
 }}}
 The file input will be visible but not "tabbable".
 No more additional tab stop for all browsers.
 Though, I really don't know if that "moxie-shim" container needs to be
 visible. I guess no, but I'd really appreciate some devs to carefully
 check this.
 I know it's a weird CSS solution to a structural/JS issue but hey, perhaps
 worth trying :)

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