[wp-trac] [WordPress Trac] #47611: Media views: hide the "file upload button" from assistive technologies

[WordPress Trac]

#47611: Media views: hide the "file upload button" from assistive technologies
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |       Owner:  afercia
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  5.5
Component:  Media                    |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots has-     |     Focuses:  accessibility,
  patch commit                       |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  has-screenshots dev-feedback needs-patch => has-screenshots
     has-patch commit


Comment:

 [attachment:"47611.2.diff"] hides the "shim" input file from assistive
 technologies by adding `aria-hidden="true"` and `tabindex="-1"`
 attributes. In the context of the media modal dialog, tabbing is already
 constrained within the modal so it's not possible to tab to the input
 file. I added the negative tabindex just in case.

 I couldn't find a way to get this input field with a Plupload method, as
 it seems Plupload doesn't expose anything to reference this element. Thus,
 I opted to use a jQuery selector `.moxie-shim-html5 input[type="file"]`. A
 similar selector is already used in the media views FocusManager and seems
 fine to me. Worst can happen is that it does nothing.

 Tested with IE 11 and Edge (44.18362.449.0): the upload button works as
 these attributes don't impact the computed `display` property of the input
 file, see [47549] / #49753.

 Tested with latest Firefox / NVDA and IE 11 / JAWS 2019 and the input file
 isn't announced any longer.

 The patch does also a couple more things:

 1
 Minor coding standards.

 2
 TL;DR: it removes a line of jQuery that was meant to hide the "shim"
 container. Turns out the format of the container ID:
 `'#' + this.uploader.id + '_html5_container'`
 isn't used any longer since a few years. Actually, on WordPress 3.8 it
 used to be something like this:
 `id="p1e8mvp38f1lbl1u5mbin1ckg1na20_html5_container"`
 then in WordPress 3.9 it changed to:
 `id="html5_1e8mr85t0q6o1n9t1ko610ldjre5_container"`
 so this line of code doesn't do anything since a few years. It appears the
 ID format changed with the upgrade to Plupload 2.11 in #25663. See also
 [21380] / #21437. In any case, I don't think we actually want to hide this
 container.

 There are probably more things a bit out of date in `wp-plupload.js` but
 they're out of the scope of this issue.

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