bug: Keyboard Navigation Issues with gcds-nav-group Component

[Garry-08]

Prerequisites | Prérequis

• I have read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions.
• I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
• I have searched for existing issues that already report this problem, without success. | J’ai vérifié parmi les tickets (issues) existants que ce sujet n’avait pas déjà été soumis.

GC Design System Components Package and Version | Paquet et version des composants de Système de design GC

@cdssnc/gcds-components-vue, version 0.26.2

Current Behavior | Comportement observé

When using the gcds-nav-group component in a Nuxt. 3 app, keyboard navigation within dropdown menus malfunctions:

Premature Closure: When navigating using tab key and hit enter on the item to open, pressing Tab closes the dropdown ( items) unexpectedly, skipping child items.
Focus Issues: Focus does not loop correctly; Tab do not cycle through all dropdo

wn items.

Expected Behavior | Comportement attendu

When navigating to a navigation bar item () and pressing Enter, the dropdown menu () opens. Now, pressing the Tab key should navigate through the options within the dropdown but instead it closes the drop down. The dropdown should remain open until focus moves outside or the Escape key is pressed

System Info | Information sur le système

Browser: Chrome, Edge
Operating System: Windows 10
IDE: IntelliJ IDEA
Node.js Version: v20.12.2
npm Version: 10.5.0

Steps to Reproduce | Étapes pour reproduire le bogue

You can reproduce the issue by following the steps outlined in the Current Behavior section above.
Implementation Example:
Note: Initially, was used within , but replacing it with standard tags did not resolve the issue. Both approaches resulted in the same keyboard navigation problems.

  <gcds-nav-group
        :open-trigger="t('navigationBar.menu1.heading')"
        :menu-label="t('navigationBar.menu1.heading')"
      >
        <gcds-nav-link>
          <a href="/page1">{{ t('navigationBar.menu1.view') }}</a>
        </a>
        </gcds-nav-link>
        <gcds-nav-link>
          <a href="/page1/new">{{ t('navigationBar.menu1.add') }}</a>
        </a>
        </gcds-nav-link>
      </gcds-nav-group>

When Using Nuxt Link

<gcds-nav-group
  :open-trigger="t('navigationBar.menu1.heading')"
  :menu-label="t('navigationBar.menu1.heading')"
>
  <gcds-nav-link>
    <NuxtLink to="/page1">
      {{ t('navigationBar.menu1.view') }}
    </NuxtLink>
  </gcds-nav-link>
  <gcds-nav-link>
    <NuxtLink to="/page1/new">
      {{ t('navigationBar.menu1.add') }}
    </NuxtLink>
  </gcds-nav-link>
</gcds-nav-group>

Code Reproduction URL | URL de reproduction du code

No response

Additional Information | Informations supplémentaires

No response