Add New Media button does not give aria feedback

[mantismamita]

Button Upload Plugin and Upload Theme both have a role of button and aria-expanded=true onclick. The expanded panel then directly under it which is expected behaviour for screen-readers and is semantically logical. (see screen-shot)

On the other hand, the Add New button on the Media Page is a link without a role of button and there is no aria feedback provided. The expanded panel is then followed by the navigation bar rather than the expanded panel.

[mantismamita]

Upload Plugin behaviour

[mantismamita]

Add New Media behaviour

[afercia]

Thanks very much for opening this ticket @mantismamita and for your contribution at Vienna's Contributor Day :) I think a first good step would be using the CSS class aria-button-if-js on the link in order to add a role="button" when JavaScript is on (you can see what it does in common.js). Worth reminding this link should remain a link because when JavaScript is off it points to media-new.php

Setting the version to 4.0 as that should be the version the media grid and the uploader panel were introduced.

[mantismamita]

Hello @afercia, I was using the hide-if-no-js class and adding the aria-expanded=false but will try your way. So does this mean we are patching 4.0 ? I'm not sure I understand. I didn't know that was possible ;) I guess I shouldn't submit the patch I had going as it was using trunk?

[afercia]

Hi @mantismamita. It's just a convention on Trac to set the version number to indicate the WordPress version the "bug" was first introduced :) Patches should always be built from trunk of the develop repo which means you should ​check out WordPress trunk or if you're using VVV from www/wordpress-develop .

[mantismamita]

from upload.php

[afercia]

For better accessibility, and consistency with other screens (Plugins, Themes), the drop zone should immediately follow the toggle button and be placed before the media toolbar, see screenshot below. Would greatly appreciate a quick feedback from the UI team :)

[karmatosed]

I think moving the dropzone up makes a lot of sense. You are clicking 'add' and having it appear below another UI element is a weird experience. For reference here is what we currently have and shows the UX hitch.

[afercia]

Screenshot with new patch applied:

[afercia]

The approach used in 37188.diff​ won't work correctly when clicking on the "X" button to close the uploader. Needs a refresh with a new approach, probably using the event toggle:upload:attachment.

[afercia]

37188.2.diff​ uses a new approach and stores the Add New button as a property of the frame. Not sure why this event was delegated, since the .page-title-action element is always printed out in the page. Maybe I'm missing something, would greatly appreciate some feedback /cc @wonderboymusic @ericlewis @adamsilverstein 🙂

[afercia]

37188.3.diff​ removes unrelated change to wp-includes/class-wp-editor.php.

[afercia]

Screenshot for the responsive view, before and after:

Reminder: the "Drop files anywhere to upload" instruction gets hidden when Plupload detects there's no support for drag and drop.

[adamsilverstein]

Replying to afercia:

37188.2.diff​ uses a new approach and stores the Add New button as a property of the frame. Not sure why this event was delegated, since the .page-title-action element is always printed out in the page.

The only reason I could think this would be delegated is if the button could sometimes be added or the event was needed after the script ran, but I don't see that happening here.

I tested the patch and this looks good; everything worked well in the media library, however when I tried reaching click "Add Media" or "Set Featured Image" on the post edit page, I got a JavaScript error:
Uncaught TypeError: Cannot read property 'attr' of undefined likely because there isn't a .page-title-action element on the page.

[afercia]

Replying to adamsilverstein:

I tested the patch and this looks good; everything worked well in the media library, however when I tried reaching click "Add Media" or "Set Featured Image" on the post edit page, I got a JavaScript error

Yep, confirmed. I think the controller is not the same as in the Library.

[afercia]

37188.4.diff​ just checks for this.controller.$uploaderToggler before trying to use it.

[afercia]

37188.5.diff​ refreshes the patch after recent changes, also adds some inline comments.

Screenshot before the patch: errors and uploader displayed after the toolbar:

Screenshot with the patch applied: errors and uploader displayed before the toolbar:

[afercia]

Couple things still to do:

• the uploader close "X" button misses a focus style so on webkit on Mac it displays the native focus style and on Firefox no style at all (see screenshot below)
• when closing the uploader, keyboard focus should be moved back to the "Add New" toggle button

[afercia]

37188.6.diff​ adds the missing focus style and improves the color contrast of the "X" close button. Also improves a bit the JS part.

[afercia]

In 40359:

Accessibility: Improve the Media Library inline uploader accessibility.

For better accessibility, expandable panels should be placed immediately after
the control that expands them. This change moves the Media Library inline
uploader up, right after the "Add New" button, also introducing consistency with
the Plugin and Theme uploaders.
Adds a proper ARIA role on the button and an aria-expanded attribute to give
better feedback to assistive technologies users about the uploader's expanded state.
Improves the focus handling when closing the uploader, improves the focus style
and color contrast ratio of the uploader "close" button.

Props mantismamita, karmatosed, adamsilverstein, afercia.
Fixes #37188.

[afercia]

In 47217:

Accessibility: Media: Make the toolbar and inline uploader visual order always match the DOM order.

Depending on the specific media view, the media UI elements are placed in a
different visual order. This change makes sure their visual order always
matches the DOM order.

Propos syhc, audrasjb, afercia.
See #37188.
Fixes #48403.