Tag input — accessibility

Keyboard

• Tab reaches each .acrm-tag-x button in order, then the text input; Enter or Space on the x removes that tag.
• In the input: Enter adds the draft as a tag (the screen must preventDefault so the form does not submit); Backspace on an empty draft removes the last tag (screen behaviour, as in the story).
• Esc is not handled by the DS; forms may use it to clear the draft.

ARIA

• The container is a plain <div>; no role. Name the input (aria-label or aria-labelledby to the Field label).
• Each remove button needs aria-label="Remove <tag>"; the icon is decorative.
• Announce additions and removals with a polite live region ("B2B added", "2 tags") — the DS provides none.
• Optionally expose the tag group as a list (role="list" on a wrapper, role="listitem" on .acrm-tag) so the count is read.

Focus

• Container ring on :focus-within (accent border + 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)), also while a remove button is focused.
• .acrm-tag-x is a <button>, so the foundation ring applies: outline: 2px solid var(--accent); outline-offset: 1px on :focus-visible.
• The inner input has outline: 0; the container ring is its only indicator.

Contrast

Computed from packages/ui/src/tokens/tokens.css:

• Tag text --ink-800 #1f2023 on --surface-75 #fbfbfb = 15.74:1 (light); #e1e2e4 on #161719 = 13.84:1 (dark).
• Remove glyph --fg-muted #98999c on --surface-75 = 2.75:1 (light); #717479 on #161719 = 3.82:1 (dark) — below 3:1 in light at rest; hover --ink-900 on --active-surface is well above.
• Tag border --border #eeeff1 on --surface-75 = 1.11:1 (light) — the tag is separated by fill more than by line.
• Input text --ink-900 = 17.59:1 (light), 13.09:1 (dark); placeholder --fg-muted = 2.85:1 / 3.27:1.

Known limits

• The remove glyph is below 3:1 at rest in light theme; its 17px hit area is small.
• No disabled or error style on the container.
• Add/remove feedback and the tag count are not announced unless the screen adds a live region.
• The remove button's size (17px) is under the 24px target recommendation; the row height (24px tag) bounds it.