Improve the screen reader experience for the header menu

See alphagov/govuk-frontend#2427
surevine · Jan 29, 2022 · ff9319d · ff9319d
1 parent 5a7263f
commit ff9319d
Showing 1 changed file with 15 additions and 16 deletions.
diff --git a/src/govuk/components/header/index.js b/src/govuk/components/header/index.js
@@ -64,22 +64,21 @@ function Header(props) {
 
         {navigation ? (
           <>
-            <button
-              type="button"
-              className="govuk-header__menu-button govuk-js-header-toggle"
-              aria-controls="navigation"
-              aria-label={menuButtonLabel}
+            <nav
+              className={`govuk-header__navigation ${
+                navigationClassName || ''
+              }`}
+              aria-label={navigationLabel}
             >
-              Menu
-            </button>
-            <nav>
-              <ul
-                id="navigation"
-                className={`govuk-header__navigation ${
-                  navigationClassName || ''
-                }`}
-                aria-label={navigationLabel}
+              <button
+                type="button"
+                className="govuk-header__menu-button govuk-js-header-toggle"
+                aria-controls="navigation"
+                aria-label={menuButtonLabel}
               >
+                Menu
+              </button>
+              <ul id="navigation" className="govuk-header__navigation-list">
                 {navigation.map((item, index) => {
                   const {
                     active: itemActive,
@@ -177,8 +176,8 @@ function Header(props) {
 Header.defaultProps = {
   homepageUrlHref: '/',
   containerClassName: 'govuk-width-container',
-  navigationLabel: 'Navigation menu',
-  menuButtonLabel: 'Show or hide navigation menu',
+  navigationLabel: 'Menu',
+  menuButtonLabel: 'Show or hide menu',
 };
 
 export { Header };