fix(useMobileMenu): remove invalid underscores from id and use global…

… id prefix HTML id's should not start with underscores.
patrickcate · Feb 25, 2024 · 6ed0dc8 · 6ed0dc8
1 parent d2fcf80
commit 6ed0dc8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/UsaHeader/UsaHeader.test.js b/src/components/UsaHeader/UsaHeader.test.js
@@ -124,12 +124,12 @@ describe('UsaHeader', () => {
       .should(
         'have.attr',
         'aria-controls',
-        '__vuswds-id-global-mobile-header-menu'
+        'vuswds-id-global-mobile-header-menu'
       )
 
     cy.get('nav.usa-nav')
       .as('nav')
-      .should('have.id', '__vuswds-id-global-mobile-header-menu')
+      .should('have.id', 'vuswds-id-global-mobile-header-menu')
 
     cy.get('@nav').should('not.have.class', 'is-visible').and('not.be.visible')
     cy.get('@nav').find('> div.usa-nav__inner').should('not.exist')

diff --git a/src/composables/useMobileMenu.js b/src/composables/useMobileMenu.js
@@ -1,9 +1,10 @@
 import { ref, readonly } from 'vue'
+import { ID_PREFIX } from '@/utils/constants.js'
 
 export const isMobileMenuOpen = /*#__PURE__*/ ref(false)
-export const menuId = /*#__PURE__*/ ref('__vuswds-id-global-mobile-header-menu')
 
 export function useMobileMenu(emit) {
+  const menuId = ref(`${ID_PREFIX}global-mobile-header-menu`)
   const mobileMenuOpenClass = 'usa-js-mobile-nav--active'
 
   const closeMobileMenu = () => {