adobe / adobe/spectrum-web-components
[Bug][a11y]: Invalid tags require more than just color to identify as invalid
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### 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](https://accessibility.corp.adobe.com/testing/web/manual_checklist/#p_useofcolor)
### 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_
Contributor guide
Research direction
Start with the sp-tag component implementation linked in the issue and compare its invalid state with the Spectrum Tag error guidance. Verify how invalid tags are rendered and identify the change needed to provide a non-color indicator, then check the component's existing validation or accessibility coverage before confirming the behavior is complete.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100