I have an list navigation item and for ADA compliance we have enabled navigation via the keyboard. On keydown with the enter button we want the user to be able to navigate to the currently focused target element. This works for items in the tertiary part of the list, but not the secondary items. My console statement is triggering and then nothing else happens and there are no JavaScript errors.

In the example below – Learning & Development does not have a link and never will, it is an anchor for the dropdown menu. Hitting Enter on Registered Products does not work, but DOES work on ZoneChoices.These items are rendered using VUE. The sample razer file with the vue calls is the first code section, followed by the rendered HTML.

<a href="@Model.Url" id="contextualSubNav_@(Model.ItemGuid)"
   v-on:click="toggleSubNav($event, 'contextualSubNav_@(Model.ItemGuid)')"
   v-on:keydown="keyDown($event, 'contextualSubNav_@(Model.ItemGuid)')"
   v-on:keydown.tab.shift="keydownBackTab($event, 'contextualSubNav_@(Model.ItemGuid)')"
   v-on:keydown.tab.exact="keydownTab($event, 'contextualSubNav_@(Model.ItemGuid)')">
   <span>@Model.Text</span>
   @if (Model.HasChildren)
   {
     <span id="contextualSubNav_@(Model.ItemGuid)" class="chevron bottom mobile-only"></span>
   }
 </a>

<ul aria-labelledby="contextualParentNav_ecb3956042bf4449a649f62461a0e5bb" data-context-id="contextualParentNav_ecb3956042bf4449a649f62461a0e5bb" class="contextual-nav__menu">
  <li data-nav-level="1" class="contextual-nav__item has-submenu js-has-submenu">
    <div class="contextual-nav__item-content is-active">
      <a id="contextualNav_a4673d64a3134551a7e61ed4116b744f" aria-expanded="true">Learning & Development<span class="chevron bottom"></span></a>
    </div> 
    <ul aria-labelledby="contextualNav_a4673d64a3134551a7e61ed4116b744f" data-context-id="contextualNav_a4673d64a3134551a7e61ed4116b744f" class="contextual-nav__secondary-menu is-active">
      <li class="contextual-nav__subitem">
        <div class="contextual-nav__item-content">
          <a href="/business-solutions/products" id="contextualSubNav_58dbefb92d944f3a92f6dfe7f5a7da08"><span>Registered Products</span> <span id="contextualSubNav_58dbefb92d944f3a92f6dfe7f5a7da08" class="chevron bottom mobile-only"></span></a>
         </div> 
         <ul aria-labelledby="contextualSubNav_58dbefb92d944f3a92f6dfe7f5a7da08" data-context-id="contextualSubNav_58dbefb92d944f3a92f6dfe7f5a7da08" class="contextual-nav__tertiary-menu">
           <li class="contextual-nav__subitem">
             <div class="contextual-nav__item-content">
               <a href="/business-solutions/products/zone-choices" id="contextualTertiaryNav_1482f6437ee2428b9d36836beaca39ef">Zone Choice</a>
             </div>
           </li>
        </ul>
      </li> 

JavaScript

keyDown: function (event, guid) {                
  if (event.which == KeyCode.enter ||
      event.which == KeyCode.space ||
      event.which == KeyCode.rightArrow) {
      event.preventDefault();

        if (guid.startsWith("contextualSubNav")) {
          this.toggleSubNav(event, guid);
        } else {
          this.toggle(event, guid);
        }
   } else if (event.which == KeyCode.leftArrow) {
       this.menuCloseSetFocus(event, guid);
   } else if (event.which == KeyCode.upArrow) {
     this.keydownBackTab(event, guid);
   } else if (event.which == KeyCode.downArrow) {
     this.keydownTab(event, guid);
   } else if (event.which == KeyCode.esc) {
     this.menuCloseSetFocus(event, guid);
   }
 },

toggle: function (event, uniqueid) {
  event.preventDefault();

  let subNavData = document.querySelector(`[data-context-id="${uniqueid}"]`);

  if (subNavData !== null) {
   if (event.target.id === uniqueid) {
      subNavData.classList.toggle(this.activeClass);
      subNavData.previousElementSibling.classList.toggle(this.activeClass);
      this.isActive = !this.isActive;

      let isMobile = document.documentElement.clientWidth < 1200;
      if (isMobile) {
        this.addOrRemoveChevronToggleClass(event, subNavData);
      }
    }
  } else {
     event.target.click(); //this is working for the tertiary item
  }
},
//toggles the secondary level with children
toggleSubNav: function (event, uniqueid) {
  event.preventDefault();
  let isMobile = document.documentElement.clientWidth < 1200;
  let subNavData = document.querySelector(`[data-context-id="${uniqueid}"]`);

  if (isMobile) {                            

     if (event.target.id === uniqueid) {
       subNavData.classList.toggle(this.activeClass);
                        
       subNavData.previousElementSibling.classList.toggle(this.activeClass);
       this.addOrRemoveChevronToggleClass(event, subNavData);
       subNavData.previousElementSibling.querySelector('a').focus();
     }
  } else {  //we are on desktop let's allow enter to click
  console.log("we should click: " + document.getElementById(uniqueid).getAttribute("href"))
 window.Location.href = document.getElementById(uniqueid).getAttribute("href");
 }

},