@onsvisual/svelte-components 1.0.58 → 1.0.59

package/dist/layout/Header/Header.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { onMount, getContext } from "svelte";
+	import initNav from "./nav.js";
 	import Theme from "../../wrappers/Theme/Theme.svelte";
 	import SkipLink from "../SkipLink/SkipLink.svelte";
 
@@ -46,15 +47,11 @@
 	let baseother = "https://cy.ons.gov.uk";
 	let path = "";
 
-	let menuExpanded = false;
-	let searchExpanded = false;
-
 	const menu = [
 		{
 			label_en: "Business, industry and trade",
 			label_cy: "Busnes, diwydiant a masnach",
 			url: "/businessindustryandtrade",
-			expanded: false,
 			children: [
 				{ label_en: "Business", label_cy: "Busnes", url: "/businessindustryandtrade/business" },
 				{
@@ -98,7 +95,6 @@
 			label_en: "Economy",
 			label_cy: "Yr economi",
 			url: "/economy",
-			expanded: false,
 			children: [
 				{
 					label_en: "Economic output and productivity",
@@ -151,7 +147,6 @@
 			label_en: "Employment and labour market",
 			label_cy: "Cyflogaeth a'r farchnad lafur",
 			url: "/employmentandlabourmarket",
-			expanded: false,
 			children: [
 				{
 					label_en: "People in work",
@@ -169,7 +164,6 @@
 			label_en: "People, population and community",
 			label_cy: "Pobl, y boblogaeth a chymunedau",
 			url: "/peoplepopulationandcommunity",
-			expanded: false,
 			children: [
 				{
 					label_en: "Births, deaths and marriages",
@@ -247,122 +241,11 @@
 		Search: "Chwilio",
 		Menu: "Dewislen",
 		"Hide search": "Cuddio",
-		"Office for National Statistics logo - Homepage": "Logo Swyddfa Ystadegau Gwladol - Hafan",
+		"Office for National Statistics logo": "Logo Swyddfa Ystadegau Gwladol",
+		Homepage: "Hafan",
 		"Search for a keyword(s) or time series ID": "Chwilio am allweddair neu ID cyfres amser"
 	};
 
-	function toggle_sm(e, i) {
-		if (window.matchMedia("(max-width:767px)").matches) {
-			e.preventDefault();
-			menu[i].expanded = !menu[i].expanded;
-		}
-	}
-
-	function handleKeydown(event) {
-		const target = event.currentTarget;
-		// Find the currently focused expandable child link within the navigation item
-		const focusedExpandableChild = target.querySelector(".js-expandable__child a:focus");
-
-		// Find all child links in the current navigation item
-		const childLinks = Array.from(target.querySelectorAll(".js-expandable__child a"));
-
-		// Close any expanded items from mouse events
-		const allExpandedItems = document.querySelectorAll(".js-expandable-active");
-		allExpandedItems.forEach((item) => {
-			if (item !== target) {
-				item.classList.remove("js-expandable-active");
-				const content = item.querySelector(".js-expandable__content");
-				if (content) {
-					content.classList.add("js-nav-hidden");
-					content.setAttribute("aria-expanded", "false");
-				}
-			}
-		});
-
-		switch (event.key) {
-			case "Tab":
-				if (focusedExpandableChild) {
-					target.classList.remove("primary-nav__item--focus");
-				}
-				break;
-
-			case "Escape":
-				event.preventDefault();
-				target.classList.remove("primary-nav__item--focus");
-				const firstNavLink = target.closest(".js-nav").querySelector("a:first-child");
-				if (firstNavLink) {
-					firstNavLink.classList.add("hide-children");
-					firstNavLink.focus();
-					firstNavLink.addEventListener(
-						"focusout",
-						() => {
-							firstNavLink.classList.remove("hide-children");
-						},
-						{ once: true }
-					);
-				}
-				break;
-
-			case "ArrowDown":
-				event.preventDefault();
-				if (!focusedExpandableChild) {
-					// If no child is focused, focus the first child. Needs to start from 0 as first child is link to primary nav.
-					const firstChild = childLinks[1];
-					if (firstChild) {
-						console.log("add focus");
-						target.classList.add("primary-nav__item--focus");
-						firstChild.focus({ focusVisible: true });
-					}
-				} else {
-					// Find the current index and move to the next child
-					const currentIndex = childLinks.indexOf(focusedExpandableChild);
-					if (currentIndex < childLinks.length - 1) {
-						childLinks[currentIndex + 1].focus();
-					}
-				}
-				break;
-
-			case "ArrowUp":
-				event.preventDefault();
-
-				if (focusedExpandableChild) {
-					const currentIndex = childLinks.indexOf(focusedExpandableChild);
-					if (currentIndex > 0) {
-						// Move to previous child
-						childLinks[currentIndex - 1].focus();
-					} else {
-						// If at first child, move focus back to main nav link
-						target.classList.remove("primary-nav__item--focus");
-						const mainLink = target.querySelector("a:first-child");
-						if (mainLink) {
-							mainLink.focus();
-						}
-					}
-				}
-				break;
-
-			case "ArrowRight":
-				event.preventDefault();
-				target.classList.remove("primary-nav__item--focus");
-				const nextNav = target.closest(".js-nav").nextElementSibling;
-				if (nextNav) {
-					const firstLink = nextNav.querySelector("a:first-child");
-					if (firstLink) firstLink.focus();
-				}
-				break;
-
-			case "ArrowLeft":
-				event.preventDefault();
-				target.classList.remove("primary-nav__item--focus");
-				const prevNav = target.closest(".js-nav").previousElementSibling;
-				if (prevNav) {
-					const firstLink = prevNav.querySelector("a:first-child");
-					if (firstLink) firstLink.focus();
-				}
-				break;
-		}
-	}
-
 	function setPaths() {
 		const url = page?.url || document.location;
 		lang = url.host.startsWith("cy") ? "cy" : "en";
@@ -372,18 +255,7 @@
 	}
 	onMount(() => {
 		setPaths();
-
-		/// Add keyboard event listeners
-		const navItems = document.querySelectorAll(".js-nav");
-		navItems.forEach((item) => {
-			item.addEventListener("keydown", handleKeydown);
-		});
-
-		return () => {
-			navItems.forEach((item) => {
-				item.removeEventListener("keydown", handleKeydown);
-			});
-		};
+		initNav();
 	});
 
 	$: i18n = (text) => (lang === "cy" && texts[text] ? texts[text] : text);
@@ -419,7 +291,11 @@
 							class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
 						>
 							<div class="ons-grid__col ons-col-auto">
-								<a class="ons-header__org-logo-link" href={baseurl}>
+								<a
+									class="ons-header__org-logo-link"
+									href={baseurl}
+									aria-label="{i18n('Office for National Statistics logo')} - {i18n('Homepage')}"
+								>
 									<div class="ons-header__org-logo ons-header__org-logo--large">
 										<svg
 											class="ons-icon--logo"
@@ -430,7 +306,9 @@
 											aria-labelledby="ons-logo-en-alt"
 											role="img"
 										>
-											<title id="ons-logo-en-alt"> Office for National Statistics homepage </title>
+											<title id="ons-logo-en-alt"
+												>{i18n("Office for National Statistics logo")} - {i18n("Homepage")}</title
+											>
 											<g
 												class="ons-icon--logo__group ons-icon--logo__group--secondary"
 												fill="#a8bd3a"
@@ -543,7 +421,7 @@
 											role="img"
 										>
 											<title id="ons-logo-stacked-en-alt">
-												Office for National Statistics logo
+												{i18n("Office for National Statistics logo")}
 											</title>
 											<g
 												class="ons-icon--logo__group ons-icon--logo__group--secondary"
@@ -577,7 +455,10 @@
 				<div class="ons-container">
 					<div class="header col-wrap">
 						<div class="col col--lg-one-third col--md-one-third">
-							<a href="{baseurl}/">
+							<a
+								href="{baseurl}/"
+								aria-label="{i18n('Office for National Statistics logo')} - {i18n('Homepage')}"
+							>
 								<svg
 									version="1.1"
 									xmlns="http://www.w3.org/2000/svg"
@@ -586,7 +467,7 @@
 									aria-hidden="true"
 									class="logo"
 								>
-									<title>Office for National Statistics logo - Homepage</title>
+									<title>{i18n("Office for National Statistics logo")} - {i18n("Homepage")}</title>
 									<path
 										class="ons-icon--logo__group ons-icon--logo__group--secondary"
 										d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7C3.3,54.2,1.5,48.5,0,42.6V70.5 M10.9,0C10.9,0,0,0,0,13.5v7.2
@@ -683,46 +564,35 @@
 					<!-- Controls -->
 					<nav aria-label="Header links">
 						<ul class="nav--controls">
-							<li class="nav--controls__item" class:menu-is-expanded={menuExpanded}>
+							<li class="nav--controls__item">
 								<a
 									href="#nav-primary"
 									id="menu-toggle"
 									aria-controls="nav-primary"
-									aria-expanded={menuExpanded}
+									aria-expanded="false"
 									class="nav--controls__menu"
-									on:click|preventDefault={() => {
-										menuExpanded = !menuExpanded;
-										searchExpanded = false;
-									}}
 								>
 									<span class="nav--controls__text">{i18n("Menu")}</span>
 								</a>
 							</li>
-							<li class="nav--controls__item" class:search-is-expanded={searchExpanded}>
+							<li class="nav--controls__item">
 								<a
 									href="#nav-search"
 									id="search-toggle"
 									aria-controls="nav-search"
-									aria-expanded={searchExpanded}
+									aria-expanded="false"
 									class="nav--controls__search"
-									on:click|preventDefault={() => {
-										searchExpanded = !searchExpanded;
-										menuExpanded = false;
-									}}
 								>
-									<span class="nav--controls__text"
-										>{searchExpanded ? i18n("Hide search") : i18n("Search")}</span
-									>
+									<span class="nav--controls__text">{i18n("Search")}</span>
 								</a>
 							</li>
 						</ul>
 
 						<!-- Main Navigation -->
 						<ul
-							class="ons-container primary-nav__list"
-							class:nav-main--hidden={!menuExpanded}
+							class="ons-container nav-main--hidden primary-nav__list"
 							id="nav-primary"
-							aria-expanded={menuExpanded}
+							aria-expanded="false"
 						>
 							<!-- Home Link -->
 							<li class="primary-nav__item js-nav">
@@ -732,14 +602,9 @@
 							</li>
 
 							<!-- Menu Items -->
-							{#each [...menu
-									.filter((d) => d.children)
-									.sort( (a, b) => a["label_" + lang].localeCompare(b["label_" + lang]) ), ...menu.filter((d) => !d.children)] as item, i}
+							{#each menu.filter((d) => !d.secondary) as item, i}
 								{#if item.children}
-									<li
-										class="primary-nav__item js-nav js-expandable"
-										class:js-expandable-active={item.expanded}
-									>
+									<li class="primary-nav__item js-nav js-expandable">
 										<a
 											class="primary-nav__link col col--md-8 col--lg-10"
 											href="{baseurl}{item.url}"
@@ -753,16 +618,10 @@
 											</span>
 										</a>
 										<ul
-											class="primary-nav__child-list col col--md-16 col--lg-20 js-expandable__content jsEnhance"
-											class:js-nav-hidden={!item.expanded}
-											aria-expanded={item.expanded}
+											class="primary-nav__child-list col col--md-16 col--lg-20 js-expandable__content js-nav-hidden jsEnhance"
+											aria-expanded="false"
 											aria-label="submenu"
 										>
-											<li class="primary-nav__child-item js-expandable__child hide--md">
-												<a class="primary-nav__child-link" tabindex="-1" href="{baseurl}{item.url}"
-													>{item[`label_${lang}`]}</a
-												>
-											</li>
 											{#each [...item.children].sort( (a, b) => a[`label_${lang}`].localeCompare(b[`label_${lang}`]) ) as child}
 												<li class="primary-nav__child-item js-expandable__child">
 													<a
@@ -775,7 +634,7 @@
 										</ul>
 									</li>
 								{:else}
-									<li class="primary-nav__item js-nav" class:hide--md={item.secondary}>
+									<li class="primary-nav__item js-nav">
 										<a
 											class="primary-nav__link col col--md-8 col--lg-10"
 											href="{baseurl}{item.url}"
@@ -799,7 +658,7 @@
 						</ul>
 					</nav>
 				</div>
-				<div class="search print--hide" class:nav-search--hidden={!searchExpanded} id="searchBar">
+				<div class="search nav-search--hidden print--hide" id="searchBar">
 					<div class="ons-container" role="search">
 						<form class="col-wrap search__form" action="{baseurl}/search">
 							<label class="search__label col col--md-23 col--lg-24" for="nav-search"

package/dist/layout/Header/nav.d.ts

@@ -0,0 +1 @@
+export default function initNav(): void;

package/dist/layout/Header/nav.js

@@ -0,0 +1,271 @@
+function getBoolFromString(stringToConvert) {
+	return stringToConvert === "true";
+}
+
+function toggleSubnav(element) {
+	const subnav = element;
+	subnav.classList.toggle("js-expandable-active");
+	subnav.querySelectorAll(".js-expandable__content").forEach((el) => {
+		el.classList.toggle("js-nav-hidden");
+	});
+
+	const elementAria = getBoolFromString(element.querySelector("a:first-child").ariaExpanded);
+	subnav.querySelector("a:first-child").ariaExpanded = !elementAria;
+	const subnavAria = getBoolFromString(
+		element.querySelector(".js-expandable__content").ariaExpanded
+	);
+	subnav.querySelector(".js-expandable__content").ariaExpanded = !subnavAria;
+}
+
+function toggleMenu(toggleElement, menuElement) {
+	const toggle = toggleElement;
+	const menu = menuElement;
+	toggle.classList.toggle("menu-is-expanded");
+	const toggleAriaState = getBoolFromString(toggle.querySelector("a").ariaExpanded);
+	toggle.querySelector("a").ariaExpanded = !toggleAriaState;
+	menu.classList.toggle("nav-main--hidden");
+	const menuAriaState = getBoolFromString(menuElement.ariaExpanded);
+	menu.ariaExpanded = !menuAriaState;
+}
+
+function toggleSearch(toggleElement, searchElement) {
+	const toggle = toggleElement;
+	const search = searchElement;
+	const langAttribute = document.documentElement.lang;
+	toggle.classList.toggle("search-is-expanded");
+	const toggleAriaState = getBoolFromString(toggle.querySelector("a").ariaExpanded);
+	toggle.querySelector("a").ariaExpanded = !toggleAriaState;
+	let searchStr = "";
+	if (langAttribute === "en") {
+		searchStr = "Hide search";
+		if (toggle.querySelector(".nav--controls__text").textContent.includes("Hide")) {
+			searchStr = "Search";
+		}
+	} else {
+		searchStr = "Cuddio";
+		if (toggle.querySelector(".nav--controls__text").textContent.includes("Cuddio")) {
+			searchStr = "Chwilio";
+		}
+	}
+	toggle.querySelector(".nav--controls__text").textContent = searchStr;
+	search.classList.toggle("nav-search--hidden");
+	const searchAriaState = getBoolFromString(search.ariaExpanded);
+	search.ariaExpanded = !searchAriaState;
+}
+
+function cloneSecondaryNav() {
+	// On mobile move secondary nav items in header to primary nav
+	const navLink = document.querySelectorAll(".js-nav-clone__link");
+	const navList = document.querySelector(".js-nav-clone__list");
+
+	if (
+		document.body.classList.contains("viewport-sm") &&
+		navList.querySelectorAll(".js-nav-clone__link").length > 0
+	) {
+		// Remove from separate UL and add into primary
+		navLink.forEach((l) => {
+			const link = l;
+			link.parentNode.style.display = "none";
+			const newNavItem = document.createElement("li");
+			newNavItem.classList.add("primary-nav__item");
+
+			link.classList.remove("secondary-nav__link");
+			link.classList.add("primary-nav__link", "col");
+
+			newNavItem.insertAdjacentElement("beforeend", link);
+
+			const primaryNavList = document.querySelector(".primary-nav__list li.primary-nav__language");
+			primaryNavList.insertAdjacentElement("beforebegin", newNavItem);
+		});
+	} else if (
+		!document.body.classList.contains("viewport-sm") &&
+		document.querySelector(".secondary-nav__item").style.display === "none"
+	) {
+		// Remove from primary nav and add into separate secondary list
+		navLink.forEach((l, i) => {
+			const index = i + 1;
+			const link = l;
+			link.classList.add("secondary-nav__link");
+			link.classList.remove("primary-nav__link", "col");
+			link.parentNode.remove();
+			const cloneList = document.querySelector(`.js-nav-clone__list li:nth-child(${index})`);
+			cloneList.insertAdjacentElement("beforeend", link);
+			link.parentNode.style.display = "block";
+		});
+	}
+}
+
+function clonePrimaryItems() {
+	const detectDuplicate = document.querySelectorAll(".js-nav__duplicate");
+	const expandableList = document.querySelectorAll(".js-expandable");
+
+	// Clone primary nav items into sub-menu on mobile, so it can still be selected on mobile
+	if (document.body.classList.contains("viewport-sm") && detectDuplicate.length === 0) {
+		expandableList.forEach((item) => {
+			const href = item.querySelector("a").getAttribute("href");
+			const text = item.querySelector(".submenu-title").innerText;
+			const childList = item.querySelector(".js-expandable__content");
+
+			const newLink = document.createElement("a");
+			newLink.classList.add("primary-nav__child-link");
+			newLink.href = href;
+			newLink.innerText = text.trim();
+
+			const newItem = document.createElement("li");
+			newItem.classList.add("primary-nav__child-item", "js-nav__duplicate", "js-expandable__child");
+			newItem.insertAdjacentElement("beforeend", newLink);
+			childList.insertBefore(newItem, childList.firstChild);
+		});
+	} else if (!document.body.classList.contains("viewport-sm") && detectDuplicate.length > 0) {
+		detectDuplicate.forEach((duplicate) => {
+			duplicate.remove();
+		});
+	}
+}
+
+export default function initNav() {
+	window.addEventListener("resize", () => {
+		clonePrimaryItems();
+		cloneSecondaryNav();
+	});
+
+	document.addEventListener("keydown", (e) => {
+		if (e.key === "Escape") {
+			// Find all nav items currently hovered (with open submenu)
+			document.querySelectorAll(".primary-nav__item:hover > ul").forEach((submenu) => {
+				submenu.classList.add("ons-u-hidden");
+				const parentItem = submenu.closest(".primary-nav__item");
+				// Handler to restore submenu on mouse leave
+				const handleMouseLeave = () => {
+					submenu.classList.remove("ons-u-hidden");
+					parentItem.removeEventListener("mouseleave", handleMouseLeave);
+				};
+				parentItem.addEventListener("mouseleave", handleMouseLeave, { once: true });
+			});
+		}
+	});
+
+	const primaryNav = document.querySelector("#nav-primary");
+	const searchBar = document.querySelector("#searchBar");
+	const navItem = document.querySelectorAll(".js-nav");
+	const expandableItems = document.querySelectorAll(".js-expandable");
+
+	clonePrimaryItems();
+	cloneSecondaryNav();
+
+	primaryNav.classList.add("nav-main--hidden");
+	primaryNav.ariaExpanded = false;
+
+	expandableItems.forEach((item) => {
+		item.addEventListener("click", (event) => {
+			if (document.body.classList.contains("viewport-sm")) {
+				event.preventDefault();
+				toggleSubnav(item);
+			}
+		});
+	});
+
+	// stop parent element from taking over all click events
+	document.querySelectorAll(".js-expandable > .js-expandable__content").forEach((elem) => {
+		elem.addEventListener("click", (event) => {
+			event.stopPropagation();
+		});
+	});
+
+	navItem.forEach((item) => {
+		item.addEventListener("keydown", (e) => {
+			const focusedItem = document.querySelector(".js-expandable__child a:focus"); // only selects child item that is in focus
+			const keycode = e.keyCode;
+			const up = 38;
+			const down = 40;
+			const right = 39;
+			const left = 37;
+			const esc = 27;
+			const tab = 9;
+			if (keycode === tab && focusedItem) {
+				item.classList.remove("primary-nav__item--focus");
+				item.nextElementSibling?.focus();
+			}
+			if (keycode === esc) {
+				item.classList.remove("primary-nav__item--focus");
+				const closestNav = item.closest(".js-nav");
+				const link = closestNav.querySelector("a");
+				link.classList.add("hide-children");
+				link.focus();
+				link.addEventListener("focusout", () => {
+					link.classList.remove("hide-children");
+				});
+			}
+			if (keycode === down) {
+				e.preventDefault();
+				item.classList.add("primary-nav__item--focus");
+				if (focusedItem) {
+					focusedItem.parentElement.nextElementSibling?.querySelector("a").focus();
+				} else {
+					item.querySelector(".js-expandable__child a")?.focus();
+				}
+			}
+			if (keycode === up) {
+				e.preventDefault();
+				if (focusedItem && focusedItem.parentElement.previousElementSibling) {
+					focusedItem.parentElement.previousElementSibling?.querySelector("a").focus();
+				} else {
+					item.classList.remove("primary-nav__item--focus");
+					item.querySelector("a")?.focus();
+				}
+			}
+			if (keycode === right) {
+				e.preventDefault();
+				item.classList.remove("primary-nav__item--focus");
+				const closestNav = item.closest(".js-nav");
+				closestNav.nextElementSibling?.querySelector("a").focus();
+			}
+			if (keycode === left) {
+				e.preventDefault();
+				item.classList.remove("primary-nav__item--focus");
+				const closestNav = item.closest(".js-nav");
+				closestNav.previousElementSibling?.querySelector("a").focus();
+			}
+		});
+	});
+
+	const expandBehaviour = (item, expandedBool) => {
+		if (!document.body.classList.contains("viewport-sm")) {
+			const navLink = item.querySelector(".primary-nav__link");
+			navLink.ariaExpanded = expandedBool;
+			const expandable = item.querySelector(".js-expandable__content");
+			expandable.ariaExpanded = expandedBool;
+		}
+	};
+
+	expandableItems.forEach((item) => {
+		item.addEventListener("focusin", () => expandBehaviour(item, true));
+		item.addEventListener("pointerenter", () => expandBehaviour(item, true));
+	});
+
+	expandableItems.forEach((item) => {
+		item.addEventListener("focusout", () => expandBehaviour(item, false));
+		item.addEventListener("pointerleave", () => expandBehaviour(item, false));
+	});
+
+	const menuToggle = document.querySelector("#menu-toggle");
+	const menuToggleContainer = menuToggle.parentNode;
+	const searchToggle = document.querySelector("#search-toggle");
+	const searchToggleContainer = searchToggle.parentNode;
+
+	menuToggle.addEventListener("click", (event) => {
+		event.preventDefault();
+		if (!searchBar.classList.contains("nav-search--hidden")) {
+			toggleSearch(searchToggleContainer, searchBar);
+		}
+		toggleMenu(menuToggleContainer, primaryNav);
+	});
+
+	searchToggle.addEventListener("click", (event) => {
+		event.preventDefault();
+		if (!primaryNav.classList.contains("nav-main--hidden")) {
+			toggleMenu(menuToggleContainer, primaryNav);
+		}
+		toggleSearch(searchToggleContainer, searchBar);
+	});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.58",
+	"version": "1.0.59",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",