Remove aria-controls from Service Navigation rendered toggle

This avoids the button to be listed in VoiceOver's rotor
if JavaScript doesn't run.

https://bugs.webkit.org/show_bug.cgi?id=300899

Author: romaricpascal

packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.mjs

@@ -49,12 +49,13 @@ export class ServiceNavigation extends Component {
       return this
     }
 
-    const menuId = $menuButton.getAttribute('aria-controls')
+    const menuId = $menuButton.getAttribute('data-aria-controls')
+
     if (!menuId) {
       throw new ElementError({
         component: ServiceNavigation,
         identifier:
-          'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`)'
+          'Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`data-aria-controls`)'
       })
     }
 
@@ -69,6 +70,7 @@ export class ServiceNavigation extends Component {
 
     this.$menu = $menu
     this.$menuButton = $menuButton
+    this.$menuButton.setAttribute('aria-controls', this.$menu.id)
 
     this.setupResponsiveChecks()
 

packages/govuk-frontend/src/govuk/components/service-navigation/service-navigation.puppeteer.test.js

@@ -109,7 +109,9 @@ describe('/components/service-navigation', () => {
         await expect(
           render(page, 'service-navigation', examples.default, {
             beforeInitialisation($root, { selector }) {
-              $root.querySelector(selector).removeAttribute('aria-controls')
+              $root
+                .querySelector(selector)
+                .removeAttribute('data-aria-controls')
             },
             context: {
               selector: toggleButtonSelector
@@ -119,7 +121,7 @@ describe('/components/service-navigation', () => {
           cause: {
             name: 'ElementError',
             message:
-              'govuk-service-navigation: Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`aria-controls`) not found'
+              'govuk-service-navigation: Navigation button (`<button class="govuk-js-service-navigation-toggle">`) attribute (`data-aria-controls`) not found'
           }
         })
       })
@@ -175,6 +177,15 @@ describe('/components/service-navigation', () => {
 
         expect(toggleExpandedAttribute).toBe('false')
       })
+
+      it('adds the `aria-controls` attribute to the toggle', async () => {
+        const toggleExpandedAttribute = await page.$eval(
+          toggleButtonSelector,
+          (el) => el.getAttribute('aria-controls')
+        )
+
+        expect(toggleExpandedAttribute).toBe('navigation')
+      })
     })
 
     describe('when toggle button is clicked once', () => {

packages/govuk-frontend/src/govuk/components/service-navigation/template.njk

@@ -37,7 +37,7 @@ data-module="govuk-service-navigation"
       {% if navigationItems | length or params.slots.navigationStart or params.slots.navigationEnd %}
         <nav aria-label="{{ params.navigationLabel | default(menuButtonText, true) }}" class="govuk-service-navigation__wrapper {%- if params.navigationClasses %} {{ params.navigationClasses }}{% endif %}">
           {% if collapseNavigationOnMobile %}
-          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="{{ navigationId }}" {%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden>
+          <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" data-aria-controls="{{ navigationId }}" {%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden>
             {{ menuButtonText }}
           </button>
           {% endif %}

packages/govuk-frontend/src/govuk/components/service-navigation/template.test.js

@@ -85,7 +85,7 @@ describe('Service Navigation', () => {
       const navId = $nav.attr('id')
 
       expect(navId).toBe('navigation')
-      expect($navToggle.attr('aria-controls')).toBe(navId)
+      expect($navToggle.attr('data-aria-controls')).toBe(navId)
     })
 
     it('omits empty items from the navigation', () => {
@@ -158,7 +158,7 @@ describe('Service Navigation', () => {
         const navId = $nav.attr('id')
 
         expect(navId).toBe('main-nav')
-        expect($navToggle.attr('aria-controls')).toBe(navId)
+        expect($navToggle.attr('data-aria-controls')).toBe(navId)
       })
     })