🦍

shadcn/uiのSidebarコンポーネントで発生するエラーの解決方法

2025/01/17に公開

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

https://github.com/shadcn-ui/ui/issues/5746

Discussion