Make screen readers (NDVA) announce menu items after login

I have created an accessible priority menu based on this example: https://www.codementor.io/@marys/flexbox-priority-navigation-1bussno6uj.

I have also added a login feature for three types of users. The nav component changes, showing the menu options based on who logs in. What is the best way to tell a blind or low-vision user that the menu has changed? I've implemented an aria-live region for the nav component, but NDVA quickly announced the menu text, which is not beneficial. I may be on the right track, but implemented it incorrectly.

Upon a successful login, users return to the index page where the menu items appear. Since this is a redirect, should NDVA start reading the page from the top and include the menu items? Sometimes, NDVA will announce the reflected menu items, and sometimes not. Is this acceptable, or can it be improved upon? How?

To view a demo, visit https://rpcorr-mega-menus-v2.netlify.app/about.html

To log in, use either "user1", "user2", or "user3". The password can be any value as it is currently not checked.

Nav element on logged out:

<nav id="menu" role="navigation">
<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li><a href="login.html">Login</a></li>
    <li id="menu-more" class="menu-item menu-item-has-children" style="display: none;">
      <a id="menuMoreLink" href="#" aria-label="More has a sub menu. Click enter to open"></a>
      <ul id="moreSubMenu" class="sub-menu" aria-expanded="false"></ul></li>
  </ul>
</div>
</nav>

Nav element when a user is signed in:

<nav id="menu" role="navigation">
  <div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
      <li><a href="index.html" aria-current="page">Home </a></li>
      <li><a href="about.html">About Us </a></li><li class="menu-item-has-children hover">
        <a href="#" aria-label="Blog has a sub menu. Click enter to open">Blog <i class="fa fa-angle-down"></i></a>
        <ul class="sub-menu" aria-expanded="false"><li>
          <a href="singleLayout.html">Single Layout</a></li></ul></li>
      <li><a href="portfolio.html">Portfolio </a></li>
      <li><a href="resources.html">Resources </a></li>
      <li><a href="contact.html">Contact </a></li>
      <li><a href="logout.html">Logout user3</a></li>
      <li id="menu-more" class="menu-item menu-item-has-children" style="display: none;">
        <a id="menuMoreLink" href="#" aria-label="More has a sub menu. Click enter to open"></a>
        <ul id="moreSubMenu" class="sub-menu" aria-expanded="false"></ul></li>
    </ul>
  </div>
</nav>

Since the page is reloaded (or redirected), as can be expected by submitting a form, one can expect contents to change. No announcement additional to what the screen reader does should be necessary.

You could provide a hint by naming the menu, though. This might indicate that the menu will change once logged in.

<nav id="menu" aria-label="Menu, you are not logged in">

The purpose of landmarks is to allow users to jump directly to them, so that’s already taken care of by the <nav> landmark when the page reloads.

Please note that the aria-expanded attribute must go on the trigger (button or link), not on the content that gets expanded:

<ul id="menu-main-menu" class="menu">
  <li><a href="login.html">Login</a></li>
  <li id="menu-more" class="menu-item menu-item-has-children">
    <a id="menuMoreLink" href="#"
       aria-label="More has a sub menu. Click enter to open"
       aria-expanded="false" aria-controls="moreSubMenu"></a>
    <ul id="moreSubMenu" class="sub-menu"></ul></li></ul>