WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 3 months ago

#42979 assigned defect (bug)

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

Reported by: ComputerGuru Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: trunk
Component: Upload Keywords: ux-feedback
Focuses: ui, accessibility, administration Cc:

Description

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.

Attachments (2)

wp-upload-error.png (4.9 KB) - added by ComputerGuru 6 months ago.
error-while-uploading-new-file.png (6.5 KB) - added by ComputerGuru 6 months ago.
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.

Download all attachments as: .zip

Change History (7)

@ComputerGuru
6 months ago

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.

#1 follow-up: @melchoyce
5 months ago

+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.

#2 in reply to: ↑ 1 @vdwijngaert
4 months ago

  • Focuses accessibility added
  • Keywords ux-feedback added

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?

#3 @afercia
4 months ago

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.

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


4 months ago

#5 @afercia
3 months ago

  • Milestone changed from Awaiting Review to Future Release
  • Status changed from new to assigned
Note: See TracTickets for help on using tickets.