初投稿です
shadcn/uiのsidebarコンポーネントを初めて使ってみたのですが、使用開始早々にエラーが。
画面をモバイル幅にすると非表示になるサイドバーを、SidebarTriggerで開くと..
terminal
console error
DialogContent requires a DialogTitle for the component to be accessible for screen reader users.
If you want to hide the DialogTitle, you can wrap it with our VisuallyHidden component.
DialogContents内にTitleを設定しろということですが、そもそもダイアログコンポーネントは使用してないはず...。
あれこれ探した結果
ui/sidebar.tsx
const Sidebar = React.forwardRef<
HTMLDivElement,
React.ComponentProps<"div"> & {
side?: "left" | "right";
variant?: "sidebar" | "floating" | "inset";
collapsible?: "offcanvas" | "icon" | "none";
}...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
if (isMobile) {
return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+ <SheetTitle className="hidden"></SheetTitle>
<SheetContent
data-sidebar="sidebar"
data-mobile="true"
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
style={
{
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
} as React.CSSProperties
}
side={side}
>
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>
);
}
これだけで解決しました
コンパイルの過程でDialogとSheetは統合されるのかな?と思いつつも、
治ったからいいや!