[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:  anevins
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  5.4
Component:  Media                    |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots has-     |     Focuses:  accessibility,
  patch dev-feedback                 |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

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


Comment:

 Yep, I don't think this input can be hidden via CSS. On #30392 / [31117]
 we made some work to move this input out from the "tabbable" elements
 within the media modal dialog thus this input can't be tabbed to.

 The problem is that it still can be navigated to when arrowing with a
 screen reader as well as when using other navigation tools screen readers
 provide.

 Since it's already non-tabbable, there's just the need to hide it from
 assistive technologies. It is already meant to be visually hidden thus it
 should be non-visible for all users. I guess an `aria-hidden="true"` would
 work. Unfortunately, as far as I see,
 [https://github.com/moxiecode/moxie/blob/1d816b071c7f6e29cc825cf97dcd089985106cbd/src/javascript/runtime/html5/file/FileInput.js#L39-L42
 this input is injected with innerHTML] and not exposed in the `mOxie`
 object so I can't think of a non-hackish way to add a HTML attribute to
 it.

 Worth noting that the WordPress `moxie.js` file is pretty out of date. For
 example, on the upstream latest version a `tabindex="-1"` attribute was
 added to this input 2 years and a half ago. See
 https://github.com/moxiecode/moxie/commit/d2e3bfdf8fbf5e1674fae09db445af811ae36c61

 I guess a good first step would be updating the WordPress `moxie.js` file
 to its latest version. This should happen early in the 5.4 release cycle.

 Before that though, I'd suggest to ask the Ephox team to add `aria-
 hidden="true"`. Fixing this issue upstream seems to me the most reliable
 way to make this input not perceivable to all users.

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