Fancy Tag
How the Fancy Tag works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.
The Fancy Tag is a raised <span> with a label. Its close cross is a <button> named "Remove {label}" when onDismiss is passed; otherwise the cross is drawn but hidden. The active states are visual: the component has no toggle, so a selectable fancy tag needs one added.
Keyboard#
Moves to the close button, when there is one. The tag itself is not focusable.
On the close button: removes the tag.
On the close button: removes the tag on key release.
Semantics#
<span>The tag is text. The user-circle glyph is aria-hidden.
Always<button aria-label="Remove …">A real button with its own name. Override it with dismissAriaLabel.
onDismissaria-hiddenA cross that does nothing is hidden, so it is not announced as a control.
Cross without onDismissaria-disabledOn the tag; the close button is disabled.
Disabledaria-pressedNot set. If the tag toggles, render it as a <button aria-pressed>; colour alone does not tell anyone it is on.
Active - Grey, Active - BrandColour contrast#
Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.
Label · Default, Hover, Active
Satoshi Medium 12 against the white chip, or white on brand when active.
WCAG 1.4.3 Contrast (Minimum) ↗Close cross · Dismissible
The cross takes the tag's ink, #2a2a2a on white (14.35:1), and white on brand when active (5.40:1).
WCAG 1.4.11 Non-text Contrast ↗Focus indicator · Focus visible
When the close button has keyboard focus the whole tag rings: a 2.5px white gap, then 1.5px of #1a6ef8 (4.54:1 on white). It is thinner than the 2px used elsewhere.
WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗Target size · Close
The cross is 14px; its hit area is padded to 24 × 24.
WCAG 2.5.8 Target Size (Minimum) ↗Measured contrast#
Label against the chip, measured from the Fancy Tag's tokens. Disabled is exempt as an inactive control. 3 of 9 pairs fall below their minimum (4.5:1 for text, 3:1 for graphics) and are marked in amber.
Motion#
- The lift and highlight change over 150ms, turned off under prefers-reduced-motion.
Checklist#
If the tag toggles, make it a <button aria-pressed>. The active states do not announce themselves.
After removal, move focus to the next tag or the field the tags belong to.
The focus ring is 1.5px. It passes 3:1 but is slim; check it can be seen on your surface.