Tag component considerations

[mbgower]

As discussed at CAG, there seem to be at least 3 4 variants of the tag component:

• a read-only indicator, used for classification
• a deletable filter indicator ("x" in corner)
• a selectable tag (logically, if one can delete, one can likely add). The implementation I saw of this on Carbon next involved what was basically a toggle button that a user could put in a pressed or unpressed state
• actionable -- basically a link (see comment)

The Carbon next page also hints at another variant which is almost equivalent of a shopping cart icon, that enumerates the number of tags/filters that are applied.

Challenges and considerations with these variants are addressed in an accessibility analysis, which includes comments on the existing documentation, recordings of some screen reader issues with a current implementation, and a first take at suggesting how the states for each variant might work.

@laurenmrice and @aagonzales, feel free to bring me in on any discussions on this component.

[mbgower]

I saw another actionable tag used in an ibm.com experimental component

This demo uses a tag “Merchandising offer” that is an actionable tag (I think it is basically a link?). That breaks the paradigm of tags being informational, not operable (except when used for filtering purposes). It visually is not distinguishable from a ‘read only’, informational tag. That in itself I’d call a design problem.

tag.button.mov

[mbgower]

I discussed the above 'button tag' variation with @jwitkowski79's team, who are going to add their designs to this discussion thread as they progress.

[laurenmrice]

This is a related issue about an interactive tag #7592. We used to have this, but I am not seeing it in our React storybook anymore.

[laurenmrice]

The Carbon Platform squad uses selectable tags in a filter menu. Tags that have the selected state will be included in the top filter. Unselected tags will remain visible in the menu but will not be in the top filter. This is a good tag variant to have in our system.

s

[mbgower]

Yeah, this one is included in my exploratory. The biggest challenge is the focus indicator on the pushed state. Since it's got a dark outline, a standard focus indicator won't show up. Need an offset --something like a shim of 'white' between the border of the tag and the focus indicator-- or to make it fatter (needs to be at least 2px in WCAG 2.2), etc

[mbgower]

@jwitkowski79 do you have any updates on your exploratory work? Another team (is also getting into this space, and any lessons learned would be helpful.

[jwitkowski79]

@mbgower Hello! Unfortunately, our team has not been able to do explorations around this yet. I'll check with Joseph Dombroski to see if I can get the prioritized for our team if it's something we need to tackle sooner than later, and other teams haven't explored solutions to this yet.

[mbgower]

Found another use case for tag: in condition statements.

Joe Alewine and Alexander Melo were presenting/commenting on today's DSAG on this.

---

On the same call, I was concerned seeing a column in a table containing deletable tags. This does not seem to be a valid use case (or at least is adding a lot of a complexity to a table that does not have deleting tags as its primary purpose). To me, those should be read-only.

[mbgower]

I realized there is what could be another use case that has come up a number of times on the #accessibility-at-ibm slack channel, including this very meaty thread on using tag-like styling as a form of content categorization, including in search results

Note that many discussions are about colour highlighting of text that do NOT use tags as part of the solution. Similar considerations apply, so thought it was worthwhile mentioning it, because inevitably someone will use tags this way.