Fix mobile menu button submitting parent forms

The menu button didn’t have an explicit `type` set, which meant that it defaulted to `type=“submit”`.

This meant that if the header was inside a form (as it is in the Design System examples, but we can imagine other scenarios where this would be the case) clicking the menu button would submit the form.

In most cases this would also cause the page to reload, which closes the menu.

src/components/header/README.md

@@ -152,7 +152,7 @@ Find out when to use the header component in your service in the [GOV.UK Design
 
         <div class="govuk-header__content">
 
-        <button role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+        <button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
         <nav>
           <ul id="navigation" class="govuk-header__navigation " aria-label="Top Level Navigation">
 
@@ -257,7 +257,7 @@ Find out when to use the header component in your service in the [GOV.UK Design
           Service Name
         </a>
 
-        <button role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+        <button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
         <nav>
           <ul id="navigation" class="govuk-header__navigation " aria-label="Top Level Navigation">
 

src/components/header/template.njk

@@ -63,7 +63,7 @@
     {% endif %}
 
     {% if params.navigation %}
-    <button role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+    <button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
     <nav>
       <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
         {% for item in params.navigation %}

src/components/header/template.test.js

@@ -103,5 +103,15 @@ describe('header', () => {
       expect($firstItem.attr('href')).toEqual('#1')
       expect($firstItem.text()).toContain('Navigation item 1')
     })
+
+    describe('menu button', () => {
+      it('has an explicit type="button" so it does not act as a submit button', () => {
+        const $ = render('header', examples['with navigation'])
+
+        const $button = $('.govuk-header__menu-button')
+
+        expect($button.attr('type')).toEqual('button')
+      })
+    })
   })
 })