🦍
shadcn/uiのSidebarコンポーネントで発生するエラーの解決方法
shadcn/uiのSidebarコンポーネントをモバイル環境で使用する際、サイドバーを開くと以下のエラーメッセージが表示されます。(2025/01/17時点)
DialogContent requires a DialogTitle for the component to be accessible for screen reader users.
「DialogContentは、スクリーン・リーダー・ユーザーがアクセスできるようにするために、DialogTitleを必要とします。」
エラー詳細
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.
For more information, see https://radix-ui.com/primitives/docs/components/dialog
エラー内容
このエラーは、DialogContent内にDialogTitleが含まれていないため、スクリーンリーダーのユーザーにとってアクセシビリティが確保されていないことを示しています。
修正方法
shadcn/ui の Sidebar コンポーネントのモバイル表示部分に SheetTitle を追加し、視覚的に非表示にする必要があります。
- sidebar.tsx に
<SheetHeader/>
と<SheetTitle/>
を追加します。 -
<SheetHeader/>
は<SheetContent/>
内に追加してください。 -
sr-only
クラスを追加することで、視覚的に非表示にします。
sidebar.tsx
if (isMobile) {
return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<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}
>
{/* ここにSheetHeaderを追加 */}
<SheetHeader className="sr-only">
<SheetTitle>Sidebar</SheetTitle>
</SheetHeader>
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>
);
}
SheetTitleが追加され、sr-onlyクラスで視覚的に非表示にすることで、スクリーンリーダーには適切な情報が提供され、エラーが解消されます。
GitHub Issue
Discussion