[Warning] - `aria-hidden` warning on Hero UI Select

[gihanrangana]

when i open the Select drop-down, there is a warning on the browser.

[linear[bot]]

ENG-2689 [Warning] - `aria-hidden` warning on Hero UI Select

[wingkwong]

which version? please provide a sandbox.

[gihanrangana]

"dependencies": {
        "@heroui/react": "^2.8.1",
        "@heroui/system": "^2.4.19",
        "@heroui/theme": "^2.4.19",
        "@internationalized/date": "^3.8.2",
        "axios": "^1.10.0",
        "date-fns": "^4.1.0",
        "es-toolkit": "^1.39.7",
        "framer-motion": "^12.18.1",
        "lodash": "^4.17.21",
        "react": "^19.1.0",
        "react-dom": "^19.1.0",
        "react-icons": "^5.5.0",
        "react-router-dom": "^7.6.2",
        "zod": "^4.0.5"
    },
    "devDependencies": {
        "@eslint/js": "^9.25.0",
        "@types/lodash": "^4.17.18",
        "@types/node": "^22.15.32",
        "@types/react": "^19.1.2",
        "@types/react-dom": "^19.1.2",
        "@vitejs/plugin-react": "^4.4.1",
        "autoprefixer": "^10.4.21",
        "eslint": "^9.25.0",
        "eslint-config-prettier": "^10.1.5",
        "eslint-plugin-import": "^2.32.0",
        "eslint-plugin-react-hooks": "^5.2.0",
        "eslint-plugin-react-refresh": "^0.4.19",
        "eslint-plugin-simple-import-sort": "^12.1.1",
        "globals": "^16.0.0",
        "postcss": "^8.5.6",
        "prettier": "^3.5.3",
        "sass": "^1.89.2",
        "tailwindcss": "^3.4.17",
        "typescript": "~5.8.3",
        "typescript-eslint": "^8.30.1",
        "vite": "^6.3.5"
    },

Usage

<Select label="Quotation" placeholder="Select a quotation" isRequired selectedKeys={new Set(['1'])}>
                    <SelectItem key="1">Quotation 1</SelectItem>
                    <SelectItem key="2">Quotation 2</SelectItem>
                </Select>

[wingkwong]

couldn't reproduce on vite-template with the given code. please provide a minimal reproducible sandbox instead.

also fyi these three packages shouldn't exist at the same time as @heroui/react already includes system and theme packages. You either need @heroui/react or @heroui/system + @heroui/theme + some individual packages (e.g. @heroui/select)

"@heroui/react": "^2.8.1",
"@heroui/system": "^2.4.19",
"@heroui/theme": "^2.4.19",

[KCFindstr]

I have the same issue as long as I put the Select inside an Modal:

      <Modal isOpen={true}>
        <ModalContent>
          <ModalBody>
            <Select className="max-w-xs" label="Select an animal">
              {animals.map((animal) => (
                <SelectItem key={animal.key}>{animal.label}</SelectItem>
              ))}
            </Select>
          </ModalBody>
        </ModalContent>
      </Modal>

Error:

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: <div.z-0 relative bg-transparent before:content-[''] before:hidden before:z-[-1] before:absolute before:rotate-45 before:w-2.5 before:h-2.5 before:rounded-sm data-[arrow=true]:before:block data-[placement=top]:before:-bottom-[calc(theme(spacing.5)/4_-1.5px)] data-[placement=top]:before:left-1/2 data-[placement=top]:before:-translate-x-1/2 data-[placement=top-start]:before:-bottom-[calc(theme(spacing.5)/4-1.5px)] data-[placement=top-start]:before:left-3 data-[placement=top-end]:before:-bottom-[calc(theme(spacing.5)/4-1.5px)] data-[placement=top-end]:before:right-3 data-[placement=bottom]:before:-top-[calc(theme(spacing.5)/4-1.5px)] data-[placement=bottom]:before:left-1/2 data-[placement=bottom]:before:-translate-x-1/2 data-[placement=bottom-start]:before:-top-[calc(theme(spacing.5)/4-1.5px)] data-[placement=bottom-start]:before:left-3 data-[placement=bottom-end]:before:-top-[calc(theme(spacing.5)/4-1.5px)] data-[placement=bottom-end]:before:right-3 data-[placement=left]:before:-right-[calc(theme(spacing.5)/4-2px)] data-[placement=left]:before:top-1/2 data-[placement=left]:before:-translate-y-1/2 data-[placement=left-start]:before:-right-[calc(theme(spacing.5)/4-3px)] data-[placement=left-start]:before:top-1/4 data-[placement=left-end]:before:-right-[calc(theme(spacing.5)/4-3px)] data-[placement=left-end]:before:bottom-1/4 data-[placement=right]:before:-left-[calc(theme(spacing.5)/4-2px)] data-[placement=right]:before:top-1/2 data-[placement=right]:before:-translate-y-1/2 data-[placement=right-start]:before:-left-[calc(theme(spacing.5)/4-3px)] data-[placement=right-start]:before:top-1/4 data-[placement=right-end]:before:-left-[calc(theme(spacing.5)/4-_3px)] data-[placement=right-end]:before:bottom-1/4 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 before:bg-content1 before:shadow-small> Ancestor with aria-hidden:

Reproduction sandbox: https://stackblitz.com/edit/m7av7rwg?file=App.jsx

[gihanrangana]

@KCFindstr did you found any solution for this?

[KCFindstr]

Nope, I'm just ignoring it since it's a warning 🫤

[aramayowil]

Tengo el mismo problema. Hay alguna solucion?

[yalogica]

Have the same problem with select inside modal.

[gihanrangana]

this issue is only getting for the dev environment only for me, once i build the project to production then the warning not appear.

[collin-cardon]

It also happens in Drawer components, or really any component that is positioned over the body.

The warning: "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."

It appears the aria-hidden attribute is on an element that is wrapped around an element that has focus, and the focus remains on that hidden element when we use a Select within a positioned component. The browser then ignores the aria-hidden attribute (hence the warning) in order to properly communicate back to the screen reader software which element actually has focus.

[gihanrangana]

@collin-cardon same for date-picker as well. the warning throws the any ware that select component is used

[LunaScapeAI]

Happening for me without being inside any parent component whatsoever... Been using HeroUI for over a year and am just now getting the error with all the same versions on a new project.

[AdamDemirel]

+1 for Select inside a Modal

[SergePogorelov]

+1 for Select inside a Drawer