Align how we access the menu element with the checkboxes and radios

See: 266f877
alphagov · Sep 22, 2023 · d41d913 · d41d913
1 parent 9b7b370
commit d41d913
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -61,9 +61,16 @@ export class Header extends GOVUKFrontendComponent {
       return this
     }
 
-    const $menu = $module.querySelector(
-      `#${$menuButton.getAttribute('aria-controls')}`
-    )
+    const menuId = $menuButton.getAttribute('aria-controls')
+    if (!menuId) {
+      throw new ElementError($menuButton, {
+        componentName: 'Header',
+        identifier: '$menuButton["aria-controls"]',
+        expectedType: 'string'
+      })
+    }
+
+    const $menu = document.getElementById(menuId)
 
     if (!($menuButton instanceof HTMLElement)) {
       throw new ElementError($menu, {

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/header/header.puppeteer.test.js
@@ -230,6 +230,23 @@ describe('Header navigation', () => {
         })
       })
 
+      it("throws when the toggle's aria-control attribute is missing", async () => {
+        await expect(
+          renderAndInitialise(page, 'header', {
+            params: examples['with navigation'],
+            beforeInitialisation($module) {
+              $module
+                .querySelector('.govuk-js-header-toggle')
+                .removeAttribute('aria-controls')
+            }
+          })
+        ).rejects.toEqual({
+          name: 'ElementError',
+          message:
+            'Header: $menuButton["aria-controls"] is not of type "string"'
+        })
+      })
+
       it('throws when the menu is missing, but a toggle is present', async () => {
         await expect(
           renderAndInitialise(page, 'header', {