From 017c2571336919c15f9f00917250498d9f72380b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 6 Apr 2024 23:54:13 +0200
Subject: [PATCH] Accessible dialog name

---
 src/components/calendar/CalendarMenuNav.vue     |  1 -
 .../calendar/search/CalendarSearch.vue          | 17 ++++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/calendar/CalendarMenuNav.vue b/src/components/calendar/CalendarMenuNav.vue
index 6f9fa2e..bd1e153 100644
--- a/src/components/calendar/CalendarMenuNav.vue
+++ b/src/components/calendar/CalendarMenuNav.vue
@@ -15,7 +15,6 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
 <template>
   <div class="flex items-center gap-2">
     <!-- Implement decrementDate to account for other mods -->
-
     <TooltipProvider :delayDuration="250">
       <Tooltip>
         <TooltipTrigger>
diff --git a/src/components/calendar/search/CalendarSearch.vue b/src/components/calendar/search/CalendarSearch.vue
index 05994d4..10c2ad2 100644
--- a/src/components/calendar/search/CalendarSearch.vue
+++ b/src/components/calendar/search/CalendarSearch.vue
@@ -1,6 +1,12 @@
 <script lang="ts" setup>
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
@@ -11,6 +17,7 @@ import { useCharacters } from '@/stores/characters'
 import { useCalendarEvents } from '@/stores/events'
 import { PhCaretDoubleDown, PhCaretDoubleUp, PhMagnifyingGlass } from '@phosphor-icons/vue'
 import { useMagicKeys, useStorage, useTimeoutFn, whenever } from '@vueuse/core'
+import { VisuallyHidden } from 'radix-vue'
 import { computed, ref } from 'vue'
 import { searchUnifier, type SearchMode } from '../Search'
 import SearchList from './lists/SearchList.vue'
@@ -124,6 +131,14 @@ whenever(keys.control_period, () => {
         'bottom-16': searchResults.length > 0
       }"
     >
+      <VisuallyHidden>
+        <DialogTitle> Recherche avancée </DialogTitle>
+      </VisuallyHidden>
+      <VisuallyHidden>
+        <DialogDescription>
+          Rechercher les données disponibles sur le calendrier
+        </DialogDescription>
+      </VisuallyHidden>
       <div class="relative w-full h-fit">
         <Input
           id="search"