在shadcn/ui的Sheet中使用DropdownMenu触发aria-hidden无障碍错误

错误原因 #

这个错误的核心是：点击DropdownMenu触发按钮后，获得焦点的触发按钮的某个祖先元素被添加了aria-hidden="true"属性，而无障碍技术规范要求聚焦元素及其祖先不能被隐藏，浏览器因此阻止了该属性的设置。

shadcn的Sheet组件默认会给Sheet以外的页面内容添加aria-hidden，但DropdownMenu打开时的焦点管理逻辑和Sheet的无障碍处理发生了冲突——尤其是DropdownMenu使用非modal模式时，它依赖aria-hidden处理背景内容，导致焦点元素的祖先被错误标记。

解决方案 #

方案1：将DropdownMenu设置为modal模式

radix-ui（shadcn组件的底层依赖）的DropdownMenu支持modal属性，开启后会使用inert属性替代aria-hidden处理背景内容，完全符合错误提示里的建议，能彻底解决焦点冲突：

<DropdownMenu modal> {/* 添加modal属性 */}
  <DropdownMenuTrigger className="flex items-center">
    <EllipsisVertical />
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={editPerson} className="cursor-pointer">
      <UserPen />
      Edit Person
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-red-800 cursor-pointer" onClick={deletePersonAction}>
      <Trash2 />
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

方案2：优化Sheet的焦点管理

若不想开启DropdownMenu的modal模式，可调整Sheet的自动聚焦逻辑，确保焦点正确落在Sheet内的可聚焦元素上：

1. 移除SheetContent上的onOpenAutoFocus={(e) => e.preventDefault()}，让Sheet默认聚焦到内部第一个可聚焦元素（即DropdownMenuTrigger）；
2. 修正Sheet的状态同步逻辑：

<Sheet open={isOpen} onOpenChange={(open) => {
  if (!open) onClose();
}}>
  <SheetContent className="p-0 overflow-auto"> {/* 移除onOpenAutoFocus */}
    {/* 其余内容保持不变 */}
  </SheetContent>
</Sheet>

方案3：手动指定DropdownMenu的挂载容器

如果以上方案无效，可强制让DropdownMenu的内容挂载到body上，脱离Sheet的DOM层级，避免受到Sheet的aria-hidden影响：

<DropdownMenuContent portal={document.body}> {/* 指定挂载到body */}
  {/* 菜单项内容保持不变 */}
</DropdownMenuContent>

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