Make WordPress Core

Opened 4 months ago

Last modified 2 weeks ago

#47611 assigned defect (bug)

Media views: hide the "file upload button" from assistive technologies

Reported by: afercia Owned by: anevins
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots
Focuses: accessibility, javascript Cc:
PR Number:


Noticed while working on #47145, which proposes to make the media modal a real ARIA modal dialog.

When navigating content within the media modal using the keyboard (with or without a screen reader running), at some point there's a tab stop at the bottom of the modal content. Screen readers announce "file upload button", see attached screenshot.

This button is the one that gets used to upload attachments and should be perceivable only in the "Upload FIles" tab. Instead, it's always perceivable and focusable in all the various media views.

A tab stop on an invisible control is confusing for keyboard users. Screen readers users will be confused as well, as this button is announced also in work flows that don't relate at all with file uploading.

I'd like to propose to find a way to hide this button from assistive technologies when it's not supposed to be used, making sure its functionality is preserved.

Attachments (1)

media modal file upload button.jpg (116.8 KB) - added by afercia 4 months ago.

Download all attachments as: .zip

Change History (11)

#1 @afercia
4 months ago

Note: if I remember correctly this issue was solved at some point in a previous release cycle, but I couldn't find a reference. Just to note that's likely a regression.

#2 @afercia
8 weeks ago

Similar issue: #47144

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.

7 weeks ago

#4 @joemcgill
7 weeks ago

+1 on making this less confusing for those using assistive technology. @afercia is this only happening in the editor context, or also in the media library? If the former, it might be a regression that was introduced when the media modal was implemented in the new editor.

#5 @afercia
7 weeks ago

@joemcgill happens also in Classic Editor.

It's an <input type="file" ... with a CSS class moxie-shim moxie-shim-html5.

This ticket was mentioned in Slack in #core-media by mike. View the logs.

4 weeks ago

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

4 weeks ago

#8 @joedolson
4 weeks ago

  • Owner set to anevins
  • Status changed from new to assigned

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

3 weeks ago

#10 @audrasjb
2 weeks ago

  • Milestone changed from 5.3 to Future Release

This ticket still needs some work and improvements.
Moving it to Future release.

Feel free to ask for reintegration in 5.3 if a patch is available in the next few days.

Note: See TracTickets for help on using tickets.