VoiceOver首次聚焦下拉菜单项时朗读异常的ARIA问题排查

我基于WAI ARIA菜单按钮模式实现的下拉菜单，在VoiceOver中出现朗读异常：菜单按钮和导航时的单个菜单项朗读都符合预期，但菜单打开并首次聚焦第一项时朗读异常。

预期朗读内容应为类似「Apple，菜单项，菜单 4项」，但实际朗读为：「Apple，菜单项，菜单 Fruitsand 3个更多项 4项」——注意「Fruits」和「and」之间无空格，并非输入错误。

我曾尝试移除菜单自身的aria-labelledby属性以避免重复朗读，但问题仍存在。想请教我的语义或ARIA属性配置存在哪些问题？

实现的HTML代码 #

<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>

注：菜单导航由JS实现，仅提供HTML代码，问题应出在HTML结构中。

内容的提问来源于stack exchange，提问作者Norah