VoiceOver not reading menu item properly on first focus within dropdown menu

Question

I can't figure out why VoiceOver isn't reading my dropdown menu properly (the dropdown menu is based on the WAI ARIA menu button pattern). It reads the menu button as expected, and individual items when navigating the menu - but not when the menu opens up, and focuses on the first item.

When the menu first opens and focuses on the first item - I expect something along the lines of "Apple, menu item, menu 4 items".

However, it reads: "Apple, menu item, menu Fruitsand 3 more items 4 items".

Which is obviously clunky. And it actually reads it without the space between "Fruits" and "and", that was not a typo on my part.

What am I doing wrong with the semantics or aria-attributes here? I've also tried removing the aria-labelledby on the menu itself, incase that caused some repitition.

<button
  id="trigger"
  aria-expanded="false"
  aria-haspopup="menu"
  aria-controls="list"
  type="button"
  >
  Fruits
</button>

<div
  id="list"
  role="menu"
  aria-orientation="vertical"
  aria-labelledby="trigger"
  tabindex="-1"
  >
  <div id="0" tabindex="-1" role="menuitem">Apple</div>
  <div id="1" tabindex="-1" role="menuitem">Banana</div>
  <div id="2" tabindex="-1" role="menuitem">Citrus</div>
  <div id="3" tabindex="-1" role="menuitem">Orange</div>
</div>

ps. I'm using JS to deal with the navigation, but only sharing the HTML as this should be an issue in the HTML structure.

Answer 1

Even if you use aria roles etc., I would still use the common (descriptive) HTML5 tags for the menu: <nav>, and within that <ul> and <li>s with <a> tags, not simply divs.