Я получаю следующую ошибку в консоли JavaScript каждый раз, когда открываю компонент Shadcn Sheet
DialogContent
требуетDialogTitle
, чтобы компонент был доступен пользователям программ чтения с экрана.
Я в замешательстве, потому что я не использую какие-либо компоненты Dialog на своем листе. Так почему же это происходит и как исправить эту ошибку? Вот мой соответствующий код для компонента Sheet:
<Sheet open = {openMenu} onOpenChange = {setOpenMenu}>
<SheetTrigger asChild>
<Button variant = "ghost">
<MenuIcon color = {location.pathname === "/" ? "white" : "black"} size = "2em" />
</Button>
</SheetTrigger>
<SheetContent side = "right" className = "fixed z-50">
<div >
<p>Sheet Content</p>
</div>
</SheetContent>
</Sheet>
Компонент Shadcn Sheet является расширением компонента Dialog, поэтому <SheetContent>
требует <SheetTitle>
так же, как обычный компонент Dialog требует . Просто добавьте заголовок листа под содержимым листа, и ошибка исчезнет.
<SheetContent side = "right">
<SheetTitle>Menu</SheetTitle> // Add a Sheet title
</SheetContent>
Если вы не хотите, чтобы заголовок отображался в вашем приложении, используйте компонент radixUI VisuallyHidden следующим образом:
<SheetTitle>
<VisuallyHidden.Root>
Menu
</VisuallyHidden.Root>
</SheetTitle>