Why isn't Windows Narrator informing me there is a sub-menu?

I have aria-haspopup="true" and aria-expanded="true" on an html menu with sub-menu items, but the Windows Narrator doesn't mention that when the item gains keyboard focus?

Should it? If so, how can I fix it?

<!doctype html>
<html>
<body>
  <div>
    <nav aria-label="Menu">
      <ul role="menu" aria-haspopup="true" aria-expanded="true">
        <li role="none">
          <a tabindex="0" role="menuitem">
            <div>Dashboard</div>
          </a>
        </li>
        <li role="none">
          <a tabindex="0" role="menuitem">
            <div>Options</div>
            <div>
              <img src="_content/MyCompany.Blazor.Components/images/drop-down-icon.svg" alt="toggle"/>
            </div>
          </a>
          <ul role="menu" aria-expanded="true" aria-haspopup="true">
            <li role="none">
              <a tabindex="0" role="menuitem">
                <div>Sub menu option 1</div>
              </a>
            </li>
            <li role="none">
              <a tabindex="0" role="menuitem">
                <div>Sub menu option 2</div>
              </a>
            </li>
            <li role="none">
              <a tabindex="0" role="menuitem">
                <div>Sub menu option 3</div>
              </a>
            </li>
          </ul>
        </li>
        <li role="none">
          <a tabindex="0" role="menuitem">
            <div>Support</div>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</body>
</html>

Solution

I don't think there is a way to force screen readers (at least not Narrator or Voice Over) to announce something as a submenu. https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation doesn't treat the submenus triggers in any special way apart from announcing if they are expanded or collapsed. I did notice that the native OS context menus on MacOS do include the word "submenu" in the announcement of submenu triggers: "<submenu tigger title>, submenu", but either I'm missing something, or this is not encoded in web accessibility standards. You could manually add the word "submenu" to all of your submenu triggers to help give context. Try navigating to the "Options" item with Narrator in this code example to hear how it announces it.

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

<nav aria-label="Menu">
  <ul role="menu">
    <li role="menuitem">Dashboard</li>
    <li role="none">
      <button role="menuitem" aria-expanded="true" aria-haspopup="true">
        Options
        <span class="visually-hidden">submenu</span>
      </button>
      <ul role="menu">
        <li role="menuitem">
          <div>Sub menu option 1</div>
        </li>
      </ul>
    </li>
    <li role="menuitem">
      <div>Support</div>
    </li>
  </ul>
</nav>