WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#30392 closed defect (bug) (fixed)

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

Reported by: rianrietveld Owned by: 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 6 years ago.
test case
30392.patch (468 bytes) - added by afercia 6 years ago.
30392.2.patch (500 bytes) - added by azaozz 6 years ago.

Download all attachments as: .zip

Change History (17)

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


6 years ago

#2 @ceo
6 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 6 years ago by ceo (previous) (diff)

#3 follow-up: @afercia
6 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
6 years ago

test case

#4 @johnbillion
6 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.


6 years ago

#6 @afercia
6 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
6 years ago

#7 follow-up: @afercia
6 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
  • select some media
  • tab until you focus the "Insert into post" last button in the modal
  • tab once again
  • press Enter
Last edited 6 years ago by afercia (previous) (diff)

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


6 years ago

#9 in reply to: ↑ 7 @afercia
6 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.


6 years ago

@azaozz
6 years ago

#11 in reply to: ↑ 3 ; follow-up: @azaozz
6 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
6 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
6 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
6 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.