fix(measurements): row is a div, not a nested button
Some checks failed
Deploy to GitHub Pages / build (push) Has been cancelled
Deploy to GitHub Pages / deploy (push) Has been cancelled

The side-panel measurement rows were <button> with a nested <button> for
delete, which HTML doesn't allow and Vite was warning about. Demote the
row to a focusable div with role=button + tabindex=0 + Enter/Space
handlers; keep the inner delete <button> with type=button. Same
keyboard a11y, no nesting violation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Samuel Prevost 2026-04-25 09:44:10 +02:00
parent 497e71d63c
commit e94a814335

View File

@ -1571,16 +1571,20 @@ watch(() => props.scalePxPerMm, () => { drawOverlay() })
>
No measurements yet. Pick a tool above and click on the image.
</div>
<button
<div
v-for="m in measurementSummaries"
:key="m.id"
class="group flex items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs transition-colors"
role="button"
tabindex="0"
class="group flex cursor-pointer items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
:class="
m.selected
? 'border-primary bg-primary/10'
: 'border-transparent hover:border-border hover:bg-muted'
"
@click="selectMeasurement(m.id)"
@keydown.enter.prevent="selectMeasurement(m.id)"
@keydown.space.prevent="selectMeasurement(m.id)"
>
<span
class="inline-block h-3 w-3 shrink-0 rounded-full border border-border"
@ -1593,6 +1597,7 @@ watch(() => props.scalePxPerMm, () => { drawOverlay() })
{{ m.label }}
</span>
<button
type="button"
class="ml-auto shrink-0 rounded p-0.5 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive"
:class="m.selected ? 'opacity-100' : ''"
title="Delete measurement"
@ -1613,7 +1618,7 @@ watch(() => props.scalePxPerMm, () => { drawOverlay() })
<path d="m6 6 12 12" />
</svg>
</button>
</button>
</div>
</div>
</div>
</div>