打开Shadcn Sheet组件触发DialogContent警告的原因及解决方法求助

警告原因 #

Shadcn UI的Sheet组件底层是基于Dialog组件封装实现的，因此会继承Dialog的无障碍校验逻辑。即便你没有直接使用Dialog组件，控制台仍会触发针对DialogContent的警告，要求提供描述性内容以符合ARIA无障碍标准。

消除方法 #

有两种方式可以解决这个警告：

• 方式一：使用官方提供的SheetDescription组件
  在SheetContent内部添加SheetDescription组件，提供符合场景的描述文本，既满足无障碍要求，也能通过校验：

  <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">
      <SheetDescription>侧边栏导航菜单</SheetDescription>
      <div>
        <p>Sheet Content</p>
      </div>
    </SheetContent>
  </Sheet>
  

• 方式二：手动设置无障碍属性
  如果不需要显示可见的描述文本，可以直接给SheetContent添加aria-label属性，或者设置aria-describedby为一个任意字符串（无需对应页面元素）来绕过校验：

  // 使用aria-label
  <SheetContent side="right" className="fixed z-50" aria-label="侧边栏菜单" />
  
  // 或者使用aria-describedby
  <SheetContent side="right" className="fixed z-50" aria-describedby="unused-id" />
  

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