Draw "dismiss" icon in upload errors in the error div, not after the action title

[ComputerGuru]

When an error occurs while uploading a file in the media manager, the icon to dismiss the error is (incorrectly, imho) floated near the title of the action and not with the actual error.

There is probably a larger underlying issue where the action text (e.g. "Uploading") is actually tied to the error (i.e. dismissing the error causes the action text to disappear) but is not visually drawn as part of the same dialog; but presumably in the case of multiple errors or when attempting to dismiss an error while another upload is underway, etc. the change suggested above should suffice.

In short, one merely seeing the error (see attached) by itself would be confused as to whether the would terminate the upload or dismiss the error, because of its layout and positioning.

[ComputerGuru]

Perhaps a better example is this attachment showing how the dialog appears in the middle of uploading a new file (without any errors) but after an upload error had already occurred (and not been dismissed) on the previous upload attempt. The sane assumption would be that the crossmark terminates the current upload and that there is no way to dismiss the old error message.

[melchoyce]

+1 — the dismiss icon should be inside the error message itself.

Does the dismiss icon currently dismiss multiple errors? If so, we might want to additionally add a "clear all errors" at the bottom of the list.

[vdwijngaert]

Replying to melchoyce:

+1 — the dismiss icon should be inside the error message itself.

Does the dismiss icon currently dismiss multiple errors? If so, we might want to additionally add a "clear all errors" at the bottom of the list.

I tested it and indeed, this icon dismisses all errors at once, so that's why they put the dismiss icon at the top. I agree it is confusing.

The way I see it, there are two options:

• Make the icon more descriptive (perhaps add "dismiss all" as a text?)
• Make individual error messages dismissable

To be honest, I don't think being able to dismiss individual error messages really adds a value though.

Could someone with an accessibility background look into this?

[afercia]

There are also other "dismiss error" like that:

• in the media list view, each error has a "dismiss" button
• in the media library instead, there's just one button for all errors

They're all placed (floated) before the actual error message. Also for accessibility, it would be better to have the error message being announced before and the dismiss button after.
I'd also consider to use plain text instead of a "X", as suggested here in this specific case "Dismiss all errors" would be more clear for all users.

[pento]

I'm fine with this staying in 5.0, but it's going to need to committed by beta 1 (this week)!

[alexislloyd]

Error dismiss mockup

[alexislloyd]

Above is a sketch of how this could be clarified by making the dismiss action more explicit and placing it inside the error area.

[peterwilsoncc]

Punting to a point release as this missed Beta 1.

[audrasjb]

Hello,

5.0.3 is going to be released in a couple of weeks.

It doesn't appear this ticket can be handled in the next couple of weeks (needs patch). Let's address it in 5.1 which is coming in February. Feel free to ask for changing the milestone if you think this issue can be quickly resolved.

Cheers,

Jb

[afercia]

The 5.1 release beta 1 is today. This ticket still needs a direction and a patch. Punting to Future Release.

[karmatosed]

This has design feedback from what I can see and just needs a patch to get it ready to release. I am going to remove the design feedback keyword for now.

[antpb]

This was mentioned in the recent Media Component meeting where we decided to try and aim to land this in 5.9.

[joedolson]

Simplest implementation

[joedolson]

Placing the dismiss button inside the error div only makes sense if we're also going to implement separate dismiss buttons for each individual error. I agree that it's not really beneficial to dismiss each error individually, so this is a simplest case.

• Changes to a text button, using the existing screen-reader-text.
• Moves the button to the bottom of the status container.
• Updates CSS to remove dashicon & position button.

To test:

• upload one or more disallowed file types in the media library grid & in the media library modal
• Check positioning and text of dismiss button
• Verify screen reader behavior. (Read errors, then button text, focus button)

[joedolson]

Since the previous design suggestion would only apply if we shifted to dismissing each individual error, requesting new design feedback.

[chaion07]

Hi @ComputerGuru! Thank you for reporting this. We discussed this ticket during a recent bug-scrub session and based on the discussion, we are requesting some before and after screenshots of the latest patch if possible. As @joedolson has pointed out that trying to incorporate @alexislloyd's iteration of the mockup may require involving the entire error dismissal structure, we should look at the screenshots first to be able to share a design-feedback that is concrete enough to help. Anyone is welcome to test it out and post screenshots. Cheers!

