Blocked aria-hidden on an element

[saijoro]

when I using a the drawer from shadcn, when i trigger the drawer using TriggerDrawer, then the state updates to true, But the error getting up and nothing happens.

For more info

I have started a vite react js project, by using tanstack start and that uses vinxi, along with tailwind and shadcn, Solve if possible.

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: button:

These are some snaps of the configs

[MhL5]

same issue, anyone found a good solution to this?
the issue is the trigger doesnt lose focus after drawer content pops up

im using this

  <DrawerTrigger
          onClick={(e) => {
            e.currentTarget.blur();
          }}
        >

[mustafaidk]

I am not sure if this is the correct way but it works for me

<Drawer open={openDrawer} onOpenChange={setOpenDrawer} autoFocus={openDrawer} />

or

<DrawerTrigger autoFocus={openDrawer} />

[Frankxhh]

nice bro

[dejoma]

Same issue with the component of shadcn.

For this, the autoFocus fix does not work. Haven't found any solution yet.
How to reproduce:

• Dialog with a component inside. Open dialog Click on the Select Close dialog (hit escape) Focus is left inside the dialog; if you do modal={false} on the dialog there is no issue.

[nullideas]

hey dejoma,

I found this solution which worked for me. found it on reddit made by @Aevil_15

https://www.reddit.com/r/nextjs/comments/1hnnbem/help_with_ariahidden_issue_in_dropdown_menu_and/

[boonyarit-iamsaard]

This work for me 👍

[dejoma]

I did find another solution:

<Popover open={open} onOpenChange={setOpen} modal={!usedInDialog}>

and having latest version of all radix packages

[Darius-htf]

Hey guys, found another solution to this problem, it won't relieve the accessibility warning, but it wouldn't prevent the click events on the UI elements

OrdersActions

Just keep it modular and scalable

import { Order } from "../../types/OrdersType";
import { OrderDetailsModal } from "./OrderDetailsModal";
import { useOrdersActions } from "../../hooks/useOrdersActions";
import { InvoicePreviewDrawer } from "./InvoicePreviewDrawer/InvoicePreviewDrawer";
import { OrdersActionsDropdown } from "./OrdersActionsDropdown";
import { useState } from "react";

interface OrdersActionsProps {
  order: Order;
}

export function OrdersActions({ order }: OrdersActionsProps) {
  const [openDropdown, setOpenDropdown] = useState(false);
  const {
    handleViewDetails,
    modalOpen,
    selectedOrder,
    setModalOpen,
    handleViewPDF,
    openPDFModal,
    setOpenPDFModal,
  } = useOrdersActions();

  return (
    <>
      <OrdersActionsDropdown
        open={openDropdown}
        onOpenChange={setOpenDropdown}
        onViewDetails={() => handleViewDetails(order)}
        onViewPDF={() => handleViewPDF(order)}
      />

      {/* Dialogs: Moved out for preventing to get closed */}
      <OrderDetailsModal
        onOpenChange={setModalOpen}
        open={modalOpen}
        order={selectedOrder}
      />

      <InvoicePreviewDrawer
        onOpenChange={setOpenPDFModal}
        open={openPDFModal}
        order={selectedOrder}
      />
    </>
  );
}

So before the applied solution, the opening of the modal and the drawer would cause the clicking event issue

And here's the solution for resolving it

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { FileText, Info, MoreHorizontal } from "lucide-react";

