From c5804fdfe48bfb219b0e0a6d12f55791924ee6ad Mon Sep 17 00:00:00 2001
From: John Davey <john.davey@nice.org.uk>
Date: Fri, 26 Nov 2021 09:27:35 +0000
Subject: [PATCH 1/2] GN-149 Reinstate ids for top level links to make them
 focussable upon closing dropdown

---
 src/Header/Nav/Dropdown/Dropdown.jsx           | 12 +++++++++++-
 src/Header/Nav/NavLinks/NavLinks.jsx           |  2 ++
 src/Header/Nav/__snapshots__/Nav.test.jsx.snap |  3 +++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/Header/Nav/Dropdown/Dropdown.jsx b/src/Header/Nav/Dropdown/Dropdown.jsx
index ada9b894..dc40861a 100644
--- a/src/Header/Nav/Dropdown/Dropdown.jsx
+++ b/src/Header/Nav/Dropdown/Dropdown.jsx
@@ -37,6 +37,16 @@ export function Dropdown({
 	};
 	const Component = components[component];
 
+	function handleSkipLink(e) {
+		e.preventDefault();
+		const hash = e.target.hash.substring(1);
+		const el = document.getElementById(`navlink-${hash}`);
+		requestAnimationFrame(() => {
+			el.focus();
+		});
+		closeDropdown();
+	}
+
 	return (
 		<div
 			className={classnames([className, reset.wrapper])}
@@ -48,7 +58,7 @@ export function Dropdown({
 					<a
 						href={`#${nextNavSlug}`}
 						className={styles.skiplink}
-						onClick={closeDropdown}
+						onClick={handleSkipLink}
 					>
 						Skip {text} submenu
 					</a>
diff --git a/src/Header/Nav/NavLinks/NavLinks.jsx b/src/Header/Nav/NavLinks/NavLinks.jsx
index b714bbae..83d3d529 100644
--- a/src/Header/Nav/NavLinks/NavLinks.jsx
+++ b/src/Header/Nav/NavLinks/NavLinks.jsx
@@ -110,6 +110,7 @@ export function NavLinks({
 										className={styles.link}
 										aria-controls={`dropdown-${id}`}
 										aria-expanded={id === idOfOpenDropdown ? true : false}
+										id={`navlink-${id}`}
 									>
 										<span aria-label={abbreviation && title}>{text}</span>
 										{id === idOfOpenDropdown ? (
@@ -130,6 +131,7 @@ export function NavLinks({
 											aria-current={ariaCurrent}
 											className={styles.link}
 											onClick={handleNavLinkClick}
+											id={`navlink-${id}`}
 										>
 											<span aria-label={abbreviation && title}>{text}</span>
 											{nestedLinks && (
diff --git a/src/Header/Nav/__snapshots__/Nav.test.jsx.snap b/src/Header/Nav/__snapshots__/Nav.test.jsx.snap
index 526f54f5..3638027a 100644
--- a/src/Header/Nav/__snapshots__/Nav.test.jsx.snap
+++ b/src/Header/Nav/__snapshots__/Nav.test.jsx.snap
@@ -204,6 +204,7 @@ exports[`Nav Matches snapshot with sub links for selected external service 1`] =
                   aria-current={null}
                   className="link"
                   href="https://url1/"
+                  id="navlink-link1"
                   onClick={[Function]}
                 >
                   <span>
@@ -219,6 +220,7 @@ exports[`Nav Matches snapshot with sub links for selected external service 1`] =
                   aria-current={true}
                   className="link"
                   href="https://url2/"
+                  id="navlink-link2"
                   onClick={[Function]}
                 >
                   <span
@@ -366,6 +368,7 @@ exports[`Nav internalServices Matches snapshot with sub links for selected inter
                   aria-current={true}
                   className="link"
                   href="/"
+                  id="navlink-internal1"
                   onClick={[Function]}
                 >
                   <span>

From 9fd02b2845e5d7fb39e22d7de8044c98ee15aa34 Mon Sep 17 00:00:00 2001
From: John Davey <john.davey@nice.org.uk>
Date: Fri, 26 Nov 2021 11:44:35 +0000
Subject: [PATCH 2/2] GN-149 Refactor

Co-authored-by: w@rren <w@rren.dev>
---
 src/Header/Nav/Dropdown/Dropdown.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Header/Nav/Dropdown/Dropdown.jsx b/src/Header/Nav/Dropdown/Dropdown.jsx
index dc40861a..8e07c597 100644
--- a/src/Header/Nav/Dropdown/Dropdown.jsx
+++ b/src/Header/Nav/Dropdown/Dropdown.jsx
@@ -40,9 +40,9 @@ export function Dropdown({
 	function handleSkipLink(e) {
 		e.preventDefault();
 		const hash = e.target.hash.substring(1);
-		const el = document.getElementById(`navlink-${hash}`);
+		const element = document.getElementById(`navlink-${hash}`);
 		requestAnimationFrame(() => {
-			el.focus();
+			element.focus();
 		});
 		closeDropdown();
 	}