Merge pull request #545 from govau/feature/revert-main-nav-active-ite…

…m-to-link Revert main nav active item to link
govau · Nov 15, 2018 · 8b113ba · 8b113ba
2 parents 716364a + b8395b9
commit 8b113ba
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 31 deletions.
diff --git a/packages/main-nav/CHANGELOG.md b/packages/main-nav/CHANGELOG.md
@@ -15,6 +15,7 @@
 
 ## Versions
 
+* [v1.0.0 - Wrap active item in main-nav in an `<a>` and add `aria-current="page"`](#v100)
 * [v0.2.0 - Active items are no longer wrapped in `<a>` for accessibility](#v020)
 * [v0.1.4 - Fix passing props to main nav react component](#v014)
 * [v0.1.3 - Added an aria-label attribute to the nav element](#v013)
@@ -28,6 +29,11 @@
 
 ## Release History
 
+### v1.0.0
+
+- Wrap active item in main-nav in an `<a>` and add `aria-current="page"`
+
+
 ### v0.2.0
 
 - Active items are no longer wrapped in `<a>` for accessibility

diff --git a/packages/main-nav/README.md b/packages/main-nav/README.md
@@ -235,6 +235,7 @@ The visual test: https://uikit.service.gov.au/packages/main-nav/tests/site/
 
 ## Release History
 
+* v1.0.0 - Wrap active item in main-nav in an `<a>` and add `aria-current="page"`
 * v0.2.0 - Active items are no longer wrapped in `<a>` for accessibility
 * v0.1.4 - Fix passing props to main nav react component
 * v0.1.3 - Added an aria-label attribute to the nav element

diff --git a/packages/main-nav/package.json b/packages/main-nav/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gov.au/main-nav",
-	"version": "0.2.0",
+	"version": "1.0.0",
 	"description": "Horizontal list of links to key areas on the website. Usually located in the header.",
 	"keywords": [
 		"uikit",

diff --git a/packages/main-nav/src/js/react.js b/packages/main-nav/src/js/react.js
@@ -33,12 +33,17 @@ const AUmainNavMenu = ({ items, linkComponent }) => {
 	// Generate the menu
 	const GenerateMenu = ( items ) => {
 		const menu = items.map( item => {
-			const link = {
-				link: item.active ? '' : item.link,
-				text: item.active ? <span>{ item.text }</span> : item.text,
+			const link =  item.active ? {
+				link: item.link,
+				text: item.text,
+				'aria-current': 'page',
 				li: {
-					className: item.active ? 'active' : '',
+					className: 'active',
 				},
+			} :
+			{
+				link: item.link,
+				text: item.text,
 			};
 
 			// return the link, maybe with children

diff --git a/packages/main-nav/src/sass/_module.scss b/packages/main-nav/src/sass/_module.scss
@@ -21,17 +21,13 @@
 	color: $AU-color-foreground-text;
 
 	a,
-	.active > span,
 	.au-main-nav__toggle {
 		@include AU-space( padding, 1unit );
 		@include AU-fontgrid( xs );
 		@include AU-focus();
 		color: $AU-color-foreground-action;
 		text-decoration: none;
-	}
 
-	a,
-	.au-main-nav__toggle {
 		&:hover {
 			text-decoration: underline;
 			text-decoration-skip: ink;
@@ -40,15 +36,18 @@
 		}
 	}
 
-	a,
-	.active > span {
+	a {
 		display: block;
 	}
 
 
-	.active > span {
+	.active a {
 		font-weight: bold;
 		color: $AU-color-foreground-text;
+
+		&:hover {
+			border-color: $AU-color-background-shade;
+		}
 	}
 
 	// Reset menus inside main-nav
@@ -77,8 +76,12 @@
 			}
 		}
 
-		.active > span {
+		.active a {
 			border-color: $AU-color-background-alt;
+
+			&:hover {
+				border-color: $AU-color-background-alt-shade;
+			}
 		}
 	}
 
@@ -98,9 +101,13 @@
 			}
 		}
 
-		.active > span {
+		.active a {
 			color: $AU-colordark-foreground-text;
 			border-color: $AU-colordark-background;
+
+			&:hover {
+				border-color: $AU-colordark-background-shade;
+			}
 		}
 
 		.au-link-list > li {
@@ -119,8 +126,12 @@
 			}
 		}
 
-		.active > span {
+		.active a {
 			border-color: $AU-colordark-background-alt;
+
+			&:hover {
+				border-color: $AU-colordark-background-alt-shade;
+			}
 		}
 	}
 
@@ -132,13 +143,12 @@
 		}
 
 		a,
-		.active > span,
 		.au-main-nav__toggle {
 			@include AU-fontgrid( sm );
 			@include AU-space( padding, 1unit );
 		}
 
-		.active > span {
+		.active a {
 			@include AU-space( border-bottom, 0.5unit solid $AU-color-background );
 			@include AU-space( margin-bottom, -0.5unit );
 			font-weight: normal;

diff --git a/packages/main-nav/tests/jquery/index.html b/packages/main-nav/tests/jquery/index.html
@@ -67,7 +67,7 @@ <h2>Test: main-nav default</h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -107,7 +107,7 @@ <h2>Test: main-nav <code>alt</code></h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -147,7 +147,7 @@ <h2>Test: main-nav <code>dark</code></h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -187,7 +187,7 @@ <h2>Test: main-nav <code>alt</code> <code>dark</code></h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -227,7 +227,7 @@ <h2>Test: main-nav <code>slow</code></h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -267,7 +267,7 @@ <h2>Test: main-nav <code>callbacks</code></h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>

diff --git a/packages/main-nav/tests/site/index.html b/packages/main-nav/tests/site/index.html
@@ -69,7 +69,7 @@ <h2>Test: main-nav default</h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -115,7 +115,7 @@ <h2>Test: main-nav <code>alt</code></h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -157,7 +157,7 @@ <h2>Test: main-nav <code>dark</code></h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -199,7 +199,7 @@ <h2>Test: main-nav <code>alt</code> <code>dark</code></h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -241,7 +241,7 @@ <h2>Test: main-nav <code>slow</code></h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -283,7 +283,7 @@ <h2>Test: main-nav with callbacks</h2>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>
@@ -347,7 +347,7 @@ <h1 class="au-header__heading">Site title</h1>
 								<ul class="au-link-list">
 									<li><a href="#">About</a></li>
 									<li><a href="#">Get started</a></li>
-									<li class="active"><span>Components</span></li>
+									<li class="active"><a href="#" aria-current="page">Components</a></li>
 									<li><a href="#">Templates</a></li>
 									<li><a href="#">Community</a></li>
 									<li><a href="#">Support</a></li>

diff --git a/uikit.json b/uikit.json