Tag
Compact inline labels for categorisation, status, and metadata. Use diwa-tag for static labels and diwa-tag-dismissible when the user needs to remove an item.
Keyboard interaction — diwa-tag
diwa-tag is a non-interactive display component and receives no keyboard focus.
| Key | Action |
|---|---|
| — | No keyboard interaction. diwa-tag is a display-only element. |
Keyboard interaction — diwa-tag-dismissible
| Key | Action |
|---|---|
| Tab | Moves focus to the dismiss button inside the tag. |
| Enter / Space | Activates the dismiss button and emits the dismiss event. |
Screen reader behaviour — diwa-tag
| Attribute / Property | Value / Behaviour |
|---|---|
role | None — the component renders a plain <span>. The outer custom element itself carries no implicit ARIA role. |
Screen reader behaviour — diwa-tag-dismissible
| Attribute / Property | Value / Behaviour |
|---|---|
aria-label (dismiss button) | Set via the label prop (default: "Remove"). Always provide a meaningful label so screen reader users understand what will be removed. |
role | The dismiss button renders as a native <button> with type="button", giving it the correct implicit button role. |
WCAG 2.2 compliance
1.4.3 Contrast (Minimum) — AAPass
Tag label text uses design tokens validated to meet the 4.5:1 minimum contrast ratio against the tag background in all variant colours.
1.4.1 Use of Colour — APass
Colour is not used as the sole means of conveying tag variant meaning. Always pair colour variants with a descriptive visible label.
2.1.1 Keyboard — APass
diwa-tag is non-interactive and requires no keyboard access. diwa-tag-dismissible exposes a dismiss button reachable via Tab and activatable with Enter or Space.
2.4.7 Focus Visible — AAPass
The dismiss button in diwa-tag-dismissible shows a tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) via :focus-visible.
4.1.2 Name, Role, Value — APass
The dismiss button renders as a native <button> (implicit role). aria-label is set from the label prop so screen readers announce what is being removed.
Best practices
- Colour + text — never rely on colour alone to convey tag status. Always pair the variant colour with a visible text label so colour-blind users understand the meaning.
- Dismiss label — always set the
labelprop to describe what is being removed, e.g.label="Remove TypeScript filter". A generic "Remove" is acceptable when context makes it obvious. - Focus management after dismiss — when a tag is removed, move focus to the next tag or to a logical ancestor so keyboard users are not left stranded on a removed element.