feat(board): inline delete confirmation + a11y polish
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:
parent
7292b11c0b
commit
f691f095dc
3 changed files with 81 additions and 24 deletions
|
|
@ -73,8 +73,11 @@
|
|||
:channels="channels"
|
||||
:tags="cooperativeTags"
|
||||
:editable="isAuthor(post)"
|
||||
:pending-delete="pendingDeleteId === post._id"
|
||||
@edit="handleEdit"
|
||||
@delete="handleDelete"
|
||||
@delete="requestDelete"
|
||||
@confirm-delete="confirmDelete"
|
||||
@cancel-delete="cancelDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -103,6 +106,7 @@ const activeTagFilter = ref(null)
|
|||
|
||||
const showForm = ref(false)
|
||||
const editingPost = ref(null)
|
||||
const pendingDeleteId = ref(null)
|
||||
|
||||
const currentMemberId = computed(() => memberData.value?._id || null)
|
||||
|
||||
|
|
@ -144,12 +148,18 @@ const handleEdit = (post) => {
|
|||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (post) => {
|
||||
if (typeof window === 'undefined') return
|
||||
const ok = window.confirm('Delete this post? This cannot be undone.')
|
||||
if (!ok) return
|
||||
const requestDelete = (post) => {
|
||||
pendingDeleteId.value = post._id
|
||||
}
|
||||
|
||||
const cancelDelete = () => {
|
||||
pendingDeleteId.value = null
|
||||
}
|
||||
|
||||
const confirmDelete = async (post) => {
|
||||
try {
|
||||
await deletePost(post._id)
|
||||
pendingDeleteId.value = null
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: 'Failed to delete post',
|
||||
|
|
@ -219,6 +229,10 @@ onMounted(async () => {
|
|||
border-style: solid;
|
||||
background: rgba(154, 116, 32, 0.08);
|
||||
}
|
||||
.new-post-btn:focus-visible {
|
||||
outline: 2px dashed var(--candle);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ---- TAGS DRAWER ---- */
|
||||
.tags-drawer-toggle {
|
||||
|
|
@ -242,6 +256,10 @@ onMounted(async () => {
|
|||
border-color: var(--candle-faint);
|
||||
color: var(--text);
|
||||
}
|
||||
.drawer-btn:focus-visible {
|
||||
outline: 2px dashed var(--candle);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.tag-count-badge {
|
||||
font-size: 9px;
|
||||
background: var(--candle-faint);
|
||||
|
|
@ -288,6 +306,11 @@ onMounted(async () => {
|
|||
color: var(--candle);
|
||||
background: rgba(154, 116, 32, 0.08);
|
||||
}
|
||||
.skills-bar .skill-tag:focus-visible,
|
||||
.more-btn:focus-visible {
|
||||
outline: 2px dashed var(--candle);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.more-btn {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 10px;
|
||||
|
|
@ -355,11 +378,14 @@ onMounted(async () => {
|
|||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.action-bar {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.tags-drawer-toggle {
|
||||
padding: 8px 20px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.skills-bar {
|
||||
padding: 10px 20px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.post-grid,
|
||||
.form-wrapper {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue