Validation error status icons

[schlessera]

The validation error status icons have been changed to be differently colored versions of the AMP logo:

However, one of the guiding principles of WCAG when it comes to color is that it should never serve as the only indicator. More specifically, we would talk about WCAG G14 here: https://www.w3.org/TR/WCAG20-TECHS/G14.html

Following are a few examples of how this is perceived with different forms of color blindness.

Protanopia (red-blind):

Deuteranopia (green-blind):

Achromatopsia (no colours):

First of all, we do have a text representation of the same information here, so it is not necessarily broken right now.

However, there is no direct visual indication that the icon is supposed to relate to the text, and no semantic coding to clearly associate them. It's just an image in a div that is located close to a <select>:

I have two suggestions to improve on this:

Put the shape into the select element

It would be helpful to add the icon inside of the select, instead of outside. That would also clearly show that this is supposed to be the same information, which is not currently the case, especially if you open the dropdown. It just still shows the currently selected one, while showing the text of both options:

Use two distinct shapes that convey meaning

Another aspect, though, is that the actual shape of the icon is meaningless and useless in this context. It is truly only used as a container for the color. Therefore, it might be preferable to use the text itself or its background for the color instead. And if that is not wanted, we should look for two distinct shapes to use as the container for the colors, that also serve to communicate the intent properly.

[westonruter]

ut the shape into the select element

It would be helpful to add the icon inside of the select, instead of outside. That would also clearly show that this is supposed to be the same information, which is not currently the case, especially if you open the dropdown. It just still shows the currently selected one, while showing the text of both options:

Do you mean put the icons inside the option elements? Unfortunately, this is no possible given the current state of select element stylability today. I did tried. We'd have to use a custom dropdown component as opposed to the native select one.

Use two distinct shapes that convey meaning

Another aspect, though, is that the actual shape of the icon is meaningless and useless in this context. It is truly only used as a container for the color. Therefore, it might be preferable to use the text itself or its background for the color instead. And if that is not wanted, we should look for two distinct shapes to use as the container for the colors, that also serve to communicate the intent properly.

We did discuss this at WCUS a bit at the booth, about whether the icons work as is. I think the a11y color issue did come up, but given there is text in the adjoining select helps mitigate this, as you identified.

The thinking behind the colored AMP badges was to align it with the AMP Validator browser extension.

Nevertheless, it's true that extension does overlay an invalid number count on the badge which would improve accessibility:

The validator extension can also show a warning badge:

Maybe an exclamation ❗️ overlaying the bottom-right of the red icon would work in this scenario?

---

Whatever we do here, we should take it as an opportunity to also align the status icons used in the admin bar. For the admin bar, we currently use 🔗 ✅ ⚠️ ❌:

But we could instead use:

[westonruter]

The use of red/green AMP icons originated in #2023 (comment)

[cathibosco]

We should do some visual mocks for us to look at here... we need an official visual language as part of our re-design. Good to know we will have number count here. I was unaware of that.

[westonruter]

Note: I just discovered that macOS Catalina is no longer rendering a warning emoji in the admin bar:

[folletto]

Hello! I've been pointed out because we had some confusion arising by the green AMP logo being confused with Jetpack... so I was going to mention that, but then by reading this thread I realize this is already being solved in the right direction, so I just want to confirm that I agree with what Alain said:

1. For accessibility reason, color shouldn't be the (only) way to mark different statuses
2. It would be better to move the icon inside the dropdown if possible

I'd also add that in terms of branding, it's usually preferable to not use the logo as status indicator, or any functional use, which is even more true if the indicator has a negative meaning.

I think the icon ideas proposed by Weston could be a good way forward:
#2023 (comment)

I was also going to mention to use the Material Design icons, which have been used in Gutenberg, but here I also agree with Weston that reusing Dashicons would allow also allow them to be used in the admin toolbar menu, as it would fit with the icons existing there.

Thus trying to follow and combine all the ideas above (and some from the previous thread), what about using these from Dashicons:

[westonruter]

For the status of the validation errors, we also need to take into account the new/acknowledged state per #3725. So in keeping with that issue, what about removing the the AMP logo next to each dropdown to only replace with a subtle green/red color clue (purely for additional indication to enhanced the selected Removed/Kept selection) and then to add a new column which captures the new/acknowledged state. In keeping with comments, this column would have the semantics of “Approve” (✔️) and “Unapprove” (✖️):

Tapping the button in the Approve column would toggle the new state for the validation error. The four possible states would be:

1. Unapproved removed: Markup is removed but you haven't confirmed this is doesn't break the page. The default state for most new invalid markup.
2. Unapproved kept: Markup is kept (disabling AMP) and you haven't yet verified if it is required. The default state for excessive CSS only.
3. Approved removed: You've verified that the removal of the invalid markup does not break the page
4. Approved kept: You've decided the invalid markup is required and you are acknowledging that this URL must opt-out of AMP.

