01 · Before and afterThe pattern
// trigger is a div so the chip's remove can be a real <button>
<div role="button" tabIndex={disabled ? -1 : 0} aria-disabled={disabled}
onClick={(e) => { if ((e.target as HTMLElement).closest('[data-no-open]')) return; e.preventDefault(); open(); }}
onKeyDown={(e) => { if (e.target !== e.currentTarget) return; if (e.key === 'Enter' || e.key === ' ') open(); }}>
{label}<button type="button" data-no-open onClick={onRemove} aria-label={`Remove ${label}`}>×</button>
</div>02 · Run it on your appThe check
Can a keyboard-only user remove a chip or tag in your UI without opening the menu it sits in?
If the honest answer is no or not sure, this is worth a look before it reaches production.