Only set aria-controls when Service Navivation menu is visible

Works around an [issue with Voice Over where the button would still
show in the rotor on Mac](https://bugs.webkit.org/show_bug.cgi?id=300899)
by only setting the `aria-controls` attribute when the button is not `hidden`.

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`)'
       })
     }
 
@@ -126,9 +127,15 @@ export class ServiceNavigation extends Component {
     if (this.mql.matches) {
       this.$menu.removeAttribute('hidden')
       this.$menuButton.setAttribute('hidden', '')
+      // Voice Over keeps the button listed in its Form Controls rotor
+      // https://bugs.webkit.org/show_bug.cgi?id=300899
+      this.$menuButton.removeAttribute('aria-controls')
     } else {
       this.$menuButton.removeAttribute('hidden')
       this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString())
+      // Voice Over keeps the button listed in its Form Controls rotor
+      // https://bugs.webkit.org/show_bug.cgi?id=300899
+      this.$menuButton.setAttribute('aria-controls', this.$menu.id)
 
       if (this.menuIsOpen) {
         this.$menu.removeAttribute('hidden')

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 %}