memi-board 0.56.2 → 0.58.0

package/dist/runtime/components/ImageLightbox.vue

@@ -9,11 +9,77 @@ const props = defineProps<{
   images: string[]
 }>()
 
-const { t, dir } = useMemiBoardI18n()
+const { t, dir, formatNumber } = useMemiBoardI18n()
 const closeButton = ref<HTMLButtonElement | null>(null)
 const src = computed(() => props.images[index.value] ?? '')
 const multiple = computed(() => props.images.length > 1)
 
+const stage = ref<HTMLElement | null>(null)
+const natural = ref({ width: 0, height: 0 })
+const viewport = ref({ width: 0, height: 0 })
+const zoom = ref(1)
+const mode = ref<'fit' | 'manual'>('fit')
+const fitScale = computed(() => natural.value.width && viewport.value.width
+  ? Math.min(8, Math.max(1, viewport.value.width - 32) / natural.value.width, Math.max(1, viewport.value.height - 32) / natural.value.height)
+  : 1)
+const minScale = computed(() => Math.min(0.1, fitScale.value))
+const scale = computed(() => mode.value === 'fit' ? fitScale.value : zoom.value)
+const imageWidth = computed(() => Math.max(1, Math.round(natural.value.width * scale.value)))
+const imageHeight = computed(() => Math.max(1, Math.round(natural.value.height * scale.value)))
+const zoomLabel = computed(() => `${formatNumber(Math.round(scale.value * 100))}%`)
+let resizeObserver: ResizeObserver | undefined
+let pan: { x: number, y: number, left: number, top: number } | null = null
+let dragged = false
+
+watch(stage, (element) => {
+  resizeObserver?.disconnect()
+  if (!element) return
+  const measure = () => { viewport.value = { width: element.clientWidth, height: element.clientHeight } }
+  measure()
+  resizeObserver = new ResizeObserver(measure)
+  resizeObserver.observe(element)
+}, { flush: 'post' })
+
+function imageLoaded(event: Event) {
+  const image = event.target as HTMLImageElement
+  natural.value = { width: image.naturalWidth, height: image.naturalHeight }
+}
+async function setZoom(value: number) {
+  const element = stage.value
+  const centerX = element ? (element.scrollLeft + element.clientWidth / 2) / element.scrollWidth : 0.5
+  const centerY = element ? (element.scrollTop + element.clientHeight / 2) / element.scrollHeight : 0.5
+  zoom.value = Math.max(minScale.value, Math.min(8, value))
+  mode.value = 'manual'
+  await nextTick()
+  if (element) {
+    element.scrollLeft = centerX * element.scrollWidth - element.clientWidth / 2
+    element.scrollTop = centerY * element.scrollHeight - element.clientHeight / 2
+  }
+}
+function fitImage() {
+  mode.value = 'fit'
+  if (stage.value) { stage.value.scrollLeft = 0; stage.value.scrollTop = 0 }
+}
+function panStart(event: PointerEvent) {
+  if (event.pointerType !== 'mouse' || event.button !== 0 || !stage.value || scale.value <= fitScale.value) return
+  pan = { x: event.clientX, y: event.clientY, left: stage.value.scrollLeft, top: stage.value.scrollTop }
+  dragged = false
+  event.preventDefault()
+}
+function panMove(event: PointerEvent) {
+  if (!pan || !stage.value) return
+  const dx = event.clientX - pan.x, dy = event.clientY - pan.y
+  if (Math.abs(dx) + Math.abs(dy) > 5) {
+    dragged = true
+    if (!stage.value.hasPointerCapture(event.pointerId)) stage.value.setPointerCapture(event.pointerId)
+  }
+  stage.value.scrollLeft = pan.left - dx
+  stage.value.scrollTop = pan.top - dy
+}
+function panEnd() { pan = null }
+watch(src, () => { natural.value = { width: 0, height: 0 }; fitImage() })
+
+let returnFocus: HTMLElement | null = null
 let locked = false
 let touchX = 0
 let touchTracking = false
