初投稿です

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は統合されるのかな？と思いつつも、

治ったからいいや！