Focus moves out of Insert media overlay when tabbing beyond Insert into Post button

[rianrietveld]

This is about the loss of focus in Add Media -> Insert media screen.

When a keyboard user wants to insert an image in a post and tabs beyond the "insert into post" submit button, the focus drops outside the insert Media overlay. The user can't return to the overlay or close it using a keyboard only.

For a demo with Safari 8.0 on Mac:
​https://files.slack.com/files-pri/T024MFP4J-F030ZBLDA/insert-media-4-1-beta.mp4
This video also adresses issues reported in #30386 and #27642

[ceo]

It also happens going the other way when navigating with a screen-reader (in my case VoiceOver on Yosemite in Safari). If I VO+Left-Arrow beyond the Close (X) I get to the bottom of the Edit Post screen where first the version and number is read to me and then "Thank you for creating with WordPress," etc., etc., etc.

I can't fall out of the window beyond the Insert into post button that same way, though, unless I start using Tab rather than the VO navigation keys. (Which is what Rian is doing in her demo, of course.)

[afercia]

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

[afercia]

test case

[afercia]

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 :)

[afercia]

Just noticed that the "file" input element generated by plupload is not only focusable but it's also possible to activate it via keyboard and open your system file browse dialog.
To reproduce:

• open the Add Media modal
• select some media
• tab until you focus the "Insert into post" last button in the modal
• tab once again
• press Enter

[afercia]

Replying to afercia:

Just noticed that the "file" input element generated by plupload is not only focusable but it's also possible to activate it via keyboard and open your system file browse dialog.
To reproduce:

• open the Add Media modal
• select some media
• tab until you focus the "Insert into post" last button in the modal
• tab once again
• press Enter

To clarify, this specific issue happens in all browsers not just Safari, see screenshot below: reproduced in Chrome on Windows XP. In Safari, additionally, keyboard navigation is not constrained in the modal.

[azaozz]

Replying to afercia:

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

30392.2.patch filters/removes input type=file element(s) from the "tabbables" collection. That seems to fix both bugs/inconsistencies when tabbing.

Note: in Safari there is an option "Press Tab to highlight each item on a webpage..." that needs to be checked for tabbing to work properly.

[afercia]

Replying to azaozz:

Thanks very much @azaozz, tested and seems it works nicely. Wondering if it would be ok to make it more specific

.not( '.moxie-shim input[type="file"]' );

or even

.not( '.media-modal .moxie-shim input[type="file"]' );

and maybe add a comment mentioning this ticket?

[azaozz]

In 31117:

Media modal: do not attempt to focus the hidden file input field added by Plupload when tabbing. Props afercia, fixes #30392.

[azaozz]

Sure, better to make it specific to the Plupload's file input.