fix: Add missing menu styling for Safari

[frankieyan]

Short description

Ariakit's menu renders the menu list with a menubar role instead of menu in Safari due to a VoiceOver issue. As we leverage the role attribute for styling, this resulted in them not being applied.

Before	After

PR Checklist

• Added tests for bugs / new features
• Updated docs (storybooks, readme)
• Executed npm run validate and made sure no errors / warnings were shown
• Described changes in CHANGELOG.md
• Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
• Updated all static build artifacts (npm run build-all)

Versioning

Patch

[Bloomca]

Looks good.

I checked and it seems we don't use menubar in Todoist/Twist, so should work fine.

I checked other components in Safari, and all looks good as well. I found one small issue in Tooltip's story -- tab from the input will not focus the button, but hovering works.

[frankieyan]

@Bloomca do you mean this one?

It seems to work for me 👀 but I'm on Big Sur still, using Safari Technology Preview (Release 139 (Safari 15.4, WebKit 16613.1.14.41.2))

[Bloomca]

@frankieyan yes, that's the one. My Safari's version is Version 15.4 (17613.1.17.1.13)

I mostly mentioned so it is documented somewhere, not blocking 🙌

[frankieyan]

I updated both versions and can still tab to the button and show the tooltip 👀 the versions are:

• TP Release 146 (Safari 15.4, WebKit 16614.1.14.10.6)
• Version 15.5 (16613.2.7.1.9, 16613)

I'll maybe tag you once I pull this into TD to see if you still see the issue there 🙏