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>
<div class="flex items-center gap-2">
<!-- Implement decrementDate to account for other mods -->
<TooltipProvider :delayDuration="250">
<Tooltip>
<TooltipTrigger>

View File

@@ -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"