Props: @shaunandrews & @joedolson

[shaunandrews]

Simplifying the button styles

[shaunandrews]

Simple dismiss button for errors.

[shaunandrews]

I tried simplifying the button styles even more, using the default button without any customization, including the red text color and positioning.

I also adjusted the label to use sentence case ("Dismiss errors") rather than title case ("Dismiss Errors") This feels like a solid improvement to me.

[ComputerGuru]

Thanks for revisiting this bug and for putting in the work to clean up the UX here! Please keep in mind part of the original reason for filing: the proximity of the "uploading" text with the errors made it look like the errors were associated with the current upload.

The biggest and clearest fix is of course moving the dismiss icon away from the "Uploading" text - anything else is just icing on the cake. Changing it (as rendered) to below the errors with "dismiss errors" is a colossal improvement - thank you.

If there were some way to encode temporal proximity into the display, that would also help. Merely increasing the distance between "Uploading" and the errors is one way, adding a subtle divider is another. Or putting some sort of hint text "previous errors" or something of that nature to make it clear that the errors shown are not associated with the current action ("Uploading") because the way the text is formatted it still looks like "Uploading" is a heading for the error divs that follow, making it seem at first glance that the errors are associated with the very much current "Uploading" text when they are old (and stale).

This is a little complicated by the multiple ways these errors can present: the first is where a single file is uploaded at a time and the error is from a previous upload, the second is where multiple files are being uploaded in one go and the errors are "streaming" in tandem with the upload (one or more files failing as they are uploaded and handled by the server).

If we accept that in a one-at-a-time situation the user has almost certainly seen the error before re-attempting the upload of what may be the same file, I think it makes the most sense to clear the errors automatically (or fade them out, at least) when a new upload is initiated. For the multiple file upload situation, the current UX (short of multiple dismiss icons) is actually the most correct as it (correctly) draws a connection between the current operation (upload of multiple files) with the errors that were occuring during that time.

I guess in all cases clearing existing errors (or fading them out or adding a significant whitespace above them perhaps with a title like "upload of n files") *so long as there is no upload still in progress* when a user starts a new upload would make the most sense, for both the one-at-a-time and multiple-at-once scenarios?

[joedolson]

@ComputerGuru The goal here is to make the minimum change for maximum benefit; after commit, I'd suggest adding new tickets for additional changes. WordPress 5.9 closes for changes tomorrow, so making this a larger change pretty much guarantees it won't happen in this cycle.

I'd argue that the fundamental problem is that the 'uploading' heading may not be the best contextual descriptor for the content it describes; it's probably better as 'Upload Status', or something to that effect.

But mostly I think that changing from the 'x' icon to 'Dismiss errors' satisfies the bulk of the problem with context: it makes clear that you're only dismissing errors and not other ongoing events.

@shaunandrews Definitely in favor of greater simplification, though I think that we should avoid using default button styles; that doesn't seem consistent with the rest of the core WordPress design. It should probably use '.button', at a minimum. Thoughts?

[sabernhardt]

adding button class to simplified version

[sabernhardt]

I agree with adding the button class if we simplify the styles, so that is included in 42979.3.diff​.

[shaunandrews]

Definitely in favor of greater simplification, though I think that we should avoid using default button styles; that doesn't seem consistent with the rest of the core WordPress design. It should probably use '.button', at a minimum. Thoughts?

Ah yes, of course. That was my intention but I obviously made some false-assumptions about how the CSS is applied. Thanks to @sabernhardt for updating the diff to include the proper class name. Looks good to me!

[joedolson]

Tested, everything is working as expected. There aren't any functional changes made in this patch, so it's pretty straightforward.

[joedolson]

In 52196:

Media: Move dismiss upload errors button after errors.

Change the button that dismissess upload errors so it appears after the relevant errors. Change button from icon-only to text-based. Removes ambiguity about what you are cancelling when using the control.

Props ComputerGuru, melchoyce, vdwijngaert, alexislloyd, joedolson, shaunandrews, sabernhardt.
Fixes #42979.