Use aria-hidden to mask Service Navigation toggle from VoiceOver

`aria-expanded` and `aria-controls` make VoiceOver keep the button
visible in its rotor, so we add `aria-hidden` as a complement to `hidden`.

This is prefered to manually adding and removing each of `aria-expanded` and `aria-controls`
as we'd need to remember their value when resetting them. It also future proofs in case other `aria`
attributes make VoiceOver keep the button in the rotor.

Author: romaricpascal

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

@@ -127,9 +127,9 @@ export class ServiceNavigation extends Component {
 
     if (this.mql.matches) {
       this.$menu.removeAttribute('hidden')
-      this.$menuButton.setAttribute('hidden', '')
+      setAttributes(this.$menuButton, attributesForHidingButton)
     } else {
-      this.$menuButton.removeAttribute('hidden')
+      removeAttributes(this.$menuButton, Object.keys(attributesForHidingButton))
       this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString())
 
       if (this.menuIsOpen) {
@@ -158,3 +158,39 @@ export class ServiceNavigation extends Component {
    */
   static moduleName = 'govuk-service-navigation'
 }
+
+/**
+ * Collection of attributes that needs setting on a `<button>`
+ * to fully hide it, both visually and from screen-readers,
+ * and prevent its activation while hidden
+ */
+const attributesForHidingButton = {
+  hidden: '',
+  // Fix button still appearing in VoiceOver's form control's menu despite being hidden
+  // https://bugs.webkit.org/show_bug.cgi?id=300899
+  'aria-hidden': 'true'
+}
+
+/**
+ * Sets a group of attributes on the given element
+ *
+ * @param {Element} $element - The element to set the attribute on
+ * @param {{[attributeName: string]: string}} attributes - The attributes to set
+ */
+function setAttributes($element, attributes) {
+  for (const attributeName in attributes) {
+    $element.setAttribute(attributeName, attributes[attributeName])
+  }
+}
+
+/**
+ * Removes a list of attributes from the given element
+ *
+ * @param {Element} $element - The element to remove the attributes from
+ * @param {string[]} attributeNames - The names of the attributes to remove
+ */
+function removeAttributes($element, attributeNames) {
+  for (const attributeName of attributeNames) {
+    $element.removeAttribute(attributeName)
+  }
+}

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

@@ -169,6 +169,15 @@ describe('/components/service-navigation', () => {
         expect(buttonHiddenAttribute).toBeFalsy()
       })
 
+      it('does not add an `aria-hidden` attribute to the button for Voice Over', async () => {
+        const buttonHiddenAttribute = await page.$eval(
+          toggleButtonSelector,
+          (el) => el.hasAttribute('aria-hidden')
+        )
+
+        expect(buttonHiddenAttribute).toBeFalsy()
+      })
+
       it('renders the toggle button with `aria-expanded` set to false', async () => {
         const toggleExpandedAttribute = await page.$eval(
           toggleButtonSelector,
@@ -277,6 +286,15 @@ describe('/components/service-navigation', () => {
 
           expect(buttonHiddenAttribute).toBeTruthy()
         })
+
+        it('adds an `aria-hidden` attribute for Voice Over', async () => {
+          const buttonHiddenAttribute = await page.$eval(
+            toggleButtonSelector,
+            (el) => el.getAttribute('aria-hidden')
+          )
+
+          expect(buttonHiddenAttribute).toBe('true')
+        })
       })
 
       describe('when page is resized to a narrow viewport', () => {
@@ -312,6 +330,15 @@ describe('/components/service-navigation', () => {
 
           expect(buttonHiddenAttribute).toBeFalsy()
         })
+
+        it('removes the `aria-hidden` attribute on the toggle', async () => {
+          const buttonHiddenAttribute = await page.$eval(
+            toggleButtonSelector,
+            (el) => el.hasAttribute('aria-hidden')
+          )
+
+          expect(buttonHiddenAttribute).toBeFalsy()
+        })
       })
     })
   })