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

45
app/components/BoardPostCard.vue
View file

@ -2,13 +2,18 @@
<article class="board-post">
<header class="post-header">
<span class="post-meta">{{ typeLabel }}</span>
<div v-if="editable" class="post-actions">
<div v-if="editable && !pendingDelete" class="post-actions">
<button type="button" class="action-btn" @click="$emit('edit', post)">Edit</button>
<button type="button" class="action-btn danger" @click="$emit('delete', post)">Delete</button>
</div>
<div v-else-if="editable && pendingDelete" class="post-actions confirm">
<span class="confirm-label">Delete?</span>
<button type="button" class="action-btn" @click="$emit('cancel-delete', post)">Cancel</button>
<button type="button" class="action-btn danger" @click="$emit('confirm-delete', post)">Confirm</button>
</div>
</header>
<h3 class="post-title">{{ post.title }}</h3>
<h2 class="post-title">{{ post.title }}</h2>
<div v-if="post.seeking" class="post-block">
<div class="block-label">Seeking</div>
@ -34,7 +39,7 @@
:alt="post.author.name"
class="author-avatar"
>
<span v-else class="author-avatar avatar-placeholder" />
<span v-else class="author-avatar avatar-placeholder" aria-hidden="true">{{ authorInitial }}</span>
<span class="author-name">{{ post.author ? post.author.name : 'Unknown' }}</span>
<span v-if="slackHandle" class="slack-handle-wrap">
<button
@ -76,9 +81,10 @@ const props = defineProps({
channels: { type: Array, default: () => [] },
tags: { type: Array, default: () => [] },
editable: { type: Boolean, default: false },
pendingDelete: { type: Boolean, default: false },
})
defineEmits(['edit', 'delete'])
defineEmits(['edit', 'delete', 'confirm-delete', 'cancel-delete'])
const capitalizeAvatar = (str) => {
if (str.toLowerCase() === 'wtf') return 'WTF'
@ -96,6 +102,11 @@ const authorAvatar = computed(() => {
const slackHandle = computed(() => props.post.author?.board?.slackHandle || '')
const authorInitial = computed(() => {
const name = props.post.author?.name || ''
return name.trim().charAt(0).toUpperCase() || '?'
})
const copied = ref(false)
const copySlackHandle = async () => {
if (!slackHandle.value) return
@ -171,6 +182,14 @@ const slackLinks = computed(() => {
.post-actions {
display: flex;
gap: 6px;
align-items: center;
}
.post-actions.confirm .confirm-label {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ember);
margin-right: 2px;
}
.action-btn {
font-family: "Commit Mono", monospace;
@ -191,6 +210,10 @@ const slackLinks = computed(() => {
color: var(--ember);
border-color: var(--ember);
}
.action-btn:focus-visible {
outline: 2px dashed var(--candle);
outline-offset: 2px;
}
.post-title {
font-family: "Brygada 1918", serif;
@ -262,7 +285,14 @@ const slackLinks = computed(() => {
object-fit: cover;
}
.avatar-placeholder {
background: var(--surface);
background: transparent;
border: 1px dashed var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--text-faint);
font-family: "Commit Mono", monospace;
}
.author-name {
font-size: 11px;
@ -286,6 +316,11 @@ const slackLinks = computed(() => {
.slack-handle:hover {
color: var(--candle);
}
.slack-handle:focus-visible,
.copy-link:focus-visible {
outline: 2px dashed var(--candle);
outline-offset: 2px;
}
.copy-link {
font-size: 11px;
font-family: "Commit Mono", monospace;