adobe / adobe/spectrum-web-components

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

Open
#3,378 6 comments 0 reactions 0 assignees View on GitHub
a11y Component:Tags Feature SEV missing Spectrum
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.