Accessible dialog name

This commit is contained in:
Alexis
2024-04-06 23:54:13 +02:00
parent 9df9049fdf
commit 017c257133
2 changed files with 16 additions and 2 deletions

View File

@@ -15,7 +15,6 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
<template> <template>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<!-- Implement decrementDate to account for other mods --> <!-- Implement decrementDate to account for other mods -->
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>

View File

@@ -1,6 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Button } from '@/components/ui/button' 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 { Input } from '@/components/ui/input'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group' import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
@@ -11,6 +17,7 @@ import { useCharacters } from '@/stores/characters'
import { useCalendarEvents } from '@/stores/events' import { useCalendarEvents } from '@/stores/events'
import { PhCaretDoubleDown, PhCaretDoubleUp, PhMagnifyingGlass } from '@phosphor-icons/vue' import { PhCaretDoubleDown, PhCaretDoubleUp, PhMagnifyingGlass } from '@phosphor-icons/vue'
import { useMagicKeys, useStorage, useTimeoutFn, whenever } from '@vueuse/core' import { useMagicKeys, useStorage, useTimeoutFn, whenever } from '@vueuse/core'
import { VisuallyHidden } from 'radix-vue'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { searchUnifier, type SearchMode } from '../Search' import { searchUnifier, type SearchMode } from '../Search'
import SearchList from './lists/SearchList.vue' import SearchList from './lists/SearchList.vue'
@@ -124,6 +131,14 @@ whenever(keys.control_period, () => {
'bottom-16': searchResults.length > 0 '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"> <div class="relative w-full h-fit">
<Input <Input
id="search" id="search"