[menubar] Fix menubar ARIA structure to satisfy aria-required-children

[ZeeshanTamboli]

Closes #4004

Tested with Lighthouse

Before: https://base-ui.com/react/components/menubar

---

After: https://deploy-preview-4027--base-ui.netlify.app/react/components/menubar

---

Also, tested it with NVDA screen-reader and nothing is announced wrongly atleast to me.

Used aria-hidden even though it is visually hidden, because it doesn't have the following styles as mentioned in the docs:

`aria-hidden="true"` should not be added when:

- The HTML `hidden` attribute is present
- The element or the element's ancestor is hidden with `display: none`
- The element or the element's ancestor is hidden with `visibility: hidden`

[pkg-pr-new]

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4027
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4027
  

commit: 0dc1a14

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	🔺+17B(0.00%)	🔺+2B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	0dc1a14
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6989e4aea8ba090008270e6f
😎 Deploy Preview	https://deploy-preview-4027--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR updates FloatingPortal to add aria-hidden on the visually-hidden helper <span aria-owns=...> that’s rendered when focus guards are enabled. The goal is to keep the aria-owns relationship for accessibility tooling while preventing the helper element from being exposed to assistive tech and from triggering aria-required-children violations in consumers (e.g., Menubar structure checks).

Confidence Score: 4/5

• Mostly safe to merge once the aria-hidden attribute is fixed to a valid value.
• The change is small and localized, but the current JSX aria-hidden boolean renders an invalid ARIA value (aria-hidden=""), which should be corrected to an explicit string to ensure consistent accessibility behavior.
• packages/react/src/floating-ui-react/components/FloatingPortal.tsx

Important Files Changed

Filename	Overview
packages/react/src/floating-ui-react/components/FloatingPortal.tsx	Adds aria-hidden to a visually-hidden <span aria-owns> rendered alongside focus guards to avoid ARIA required-children violations.

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[atomiks]

This breaks the aria-owns association entirely and makes the element pointless. To give context, the element is necessary to preserve order when navigating between a trigger and its portaled popup using a virtual cursor (e.g. ctrl + option + left/right arrow with VoiceOver on Mac)

[ZeeshanTamboli]

This breaks the aria-owns association entirely and makes the element pointless. To give context, the element is necessary to preserve order when navigating between a trigger and its portaled popup using a virtual cursor (e.g. ctrl + option + left/right arrow with VoiceOver on Mac)

I thought so.. Then what do you propose to fix the ARIA error mentioned in the related issue? Or perhaps we should ignore it?

[atomiks]

Yeah I think it might be a "false positive", as it should also be erroring for the visually-hidden focus guards if any non-menuitem element isn't allowed.

[ZeeshanTamboli]

Yeah I think it might be a "false positive", as it should also be erroring for the visually-hidden focus guards if any non-menuitem element isn't allowed.

The focus-guards have aria-hidden already set.

[atomiks]

Oh right. I'm not sure how to fix it. We can leave it open if anyone has ideas.