Tag input

A text input that turns what you type into printed tags. Enter or a comma sets one down in the well; each tag is a key that takes itself away, and every change is spoken.

Type a word and press Enter or a comma. Backspace on an empty input removes the last; ← reaches the tags; a click takes one away. Paste a list.

• The input has a visible <label>, and the element is a role="group" named by it, so the tags and the input read as one field.
• Each tag is a real button whose name says what it does — “Remove print” — and clicking, Enter or Space on it removes it.
• Every change is spoken in a polite live region: what was added, what was removed, how many tags there are now, and what was refused (“print is already there”, “the limit is 3”).
• Only the input is in the tab order, so a long list is not a long Tab; ← from the start of the input, or Home and End on a tag, reach the tags.
• A refused duplicate nudges the tag that is already there. With reduced motion it presses down instead, and the live region says it either way.
• Tags keep the case they were typed in.