DtChip: interactive defaults to false

TLDR #

Previously, every <dt-chip> without an explicit interactive prop rendered as a <button> with hover, focus, and pointer styles — even when the chip had no click handler and was purely decorative. This caused chips to appear clickable when they did nothing, which is misleading to users and a screen reader accessibility problem.

What Changed #

The close button on chips is unaffected — it always renders as a <button> regardless of interactive.

Migration #

Run the migration script from your project root:

npx dialtone-migrate-chip-interactive --cwd ./src

The script:

• Auto-adds :interactive="true" to chips that have a @click handler or a v-on object binding.
• Warns about chips with no interactive prop and no detected click handler — these need manual review.

Add --dry-run to preview changes without writing files. Add --yes to apply without prompting.

For chips flagged in warnings, decide:

• Display-only chip (no click handler, not keyboard-navigable) — no change needed. The chip now correctly renders as a <span>.
• Clickable chip (has @click, keyboard nav, or must be focusable) — add :interactive="true".

<!-- Before: rendered as <button> by default -->
<dt-chip>Label</dt-chip>

<!-- After: renders as <span> by default — correct for display-only chips -->
<dt-chip>Label</dt-chip>

<!-- Clickable chip — must opt in -->
<dt-chip :interactive="true" @click="onChipClick">Label</dt-chip>

Close Button #

The close button (showClose) is not affected by this change. A chip with showClose and interactive both at their defaults renders the chip body as a <span> and the close button as a <button>.

<!-- Close button always renders as <button> regardless of interactive -->
<dt-chip @close="onRemove">Label</dt-chip>