@@ -43,9 +109,21 @@ function close() {
 
 function onKeydown(event: KeyboardEvent) {
   if (!open.value) return
+  if (event.key === 'Tab') {
+    const dialog = closeButton.value?.closest('[role="dialog"]')
+    const buttons = dialog ? Array.from(dialog.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')) : []
+    const first = buttons[0], last = buttons.at(-1)
+    if (first && last && event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus() }
+    else if (first && last && !event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus() }
+    return
+  }
   const forward = dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight'
   const back = dir.value === 'rtl' ? 'ArrowRight' : 'ArrowLeft'
-  if (event.key === 'Escape') {
+  if (event.key === '+' || event.key === '=') { event.preventDefault(); void setZoom(scale.value * 1.25) }
+  else if (event.key === '-') { event.preventDefault(); void setZoom(scale.value / 1.25) }
+  else if (event.key === '0') { event.preventDefault(); void setZoom(1) }
+  else if (event.key.toLowerCase() === 'f') { event.preventDefault(); fitImage() }
+  else if (event.key === 'Escape') {
     event.preventDefault()
     close()
   }
@@ -60,7 +138,7 @@ function onKeydown(event: KeyboardEvent) {
 }
 
 function onTouchStart(event: TouchEvent) {
-  if (event.touches.length !== 1) {
+  if (event.touches.length !== 1 || scale.value > fitScale.value * 1.01) {
     touchTracking = false
     return
   }
@@ -81,16 +159,19 @@ function onTouchEnd(event: TouchEvent) {
 }
 
 function onBackdropClick(event: MouseEvent) {
+  if (dragged) { dragged = false; return }
   if (swiped) {
     swiped = false
     return
   }
-  if (event.target === event.currentTarget) close()
+  if (event.target === event.currentTarget || (event.target as HTMLElement).dataset.imageCanvas != null) close()
 }
 
 watch(open, (value) => {
   setLocked(value)
+  if (value) { returnFocus = document.activeElement as HTMLElement | null; natural.value = { width: 0, height: 0 }; fitImage() }
   if (value) void nextTick(() => closeButton.value?.focus())
+  else void nextTick(() => { if (returnFocus?.isConnected) returnFocus.focus() })
 })
 
 watch(() => props.images.length, (length) => {
@@ -105,6 +186,7 @@ watch(() => props.images.length, (length) => {
 
 onMounted(() => window.addEventListener('keydown', onKeydown))
 onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
   window.removeEventListener('keydown', onKeydown)
   setLocked(false)
 })
@@ -112,60 +194,46 @@ onBeforeUnmount(() => {
 
 <template>
   <Teleport to="body">
-    <div
-      v-if="open && src"
-      role="dialog"
-      aria-modal="true"
-      :aria-label="t('common.label.image')"
-      class="fixed inset-0 z-[80] flex items-center justify-center bg-black/90 p-3 outline-none sm:p-6"
-      @click="onBackdropClick"
-      @touchstart.passive="onTouchStart"
-      @touchend.passive="onTouchEnd"
-    >
-      <button
-        ref="closeButton"
-        type="button"
-        class="absolute end-3 top-3 z-10 flex size-10 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80"
-        :aria-label="t('common.action.close')"
-        @click="close"
-      >
-        <UIcon name="i-lucide-x" class="size-5" />
-      </button>
-
-      <button
-        v-if="multiple"
-        type="button"
-        class="absolute start-3 top-1/2 z-10 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80"
-        :aria-label="t('common.action.prev')"
-        @click="step(-1)"
-      >
-        <UIcon name="i-lucide-chevron-left" class="size-5 rtl:rotate-180" />
-      </button>
-
-      <img
-        :key="src"
-        :src="src"
-        :alt="t('common.label.image')"
-        class="max-h-full max-w-full object-contain select-none"
-        draggable="false"
-      >
-
-      <button
-        v-if="multiple"
-        type="button"
-        class="absolute end-3 top-1/2 z-10 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80"
-        :aria-label="t('common.action.next')"
-        @click="step(1)"
-      >
-        <UIcon name="i-lucide-chevron-right" class="size-5 rtl:rotate-180" />
-      </button>
-
-      <p
-        v-if="multiple"
-        class="pointer-events-none absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-black/60 px-3 py-1 text-sm tabular-nums text-white"
-      >
-        {{ index + 1 }} / {{ images.length }}
-      </p>
+    <div v-if="open && src" role="dialog" aria-modal="true" :aria-label="t('common.label.image')"
+      class="fixed inset-0 z-[80] flex flex-col bg-black/90 text-white outline-none">
+      <div class="flex shrink-0 items-start gap-1 p-2">
+      <div class="flex min-w-0 flex-1 flex-wrap items-center justify-center gap-1" role="toolbar" :aria-label="t('common.label.imageControls')">
+        <UTooltip :text="t('common.action.zoomOut')" :ui="{ content: 'z-[90]' }">
+          <button type="button" :aria-label="t('common.action.zoomOut')" :disabled="!natural.width || scale <= minScale" class="flex size-10 items-center justify-center rounded-full hover:bg-white/15 disabled:opacity-30" @click="setZoom(scale / 1.25)"><UIcon name="i-lucide-minus" class="size-5" /></button>
+        </UTooltip>
+        <output class="min-w-14 text-center text-sm tabular-nums" aria-live="polite">{{ zoomLabel }}</output>
+        <UTooltip :text="t('common.action.zoomIn')" :ui="{ content: 'z-[90]' }">
+          <button type="button" :aria-label="t('common.action.zoomIn')" :disabled="!natural.width || scale >= 8" class="flex size-10 items-center justify-center rounded-full hover:bg-white/15 disabled:opacity-30" @click="setZoom(scale * 1.25)"><UIcon name="i-lucide-plus" class="size-5" /></button>
+        </UTooltip>
+        <UTooltip :text="t('common.action.fitImage')" :ui="{ content: 'z-[90]' }">
+          <button type="button" :aria-label="t('common.action.fitImage')" :aria-pressed="mode === 'fit'" class="flex size-10 items-center justify-center rounded-full hover:bg-white/15" @click="fitImage"><UIcon name="i-lucide-scan" class="size-5" /></button>
+        </UTooltip>
+        <UTooltip :text="t('common.action.originalImage')" :ui="{ content: 'z-[90]' }">
+          <button type="button" :aria-label="t('common.action.originalImage')" class="h-10 rounded-full px-3 text-sm hover:bg-white/15" @click="setZoom(1)">100%</button>
+        </UTooltip>
+      </div>
+      <UTooltip :text="t('common.action.close')" :ui="{ content: 'z-[90]' }">
+        <button ref="closeButton" type="button" class="flex size-10 shrink-0 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80" :aria-label="t('common.action.close')" @click="close"><UIcon name="i-lucide-x" class="size-5" /></button>
+      </UTooltip>
+      </div>
+      <div ref="stage" role="region" tabindex="0" :aria-label="t('common.label.image')" class="min-h-0 flex-1 overflow-auto overscroll-contain outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/70" dir="ltr"
+        :class="scale > fitScale ? 'cursor-grab active:cursor-grabbing' : ''"
+        @click="onBackdropClick" @pointerdown="panStart" @pointermove="panMove" @pointerup="panEnd" @pointercancel="panEnd"
+        @touchstart.passive="onTouchStart" @touchend.passive="onTouchEnd">
+        <div data-image-canvas class="flex min-h-full min-w-full items-center justify-center p-4"
+          :style="{ width: `${imageWidth + 32}px`, height: `${imageHeight + 32}px` }">
+          <img :key="src" :src="src" :alt="t('common.label.image')" draggable="false"
+            class="shrink-0 select-none" :class="natural.width ? '' : 'invisible'"
+            :style="{ width: `${imageWidth}px`, height: `${imageHeight}px`, maxWidth: 'none', maxHeight: 'none' }" @load="imageLoaded">
+        </div>
+      </div>
+      <UTooltip v-if="multiple" :text="t('common.action.prev')" :ui="{ content: 'z-[90]' }">
+        <button type="button" class="absolute start-3 top-1/2 z-10 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80" :aria-label="t('common.action.prev')" @click="step(-1)"><UIcon name="i-lucide-chevron-left" class="size-5 rtl:rotate-180" /></button>
+      </UTooltip>
+      <UTooltip v-if="multiple" :text="t('common.action.next')" :ui="{ content: 'z-[90]' }">
+        <button type="button" class="absolute end-3 top-1/2 z-10 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80" :aria-label="t('common.action.next')" @click="step(1)"><UIcon name="i-lucide-chevron-right" class="size-5 rtl:rotate-180" /></button>
+      </UTooltip>
+      <p v-if="multiple" class="pointer-events-none absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-black/60 px-3 py-1 text-sm tabular-nums text-white">{{ index + 1 }} / {{ images.length }}</p>
     </div>
   </Teleport>
 </template>

package/dist/runtime/components/LikeButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMemiBoardAuth } from 'memi-board/runtime'
+import { useMemiBoardI18n, useMemiBoardAuth } from 'memi-board/runtime'
 import { useMemiBoardLikes } from 'memi-board/runtime'
 
 const props = defineProps<{
@@ -8,21 +8,24 @@ const props = defineProps<{
   likeCount: number
 }>()
 
+const { t } = useMemiBoardI18n()
 const { isSignedIn } = useMemiBoardAuth()
 const { isLiked, likePending, toggleLike } = useMemiBoardLikes(props.boardId, props.postId)
 </script>
 
 <template>
-  <UButton
-    v-if="isSignedIn"
-    icon="i-lucide-heart"
-    size="sm"
-    variant="ghost"
-    :color="isLiked ? 'error' : 'neutral'"
-    :label="String(likeCount ?? 0)"
-    :loading="likePending"
-    @click="toggleLike"
-  />
+  <UTooltip v-if="isSignedIn" :text="isLiked ? t('common.action.unlike') : t('common.action.like')" :delay-duration="200">
+    <UButton
+      icon="i-lucide-heart"
+      size="sm"
+      variant="ghost"
+      :color="isLiked ? 'error' : 'neutral'"
+      :label="String(likeCount ?? 0)"
+      :loading="likePending"
+      :aria-label="isLiked ? t('common.action.unlike') : t('common.action.like')"
+      @click="toggleLike"
+    />
+  </UTooltip>
   <span
     v-else
     class="flex items-center gap-1 text-sm text-muted"

package/dist/runtime/components/ListViewSwitch.vue

@@ -21,15 +21,15 @@ const options = computed<Array<{ label: string, value: BoardListView, icon: stri
 
 <template>
   <UFieldGroup>
-    <UButton
-      v-for="option in options"
-      :key="option.value"
-      :icon="option.icon"
-      :aria-label="option.label"
-      size="sm"
-      :color="modelValue === option.value ? 'primary' : 'neutral'"
-      :variant="modelValue === option.value ? 'solid' : 'outline'"
-      @click="emit('update:modelValue', option.value)"
-    />
+    <UTooltip v-for="option in options" :key="option.value" :text="option.label" :delay-duration="200">
+      <UButton
+        :icon="option.icon"
+        :aria-label="option.label"
+        size="sm"
+        :color="modelValue === option.value ? 'primary' : 'neutral'"
+        :variant="modelValue === option.value ? 'solid' : 'outline'"
+        @click="emit('update:modelValue', option.value)"
+      />
+    </UTooltip>
   </UFieldGroup>
 </template>

package/dist/runtime/components/Profile.vue

@@ -6,6 +6,8 @@ import MemiBoardProfileEditModal from './ProfileEditModal.vue'
 
 const props = defineProps<{
   uid: string
+  /** 본인 프로필의 수정 버튼 대신 표시할 호스트 계정 페이지 주소. */
+  accountTo?: string
 }>()
 
 const { profile, profilePending } = useMemiBoardUserProfile(() => props.uid)
@@ -84,7 +86,17 @@ const aiUsage = computed(() => {
         </p>
       </div>
       <UButton
-        v-if="isOwnProfile"
+        v-if="isOwnProfile && accountTo"
+        :to="accountTo"
+        :label="t('profile.myAccount')"
+        icon="i-lucide-user-round"
+        color="neutral"
+        variant="outline"
+        size="sm"
+        class="shrink-0"
+      />
+      <UButton
+        v-else-if="isOwnProfile"
         :label="t('common.action.edit')"
         icon="i-lucide-pencil"
         color="neutral"
@@ -125,7 +137,7 @@ const aiUsage = computed(() => {
   </div>
 
   <MemiBoardProfileEditModal
-    v-if="isOwnProfile"
+    v-if="isOwnProfile && !accountTo"
     v-model:open="editOpen"
     :uid="uid"
     :profile="profile"

package/dist/runtime/components/ProfileEditModal.vue

@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import { query, serverTimestamp, where, writeBatch, getDocs } from 'firebase/firestore'
 import { useFirestore } from 'vuefire'
-import { boardUserDoc, commentsCol, postsCol, useBoardPathConfig, useMemiBoardI18n } from 'memi-board/runtime'
+import { boardUserDoc, commentsCol, postsCol, useBoardPathConfig, useMemiBoardI18n, useMemiBoardModeration } from 'memi-board/runtime'
 import type { BoardUserModel } from 'memi-board/runtime'
 import { useMemiBoardStorage } from 'memi-board/storage'
 import MemiBoardAvatarCropModal from './AvatarCropModal.vue'
@@ -18,11 +18,13 @@ const emit = defineEmits<{ saved: [] }>()
 
 const db = useFirestore()
 const { t } = useMemiBoardI18n()
+const { checkText: checkName } = useMemiBoardModeration({ context: 'profile-name' })
 
 const displayName = ref('')
 const bio = ref('')
 const photoURL = ref<string | null>(null)
 const saving = ref(false)
+const checkingName = ref(false)
 const error = ref('')
 
 // 열릴 때마다 최신 프로필로 폼을 리셋 — 이전에 취소한 입력이 남아있지 않게.
@@ -128,6 +130,15 @@ async function onSave() {
   saving.value = true
   error.value = ''
   try {
+    if (trimmedName !== (props.profile?.displayName ?? '').trim()) {
+      checkingName.value = true
+      const review = await checkName(trimmedName)
+      checkingName.value = false
+      if (review.flagged || review.error) {
+        error.value = review.reason || t('profileEditModal.nameRejected')
+        return
+      }
+    }
     let nextPhotoURL = props.profile?.photoURL ?? null
     if (pendingAvatarFile) {
       avatarUploading.value = true
@@ -146,6 +157,7 @@ async function onSave() {
   }
   finally {
     saving.value = false
+    checkingName.value = false
     avatarUploading.value = false
   }
 }
@@ -155,6 +167,8 @@ async function onSave() {
   <UModal
     v-model:open="open"
     :title="t('profileEditModal.title')"
+    :dismissible="!saving"
+    :close="!saving"
     :ui="{ content: 'sm:max-w-md' }"
   >
     <template #body>
@@ -172,6 +186,7 @@ async function onSave() {
             variant="outline"
             size="sm"
             @click="avatarInput?.click()"
+            :disabled="saving"
           />
           <input
             ref="avatarInput"
@@ -182,11 +197,12 @@ async function onSave() {
           >
         </div>
 
-        <UFormField :label="t('profileEditModal.name')">
+        <UFormField :label="t('profileEditModal.name')" :help="t('profileEditModal.nameReviewHelp')">
           <UInput
             v-model="displayName"
             :placeholder="t('profileEditModal.name')"
             :maxlength="40"
+            :disabled="saving"
             class="w-full"
           />
         </UFormField>
@@ -196,6 +212,7 @@ async function onSave() {
             v-model="bio"
             :rows="3"
             :maxlength="200"
+            :disabled="saving"
             :placeholder="t('profileEditModal.bioPlaceholder')"
             class="w-full"
           />
@@ -224,7 +241,7 @@ async function onSave() {
           :loading="saving"
           @click="onSave"
         >
-          {{ t('common.action.save') }}
+          {{ checkingName ? t('profileEditModal.checkingName') : t('common.action.save') }}
         </UButton>
       </div>
     </template>

package/dist/runtime/components/ReportButton.vue

@@ -20,11 +20,11 @@ const props = defineProps<{
 }>()
 
 const { isSignedIn, user } = useMemiBoardAuth()
-const { t, locale, formatNumber } = useMemiBoardI18n()
+const { t, locale, formatNumber, formatRelativeDate } = useMemiBoardI18n()
 const reasonItems = computed(() =>
   REPORT_REASONS.map(item => ({ ...item, label: reportReasonLabel(item.value, locale.value) })),
 )
-const { hasReported, pending, submitReport } = useMemiBoardReports(props.boardId, props.postId)
+const { hasReported, report, reportPending, reportError, pending, submitReport } = useMemiBoardReports(props.boardId, props.postId)
 
 const open = ref(false)
 const reason = ref<BoardReportReason>('spam')
@@ -34,9 +34,10 @@ const done = ref(false)
 
 const isOwnPost = computed(() => !!user.value && user.value.uid === props.authorUid)
 const canReport = computed(() => isSignedIn.value && !isOwnPost.value)
+const statusLabel = computed(() => t(`reportButton.status.${report.value?.status ?? 'open'}`))
 
 function openModal() {
-  if (hasReported.value || pending.value) return
+  if (reportPending.value || reportError.value || pending.value) return
   reason.value = 'spam'
   detail.value = ''
   error.value = ''
@@ -70,15 +71,26 @@ async function submit() {
       size="sm"
       variant="ghost"
       :color="hasReported ? 'warning' : 'neutral'"
-      :label="hasReported ? t('reportButton.reported') : t('common.action.report')"
-      :disabled="hasReported"
+      :label="hasReported ? statusLabel : t('common.action.report')"
+      :disabled="reportPending || !!reportError || pending"
       @click="openModal"
     />
-    <UModal v-model:open="open" :title="t('reportButton.title')">
+    <p v-if="reportError" role="alert" class="text-xs text-error">{{ reportError }}</p>
+    <UModal v-model:open="open" :title="hasReported && !done ? t('reportButton.resultTitle') : t('reportButton.title')">
       <template #body>
         <div v-if="done" class="py-4 text-sm text-muted">
           {{ t('reportButton.done') }}
         </div>
+        <div v-else-if="hasReported && report" class="space-y-3 text-sm" role="status">
+          <p class="font-semibold text-highlighted">{{ statusLabel }}</p>
+          <p class="text-muted">{{ t(`reportButton.result.${report.status}`) }}</p>
+          <p v-if="report.reviewedAt" class="text-xs text-muted">{{ t('reportButton.reviewedAt') }}: {{ formatRelativeDate(report.reviewedAt, Date.now()) }}</p>
+          <div v-if="report.status !== 'open'" class="rounded-lg bg-muted p-3">
+            <p class="font-medium text-highlighted">{{ t('reportButton.reviewNote') }}</p>
+            <p class="mt-1 whitespace-pre-wrap break-words text-toned">{{ report.reviewNote || t('reportButton.noNote') }}</p>
+          </div>
+          <UButton color="neutral" variant="outline" :label="t('common.action.close')" @click="open = false" />
+        </div>
         <form
           v-else
           class="flex flex-col gap-3"
@@ -90,16 +102,13 @@ async function submit() {
             value-key="value"
             :legend="t('reportButton.reason')"
           />
-          <UTextarea
-            v-model="detail"
-            :rows="3"
-            :maxlength="REPORT_DETAIL_MAX_LENGTH"
-            :placeholder="t('reportButton.detailPlaceholder')"
-          />
+          <UFormField :label="reason === 'other' ? t('reportButton.detailRequired') : t('reportButton.detailPlaceholder')" :required="reason === 'other'">
+            <UTextarea v-model="detail" :rows="3" :maxlength="REPORT_DETAIL_MAX_LENGTH" :required="reason === 'other'" class="w-full" />
+          </UFormField>
           <p class="text-right text-xs text-dimmed">
             {{ formatNumber(detail.length) }} / {{ formatNumber(REPORT_DETAIL_MAX_LENGTH) }}
           </p>
-          <p v-if="error" class="text-xs text-error">
+          <p v-if="error" role="alert" class="text-xs text-error">
             {{ error }}
           </p>
           <div class="flex justify-end gap-2">