Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#30392 closed defect (bug) (fixed)

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

Reported by: rianrietveld's profile rianrietveld Owned by: azaozz's profile azaozz
Milestone: 4.2 Priority: normal
Severity: normal Version: 3.5
Component: Media Keywords: has-patch needs-testing
Focuses: ui, accessibility, javascript Cc:

Description

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

Attachments (3)

30392.test.htm (2.1 KB) - added by afercia 10 years ago.
test case
30392.patch (468 bytes) - added by afercia 10 years ago.
30392.2.patch (500 bytes) - added by azaozz 10 years ago.

Download all attachments as: .zip

Change History (17)

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


10 years ago

#2 @ceo
10 years ago

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

Last edited 10 years ago by ceo (previous) (diff)

#3 follow-up: @afercia
10 years ago

  • Focuses javascript added

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

test case

#4 @johnbillion
10 years ago

  • Keywords needs-patch added
  • Version changed from trunk to 3.5

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


10 years ago

#6 @afercia
10 years ago

  • Keywords has-patch needs-testing dev-feedback added; needs-patch removed

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

#7 follow-up: @afercia
10 years ago

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
  • tab until you focus the "Insert into post" button
  • tab once again
  • press Enter
Version 0, edited 10 years ago by afercia (next)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


10 years ago

#9 in reply to: ↑ 7 @afercia
10 years ago

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.

https://cldup.com/_LMvRvyhVt.png

This ticket was mentioned in Slack in #core by afercia. View the logs.


10 years ago

@azaozz
10 years ago

#11 in reply to: ↑ 3 ; follow-up: @azaozz
10 years ago

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.

#12 in reply to: ↑ 11 @afercia
10 years ago

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?

#13 @azaozz
10 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 31117:

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

#14 @azaozz
10 years ago

  • Keywords dev-feedback removed
  • Milestone changed from Awaiting Review to 4.2

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

Note: See TracTickets for help on using tickets.