The user may switch from approved back to unapproved at any time to mark invalid markup that they need to re-confirm. (In other words, this is “marking as unread”.)

Also, the button to Approve/Unapprove would cause the state to persist in the DB right away. This is in contrast with the Markup Status dropdown, which requires the user to click the Update. This is because the user also needs the ability to Preview the impact of removing/keeping the invalid markup. But there is no such need for the approved state. The approve/unapprove row action links for comments cause immediate state persistence. That being said, the Approve column could be replaced instead with checkboxes, but… I'm wary of this being confused with the checkboxes on the left which allow you to select rows for bulk actions. (Upon checking those checkboxes, then Remove/Kept buttons appear to update the select dropdowns in bulk.)

Nevertheless, if all the rows are “approved” I'm not sure it makes sense to then show the ✖️ icon for each row to toggle back the unapproved state. Should approved rows have the ✔️ instead? Not if we're following the model of comments:

[folletto]

I like this direction, and I think that word+border works well too :)

As for the approve/unapprove, it feels a bit opaque. Maybe a label can be used there instead of an icon: "Approved", "Not approved"?

If that gets too long, then maybe having the header say "Approved" could help a bit, as it shows that's a state and not a request.

Checking the other thread, might also be that maybe instead of "Approved" a semantic of "Checked" would do? That would both mean that it's something that needs to be verified, but at the same time it can be reversed to unchecked, and it's clear it's waiting for human intervention. However, it might just be that I'm reading a slightly different semantic here as a non-native speaker.

[westonruter]

One other wrinkle: for comments, when you approve a comment that causes it to appear (be kept) on the site; when you unapprove a comment, that causes it to be hidden (be removed). This isn't the same semantics for the invalid markup here, as removed/kept is another state which is separate from the state for approval/newness/unread. The approval state here is more about confirmation: do you confirm it is OK to do the action shown in the previous column? Would other icons better represent that concept?

[westonruter]

We need to update the publish metabox to use the ✅, ⚠️ , and ❌ to indicate the status of the validated URL in the same way that we are using these in the admin bar. If any of the markup is invalid is removed and not approved/confirmed, then the publish metabox should have a ⚠️ with a message that says the user needs to verify that the markup is OK to be removed:

[westonruter]

The green AMP logo would be replaced with ✅
The red AMP logo would be replaced with ❌
And then a new ⚠️ would be added when there is unapproved removed markup.

[westonruter]

We don't even need the row that says “invalid markup removed: 2”.

[westonruter]

We'll need to rebrand “new” to “unapproved” here as well probably:

[westonruter]

We also need to change out the AMP icon used on the error index:

Using either green/red text or use ✅ and ❌

[westonruter]

The icon also needs to be changed on the single validation error view:

[westonruter]

We'll also need to change the icons on the validated URL list, removing/replacing the use of the AMP logo and introducing a ⚠️ symbol to compliment the orange “unmoderated” styling:

[westonruter]

For the “Approve” column, we should change to “Approved”:

The button would be replaced with a checkbox or rather a new Gutenberg toggle component to differentiate it from the row selection checkbox. If all validation errors are new initially, the Approved column would be filled with toggles that are off and all of the rows would have the orange styling. The user can then go through and toggle each row as they mark them as approved, and as they do the styling for each row would use the orange coloring. If they click the toggle again, the orange coloring would be restored.

[westonruter]

So like this:

Two states are not represented here, but you can see how they'd be represented:

• Approved & Removed: non-orange background with approve toggle on
• Unapproved & Kept: orange background with approve toggle off

[westonruter]

I'm not totally satisfied with the toggle to manage the approved state, and toggling it to indicate approved/confirmed. Maybe I'd have to just try it out for awhile to see if it works.

[folletto]

For what it's worth, it seems clear to me, probably the clearest approach so far. Maybe a dropdown for that too with an explicit label?

What's your doubt?

Aside: any reason for using "✅❌⚠️" instead of Dashicons or SVG icons in general?

[westonruter]

Aside: any reason for using "✅❌⚠️" instead of Dashicons or SVG icons in general?

It's hard to type these icons in GitHub comments 😄

But yes, we should look at using Dashicons instead of the Emoji.

[westonruter]

For the validation error index screen, we'll need to add a new row action for Approve/Unapprove (same as comments). They'd appear here:

[westonruter]

The fix for the icons (#4382) has been merged! Dashicons are now used. This issue remains open for QA purposes. The fix will be part of the v1.6 release.

[amedina]

QA passed.