打开Shadcn Sheet组件触发Dialog无障碍错误，求原因及解决办法

原因 #

Shadcn UI的Sheet组件底层复用了Dialog组件的实现逻辑，所以即便你没有显式使用Dialog组件，SheetContent内部依然遵循Dialog的无障碍规范，要求必须提供标题元素以支持屏幕阅读器正常识别组件用途。

修复方案 #

有两种方式可以解决这个错误：

1. 显式添加SheetTitle组件 #

在SheetContent内部添加SheetTitle组件，这是最符合组件设计规范的方式，同时能明确告知屏幕阅读器组件的用途：

<Sheet open={openMenu} onOpenChange={setOpenMenu}>
  <SheetTrigger asChild>
    <Button variant="ghost">
      <MenuIcon color={location.pathname === "/" ? "white" : "black"} size="2em" />
    </Button>
  </SheetTrigger>
  <SheetContent side="right" className="fixed z-50">
    <SheetTitle>侧边菜单</SheetTitle>
    <div>
      <p>Sheet Content</p>
    </div>
  </SheetContent>
</Sheet>

2. 添加无障碍属性隐藏标题（无需显示可见标题时） #

如果不需要显示可见的标题，可以给SheetContent添加aria-label属性，直接指定组件的无障碍标签：

<Sheet open={openMenu} onOpenChange={setOpenMenu}>
  <SheetTrigger asChild>
    <Button variant="ghost">
      <MenuIcon color={location.pathname === "/" ? "white" : "black"} size="2em" />
    </Button>
  </SheetTrigger>
  <SheetContent side="right" className="fixed z-50" aria-label="侧边菜单">
    <div>
      <p>Sheet Content</p>
    </div>
  </SheetContent>
</Sheet>

内容的提问来源于stack exchange，提问作者Jasperan