sam1902/Skwik
sam1902/Skwik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/CorrectedImageViewer.vue
View File

@ -1571,16 +1571,20 @@ watch(() => props.scalePxPerMm, () => { drawOverlay() })
> >
No measurements yet. Pick a tool above and click on the image. No measurements yet. Pick a tool above and click on the image.
</div> </div>
<button <div
v-for="m in measurementSummaries" v-for="m in measurementSummaries"
:key="m.id" :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=" :class="
m.selected m.selected
? 'border-primary bg-primary/10' ? 'border-primary bg-primary/10'
: 'border-transparent hover:border-border hover:bg-muted' : 'border-transparent hover:border-border hover:bg-muted'
" "
@click="selectMeasurement(m.id)" @click="selectMeasurement(m.id)"
@keydown.enter.prevent="selectMeasurement(m.id)"
@keydown.space.prevent="selectMeasurement(m.id)"
> >
<span <span
class="inline-block h-3 w-3 shrink-0 rounded-full border border-border" class="inline-block h-3 w-3 shrink-0 rounded-full border border-border"
@ -1593,6 +1597,7 @@ watch(() => props.scalePxPerMm, () => { drawOverlay() })
{{ m.label }} {{ m.label }}
</span> </span>
<button <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="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' : ''" :class="m.selected ? 'opacity-100' : ''"
title="Delete measurement" title="Delete measurement"
@ -1613,7 +1618,7 @@ watch(() => props.scalePxPerMm, () => { drawOverlay() })
<path d="m6 6 12 12" /> <path d="m6 6 12 12" />
</svg> </svg>
</button> </button>
</button> </div>
</div> </div>
</div> </div>
</div> </div>