jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(board): inline delete confirmation + a11y polish
Some checks failed
Test / vitest (push) Failing after 6m2s
Details
Test / playwright (push) Has been skipped
Details
Test / visual (push) Has been skipped
Details
Test / Notify on failure (push) Successful in 2s
Details

Browse source 
Replace window.confirm with an inline Delete? / Cancel / Confirm flow on
post cards. Add focus-visible outlines, initials in avatar placeholders,
and promote post/form titles from h3 to h2 for heading order.
This commit is contained in:
Jennie Robinson Faber 2026-04-14 22:15:50 +01:00
parent 7292b11c0b
commit f691f095dc
3 changed files with 81 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/components/BoardPostForm.vue
View file

@ -1,7 +1,7 @@
<template>
<form class="post-form" @submit.prevent="handleSubmit">
<div class="form-header">
<h3 class="form-title">{{ isEdit ? 'Edit post' : 'New post' }}</h3>
<h2 class="form-title">{{ isEdit ? 'Edit post' : 'New post' }}</h2>
<p class="form-hint">Fill in <em>Seeking</em> or <em>Offering</em> (or both).</p>
</div>
@ -139,7 +139,7 @@ function handleSubmit() {
.post-form {
border: 1px dashed var(--border);
padding: 14px 16px;
background: var(--bg);
background: transparent;
}
.form-header {
@ -204,14 +204,6 @@ function handleSubmit() {
border-color: var(--candle);
}
.char-count {
font-size: 9px;
font-family: "Commit Mono", monospace;
color: var(--text-faint);
text-align: right;
margin-top: 2px;
}
.pill-grid {
display: flex;
flex-wrap: wrap;
@ -220,11 +212,11 @@ function handleSubmit() {
.pill {
display: inline-flex;
align-items: center;
padding: 2px 9px;
padding: 2px 8px;
border: 1px dashed var(--border);
background: transparent;
color: var(--text-faint);
font-size: 11px;
font-size: 10px;
font-family: "Commit Mono", monospace;
cursor: pointer;
user-select: none;
@ -241,6 +233,10 @@ function handleSubmit() {
border-color: var(--candle);
border-style: solid;
}
.pill:focus-visible {
outline: 2px dashed var(--candle);
outline-offset: 2px;
}
.form-error {
font-size: 11px;