[wp-trac] [WordPress Trac] #56753: Media upload file input missing form label (was: Accessibility Missing form label)

[WordPress Trac]

#56753: Media upload file input missing form label
---------------------------+--------------------------------
 Reporter:  viralsampat    |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Upload         |     Version:  6.0.2
 Severity:  normal         |  Resolution:
 Keywords:  needs-testing  |     Focuses:  ui, accessibility
---------------------------+--------------------------------
Changes (by sabernhardt):

 * keywords:  needs-patch needs-testing needs-design => needs-testing
 * type:  feature request => defect (bug)


Old description:

> Hello Team,
>
> I have started working on WordPress accessibility. I have checked
> WordPress media library admin form and checked its accessibility using
> "WAVE Evaluation Tool" and found two errors in media library admin form.
>
> Here, I have attached its screenshots:
>
> Screenshots:
>
> [https://share.cleanshot.com/lv7GiZQ2y8Mc4cJblnuy]
> [https://share.cleanshot.com/xphIMVX7KpLlrS1cdZHu]
>
> URL: your-site-path/wp-admin/upload.php
>
> WordPress version: 6.0.2
>
> Here, I have provided steps to reproduce this issue.
>
> Step1: Download "WAVE Evaluation Tool" extensions (
> https://chrome.google.com/webstore/detail/wave-evaluation-
> tool/jbbplnpkjmmeebjpijfedlgcdilocofh )
>
> Step2: Go to admin dashboard and open media library form, I have
> mentioned link above.
>
> Step3: Then click on "WAVE" extension and check its report.
>
> Thanks you so much,

New description:

 Hello Team,

 I have started working on WordPress accessibility. I have checked
 WordPress media library admin form and checked its accessibility using
 "WAVE Evaluation Tool" and found two errors in media library admin form.

 Here, I have attached its screenshots:

 Screenshots:

 [https://share.cleanshot.com/lv7GiZQ2y8Mc4cJblnuy WAVE summary]
 [https://share.cleanshot.com/xphIMVX7KpLlrS1cdZHu WAVE details]

 URL: your-site-path/wp-admin/upload.php

 WordPress version: 6.0.2

 Here, I have provided steps to reproduce this issue.

 1. Download "WAVE Evaluation Tool"
 [https://chrome.google.com/webstore/detail/wave-evaluation-
 tool/jbbplnpkjmmeebjpijfedlgcdilocofh Chrome extension].
 2. Go to admin dashboard and open media library form (wp-admin/upload.php)
 in Grid mode.
 3. Then click on "WAVE" extension and check its report.
 4. Turn off Styles to find the file input.

 Thanks you so much,

--

Comment:

 Thanks for the report!

 The file input missing a label is from mOxie, and it has `aria-hidden`:
 `<div id="html5_1geoo4skn1io81n4c1jn8q4a1k203_container" class="moxie-shim
 moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width:
 0px; height: 0px; overflow: hidden; z-index: 0;"><input
 id="html5_1geoo4skn1io81n4c1jn8q4a1k203" type="file" style="font-size:
 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%;
 height: 100%;" multiple="" accept="" tabindex="-1" aria-
 hidden="true"></div>`

 The empty heading WAVE reports is an H1 within `media-frame-title`, which
 is hidden with `display: none`.

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