Provide a general summary of the issue here

When using the react aria action menu with VoiceOver and Safari, there are multiple issues that emerge including:

• Broken navigation
• Menu autofocuses the first menu item, but fails to announce it
• Menu incorrectly announces number of menu items

Replication steps will be documented in the current behavior section.

Oddly, these issues only exist on Safari x VoiceOver x React Aria.

We also tested on:

• React spectrum ✅
• VoiceOver x Chrome (typically unrecommended, but worked 😅 )

We plan on testing on JAWs x Chrome once we procure a JAWs license too.

🤔 Expected Behavior?

Ideally, this should perform similarly to how it works on Chrome:

• Navigating between menu items should work smoothly without unexpected breaks, interruptions, or traps
• The first menu item should be announced when the menu is opened
• The menu should accurately count the number of menu items available

😯 Current Behavior

See above and replication steps 🙇

💁 Possible Solution

This may be a bug specific to Safari and VoiceOver, given these issues only emerge in this particular use case. Otherwise, I'm not sure how to begin debugging/fixing this 🙇

🔦 Context

We're currently testing working on releasing a design system that is compatible with popular screen reader and browser combinations. Safari x VoiceOver is among the combinations we are hoping to be able to release to.

🖥️ Steps to Reproduce

Using VoiceOver x Safari conduct the following tests

• Navigate to the first example on this page
• Open it using VO (typically ctrl opt ) and space
• Confirm the first menu item is not announced
  • If you can't open the menu with the VO command, try using space or enter to force it open
• Confirm the menu announces it has 7 items, when it only has 5
  • This may be including the heading rules unintentionally, but I'm not 100% sure
• Attempt to navigate up and down the menu using VO and Up/Down Arrow Keys
• Confirm this is difficult
  • If you get stuck, you can try to force enter the menu using Shift VO Down Arrow Key
• Using VO and Up Arrow Key, navigate to the top until you can't go any further
• Then, using VO and Down Arrow Key, attempt to navigate downwards
• Confirm you get trapped

Version

React Aria

What browsers are you seeing the problem on?

Safari

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

Northwestern Mutual

🕷 Tracking Issue

No response