Added missing description to event creation dialog

components/calendar/category/Table.vue

@@ -2,8 +2,6 @@
 import type { Category } from "~/models/Category";
 import { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb } from "radix-vue"
 
-const { t } = useI18n()
-
 const { categories } = defineProps<{
   categories: Category[]
 }>()

components/calendar/dialog/QuickCreateEvent.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { PhPlus } from "@phosphor-icons/vue";
+import { VisuallyHidden } from "radix-vue";
 
 const isDialogOpen = ref<boolean>(false);
 const { resetSkeleton } = useCalendar();
@@ -49,6 +50,13 @@ const breakpoints = useBreakpoints(
       <UiDialogTitle class="max-md:mb-8">
         {{ $t("entity.calendar.event.addSingle") }}
       </UiDialogTitle>
+
+      <VisuallyHidden>
+        <UiDialogDescription>
+          {{ $t("entity.calendar.event.addSingleDescription") }}
+        </UiDialogDescription>
+      </VisuallyHidden>
+
       <CalendarFormCreateEvent @event-created="toggleDialog" />
     </UiDialogContent>
   </UiDialog>

components/calendar/state/monthly/Layout.vue

@@ -2,6 +2,7 @@
 import { useCalendar } from "~/stores/CalendarStore"
 import { useThrottleFn } from "@vueuse/core"
 import type { RPGDate } from "~/models/Date"
+import { VisuallyHidden } from "radix-vue"
 
 const { currentDate, decrementViewMonth, incrementViewMonth, resetSkeleton } = useCalendar()
 const { currentMonthData, operationInProgress, eventSkeleton } = storeToRefs(useCalendar())
@@ -84,6 +85,13 @@ function handleClosing() {
           <UiDialogTitle class="max-md:mb-8">
             {{ $t("entity.calendar.event.addSingle") }}
           </UiDialogTitle>
+
+          <VisuallyHidden>
+            <UiDialogDescription>
+              {{ $t("entity.calendar.event.addSingleDescription") }}
+            </UiDialogDescription>
+          </VisuallyHidden>
+
           <CalendarFormCreateEvent @event-created="toggleDialog" />
         </UiDialogContent>
       </UiDialog>

i18n/i18n.config.ts

@@ -201,6 +201,7 @@ export default defineI18nConfig(() => ({
             nameSingular: "Event",
             namePlural: "Events",
             addSingle: "Add an event",
+            addSingleDescription: "This will add the event to the calendar",
             newEvent: "New event",
             title: "Event title",
             isStart: "Start",
@@ -524,6 +525,7 @@ export default defineI18nConfig(() => ({
             nameSingular: "Évènement",
             namePlural: "Évènements",
             addSingle: "Ajouter un évènement",
+            addSingleDescription: "L'évènement sera ajouté au calendrier en cours",
             newEvent: "Nouvel évènement",
             title: "Titre de l'évènement",
             isStart: "Début",