shadcn/uiのSidebarで発生するDialogContentエラーの解決方法

はじめに

shadcn/uiの公式ドキュメントのSidebarテンプレートを使用した際に、モバイル画面でサイドバーを開くトリガーを押すと、以下のエラーが発生しました。

`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の公式リポジトリのissue #430で一時的に解消する方法を見つけている方がいました。

SheetTitle(またはDialogTitle)を一時的に利用し、それを隠すことで問題を解決できました。

修正したコード

修正箇所:components/ui/sidebar.tsx(201行目あたり)

• 修正前

  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}
        >
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    );
  }
  

• 修正後

  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 className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    );
  }
  

さいごに

一時的な措置ですが、エラーが解消できてよかったです！誰かの助けになると幸いです！