interface OrdersActionsDropdownProps {
  onViewDetails: () => void;
  onViewPDF: () => void;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function OrdersActionsDropdown({
  onViewDetails,
  onViewPDF,
  open,
  onOpenChange,
}: OrdersActionsDropdownProps) {
  const handleViewPDF = () => {
    onOpenChange(false);

    setTimeout(() => {
      onViewPDF();
    }, 50);
  };

  const handleViewDetails = () => {
    onOpenChange(false);

    setTimeout(() => {
      onViewDetails();
    }, 50);
  };

  return (
    <DropdownMenu open={open} onOpenChange={onOpenChange}>
      <DropdownMenuTrigger asChild>
        <Button
          onClick={() => onOpenChange(!open)}
          variant="ghost"
          className="h-8 w-8 p-0"
        >
          <span className="sr-only">Open menu</span>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>

        <DropdownMenuItem onClick={handleViewDetails}>
          <Info className="w-4 h-4" />
          View Details
        </DropdownMenuItem>

        <DropdownMenuItem onClick={handleViewPDF}>
          <FileText className="w-4 h-4" />
          PDF Preview
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Just added a bit of a delay before triggering details and pdf viewer, and boy it works, though you still have the aria-hidden warning, but I mean it works

[CoVanAn]

Well, I got that error too, and I learned that Instead of opening the Dialog immediately, we can try to delay the opening of the component a bit so that the browser has enough time to update the state of the DOM before adding aria-hidden. We can use requestAnimationFrame to delay the dialog from appearing.

[mehulambastha]

This worked for me! Thank you so so much! But on a more technical note, how does this work? What is causing the issue and how does requestAnimationFrame solve? Would be super cool if you could explain or point to any good resource for learning about this

[CoVanAn]

As I understand it, the error "Blocked aria-hidden on an element because its descendant retained focus..." occurs when you set aria-hidden="true" on a DOM element that contains content which the browser is still focusing on (like an input or button). Simply put, it's a conflict between hiding an element and keeping focus on it at the same time. So my approach is to use requestAnimationFrame, which allows the browser to complete the DOM update and rendering before proceeding with the state change.
Thanks!

[UlugbekAtakhanov]

In case when you want to use Dialog within DropdownMenu (shadcn components), Write like this ...</..>

[mehulambastha]

hey, i am facing this same issue, using Dialog inside DropdownMennu (shadcn) what do you mean by writing like ...</..> ? What should I change up?

[RKamey]

I had a similar issue while I was doing my task management app with shadcn/ui, and let me tell you, those Blocked aria-hidden warnings and the mysteriously frozen page were driving me nuts.

My setup was pretty standard: I had a Dialog acting as my main modal for a task form. Inside it, I put a Popover for a datepicker, which used shadcn/ui's Calendar. And to open that Dialog, I had Dropdown Menus on each task item in my list. It turns out, these components, while super helpful, can get a bit possessive about managing focus and what's "visible" to screen readers.

My first headache was with the Popover. Initially, I didn't even have modal set on my main Dialog, because I'd seen in a reddit forum that putting modal={true} on the Popover itself would get the calendar working. And it did! If I slapped modal={true} on it, the calendar finally worked, but then I'd get spammed with those aria-hidden warnings. It was like the Popover and the Dialog were fighting over who got to hide the background. But if I took modal={false} off, the warnings disappeared, but the calendar became completely unclickable. Adding className="pointer-events-auto" to the PopoverContent fixed that right up, letting licks actually register.

The solution here was to remove modal={true} from the Popover and ensure the main Dialog had modal set to true. This ensures only the primary modal handles the global focus trap. Then, to make the calendar clickable again, I added className="pointer-events-auto" to the PopoverContent. This cleared up the Popover warnings and made it fully interactive.

<Dialog open={isOpen} onOpenChange={handleClose} modal> {* <--- Main dialog is modal: handles global focus trap *}
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>
            {isEditing ? "Edit Task" : "Create New Task"}
          </DialogTitle>
          <DialogDescription>
            {isEditing
              ? "Modify the task details as needed."
              : "Fill in the details for your new task. Click save when you're ready."
            }
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="title">Title <span className="text-red-500">*</span></Label>
            <Input
              id="title"
              placeholder="Enter task title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="description">Description (optional)</Label>
            <Textarea
              id="description"
              placeholder="Add a description..."
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={3}
            />
          </div>

          <div className="space-y-2">
            <Label>Due Date (optional)</Label>
            <Popover modal={false} open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  className={cn(
                    "w-full justify-start text-left font-normal",
                    !dueDate && "text-muted-foreground"
                  )}
                  type="button"
                  onClick={() => setIsCalendarOpen(!isCalendarOpen)}
                >
                  <CalendarIcon className="mr-2 h-4 w-4" />
                  {dueDate ? format(dueDate, "PPP", { locale: es }) : "Select a date"}
                </Button>
              </PopoverTrigger>
              <PopoverContent
                className="w-auto p-0 pointer-events-auto" {* <--- This makes the Popover content (like the calendar) clickable *}
                align="start"
              >
                <Calendar
                  mode="single"
                  selected={dueDate}
                  onSelect={handleDateSelect}
                  aria-label="Calendar date picker"
                />
              </PopoverContent>
            </Popover>
            {dueDate && (
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={() => handleDateSelect(undefined)}
                className="text-muted-foreground hover:text-foreground"
              >
                Clear date
              </Button>
            )}
          </div>

          <div className="flex justify-end gap-2 pt-4">
            <Button
              type="button"
              className="cursor-pointer"
              variant="outline"
              onClick={handleClose}
              disabled={isSubmitting}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              className="cursor-pointer"
              disabled={!title.trim() || isSubmitting}
            >
              {isSubmitting
                ? (isEditing ? "Updating..." : "Creating...")
                : (isEditing ? "Update Task" : "Create Task")
              }
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>

This was an error I had, and this solution worked for me. Hopefully, it helps you too