[Bug][a11y]: Invalid tags require more than just color to identify as invalid

[dineshy87]

trafficstars

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

sp-tag

Expected behavior

Invalid tags at least in the design, have an icon to indentify itself as invalid along with a different border color. https://spectrum.adobe.com/page/tag/#Error

Actual behavior

The implementation https://opensource.adobe.com/spectrum-web-components/components/tags/ relies solely on color, which would fail the Use of color criteria

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

No response

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

@pfulton can you cycle with design on this and see if we should update the CSS docs to only include invalid Tags with this icon?

[dineshy87]

This is a weird one, given that screenreader users also will have an issue of not knowing that a tag is invalid. And given the way it is currently implemented, adding aria-invalid isn't a good idea either because aria-invalid is deprecated for listitem. o, if an icon is added, having it with a proper text alternative to convey that it is an "invalid" tag is very important.

[pfulton]

@Westbrook @dineshy87 I discussed this with the Design team, and they've clarified that invalid tags should always have an icon. We're updating our Docs site to reflect this change, but this is probably a bit of a bigger lift for you all.