Move accessibility outside main element

To enhance accessibility it was suggest in a recent DAC audit to move the breadcrumb above the `<main>` element. This turned out to be harder than I first thought as +layout.svelte don't allow named slots. Following a [reddit thread](https://www.reddit.com/r/sveltejs/comments/12vf9m4/passing_correct_slots_to_component_slot_from_a/), I found the [solution proposed by Rich Harris](sveltejs/kit#627 (comment)) which is the one implemented here. Fixed a typo as well, "indictator -> indicator"
ONSdigital · Jan 24, 2025 · dea8893 · dea8893
1 parent 973c6c5
commit dea8893
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 79 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,8 +20,8 @@
 		"data:test": "tsx scripts/insights/tests.ts"
 	},
 	"devDependencies": {
-		"@onsvisual/robo-utils": "^0.2.20",
-		"@onsvisual/svelte-components": "^0.1.76",
+		"@onsvisual/robo-utils": "^0.3.3",
+		"@onsvisual/svelte-components": "^0.1.81",
 		"@onsvisual/svelte-maps": "^1.2.17",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^3.0.0",

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -54,14 +54,21 @@
 <div class="flex flex-col min-h-screen">
 	<div class="flex-grow">
 		<Header bilingual={false}>
-			<div slot="before">
-				<AnalyticsBanner {analyticsId} {analyticsProps} pageViewEnabled={false} />
-				<PhaseBanner
-					phase="beta"
-					href="https://consultations.ons.gov.uk/digital-publishing/8302beaa/consultation/intro/"
-				/>
-			</div>
+			<AnalyticsBanner {analyticsId} {analyticsProps} pageViewEnabled={false} />
+			<PhaseBanner
+				phase="beta"
+				href="https://consultations.ons.gov.uk/digital-publishing/8302beaa/consultation/intro/"
+			/>
 		</Header>
+		{#if $page.data.component}
+			<svelte:component
+				this={$page.data.component}
+				links={$page.data.breadcrumbLinks}
+				background={$page.data.background ?? ''}
+			/>
+		{:else}
+			<p>$page.data.component is undefined</p>
+		{/if}
 		<Main>
 			<slot />
 		</Main>

diff --git a/src/routes/(app)/+layout.ts b/src/routes/(app)/+layout.ts
@@ -1,5 +1,6 @@
 import type { LayoutLoad } from './$types';
 import { base } from '$app/paths';
+import { Breadcrumb } from '@onsvisual/svelte-components';
 
 export const load: LayoutLoad = async ({ fetch }) => {
 	const coreMetadata = await (await fetch(`${base}/insights/core-metadata.json`)).json();
@@ -8,6 +9,12 @@ export const load: LayoutLoad = async ({ fetch }) => {
 		coreMetadata,
 		title: `Explore local statistics - ONS`,
 		description: `Find, compare and visualise statistics about communities in the United Kingdom. Includes data on population, economy and health.`,
-		pageType: `home page`
+		pageType: `home page`,
+		component: Breadcrumb,
+		breadcrumbLinks: [
+			{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
+			{ label: 'Explore local statistics' }
+		],
+		background: '#e9eff4'
 	};
 };
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -38,14 +38,6 @@
 	}
 </script>
 
-<Breadcrumb
-	links={[
-		{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
-		{ label: 'Explore local statistics' }
-	]}
-	background="#e9eff4"
-/>
-
 <Titleblock title="Explore local statistics" background="#e9eff4">
 	<UKMap />
 	<Lede>Find, compare and visualise statistics about places in the United Kingdom.</Lede>

diff --git a/src/routes/(app)/areas/[slug]/+layout.ts b/src/routes/(app)/areas/[slug]/+layout.ts
@@ -6,6 +6,7 @@ import { getCSV } from '$lib/api/getCSV';
 import { extractAreaCodeFromSlug } from '$lib/util/areas/extractAreaCodeFromSlug';
 import { makeCanonicalSlug } from '$lib/util/areas/makeCanonicalSlug';
 import { getName } from '@onsvisual/robo-utils';
+import { Breadcrumb } from '@onsvisual/svelte-components';
 
 export const load: LayoutLoad = async ({ params, fetch }) => {
 	const code = extractAreaCodeFromSlug(params.slug);
@@ -40,7 +41,17 @@ export const load: LayoutLoad = async ({ params, fetch }) => {
 			links,
 			title: `${getName(result.place)} (${result.place.areacd}) - ONS`,
 			description: `Find facts and figures from across the ONS on ${getName(result.place, 'the')} (${result.place.typenm}).`,
-			pageType: `area page`
+			pageType: `area page`,
+			component: Breadcrumb,
+			breadcrumbLinks: [
+				{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
+				{ label: 'Explore local statistics', href: `${base}/` },
+				...[...result.place.parents]
+					.reverse()
+					.map((p) => ({ label: getName(p), href: `${base}/areas/${p.areacd}` })),
+				{ label: getName(result.place) }
+			],
+			background: '#fff'
 		};
 	}
 };
diff --git a/src/routes/(app)/areas/[slug]/+page.svelte b/src/routes/(app)/areas/[slug]/+page.svelte
@@ -9,7 +9,6 @@
 	import { makeCanonicalSlug } from '$lib/util/areas/makeCanonicalSlug';
 	import { filterChildren } from '$lib/util/geo/filterChildren';
 	import {
-		Breadcrumb,
 		Titleblock,
 		Section,
 		Button,
@@ -74,16 +73,6 @@
 	{/if}
 </svelte:head>
 
-<Breadcrumb
-	links={[
-		{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
-		{ label: 'Explore local statistics', href: `${base}/` },
-		...[...data.place.parents]
-			.reverse()
-			.map((p) => ({ label: getName(p), href: `${base}/areas/${p.areacd}` })),
-		{ label: getName(data.place) }
-	]}
-/>
 <Titleblock
 	title={getName(data.place)}
 	titleBadge={data.place.areacd}

diff --git a/src/routes/(app)/areas/[slug]/indicators/+page.svelte b/src/routes/(app)/areas/[slug]/indicators/+page.svelte
@@ -7,7 +7,6 @@
 	import { goto, afterNavigate } from '$app/navigation';
 
 	import {
-		Breadcrumb,
 		Titleblock,
 		NavSections,
 		NavSection,
@@ -384,24 +383,6 @@
 </script>
 
 {#if navigated}
-	<Breadcrumb
-		links={[
-			{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
-			{ label: 'Explore local statistics', href: `${base}/` },
-			...[...data.place.parents].reverse().map((p) => ({
-				label: getName(p),
-				href: `${base}/areas/${makeCanonicalSlug(p.areacd, p.areanm)}`
-			})),
-
-			{
-				label: getName(data.place),
-				href: `${base}/areas/${makeCanonicalSlug(data.place.areacd, data.place.areanm)}`
-			},
-			{ label: `Local indictators` }
-		]}
-		background="#eaeaea"
-	/>
-
 	<Titleblock title="Local indicators for {getName(data.place, 'the')}" background="#eaeaea">
 		<Lede>Explore local indicators, trends and get data for {getName(data.place, 'the')}</Lede>
 	</Titleblock>

diff --git a/src/routes/(app)/areas/[slug]/indicators/+page.ts b/src/routes/(app)/areas/[slug]/indicators/+page.ts
@@ -1,6 +1,9 @@
 import type { PageLoad } from './$types';
+import { base } from '$app/paths';
 import { getData } from '$lib/api/getData';
 import { getName } from '@onsvisual/robo-utils';
+import { Breadcrumb } from '@onsvisual/svelte-components';
+import { makeCanonicalSlug } from '$lib/util/areas/makeCanonicalSlug';
 
 export const load: PageLoad = async ({ fetch, parent }) => {
 	const { place } = await parent();
@@ -10,6 +13,21 @@ export const load: PageLoad = async ({ fetch, parent }) => {
 		...result,
 		title: `Local indicators for ${getName(place, 'the')} (${place.areacd}) - ONS`,
 		description: `Explore local statistics from the ONS on ${getName(place, 'the')} (${place.typenm}). Includes data on population, economy and health.`,
-		pageType: `area data page`
+		pageType: `area data page`,
+		component: Breadcrumb,
+		breadcrumbLinks: [
+			{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
+			{ label: 'Explore local statistics', href: `${base}/` },
+			...[...place.parents].reverse().map((p) => ({
+				label: getName(p),
+				href: `${base}/areas/${makeCanonicalSlug(p.areacd, p.areanm)}`
+			})),
+			{
+				label: getName(place),
+				href: `${base}/areas/${makeCanonicalSlug(place.areacd, place.areanm)}`
+			},
+			{ label: `Local indicators` }
+		],
+		background: '#eaeaea'
 	};
 };
diff --git a/src/routes/(app)/indicators/+page.svelte b/src/routes/(app)/indicators/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	// @ts-nocheck
 	import { base } from '$app/paths';
-	import { Breadcrumb, Titleblock, NavSections, NavSection } from '@onsvisual/svelte-components';
+	import { Titleblock, NavSections, NavSection } from '@onsvisual/svelte-components';
 	import { capitalise } from '@onsvisual/robo-utils';
 	import Lede from '$lib/components/Lede.svelte';
 
@@ -40,13 +40,6 @@
 	$: filteredTopics = filterTopics(filterText);
 </script>
 
-<Breadcrumb
-	links={[
-		{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
-		{ label: 'Explore local statistics', href: `${base}/` },
-		{ label: 'Local indicators' }
-	]}
-/>
 <Titleblock title="Local indicators">
 	<Lede
 		>Explore our {datasetsCount} local indicators, including <b>disposable household income</b>,

diff --git a/src/routes/(app)/indicators/+page.ts b/src/routes/(app)/indicators/+page.ts
@@ -1,4 +1,6 @@
 import type { PageLoad } from './$types';
+import { Breadcrumb } from '@onsvisual/svelte-components';
+import { base } from '$app/paths';
 
 export const load: PageLoad = async ({ parent }) => {
 	const { coreMetadata } = await parent();
@@ -7,6 +9,13 @@ export const load: PageLoad = async ({ parent }) => {
 		coreMetadata,
 		title: `Explore local indicators - ONS`,
 		description: `Explore ${coreMetadata.indicatorsCodeLabelArray.length} local datasets from the ONS, including disposable household income, participation in further education and life satisfaction.`,
-		pageType: `indicators page`
+		pageType: `indicators page`,
+		component: Breadcrumb,
+		breadcrumbLinks: [
+			{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
+			{ label: 'Explore local statistics', href: `${base}/` },
+			{ label: 'Local indicators' }
+		],
+		background: '#fff'
 	};
 };
diff --git a/src/routes/(app)/indicators/[slug]/+page.svelte b/src/routes/(app)/indicators/[slug]/+page.svelte
@@ -4,7 +4,6 @@
 	import { base } from '$app/paths';
 	import { afterNavigate } from '$app/navigation';
 	import {
-		Breadcrumb,
 		Titleblock,
 		NavSections,
 		NavSection,
@@ -396,15 +395,6 @@
 		: null;
 </script>
 
-<Breadcrumb
-	links={[
-		{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
-		{ label: 'Explore local statistics', href: `${base}/` },
-		{ label: 'Local indicators', href: `${base}/indicators` },
-		{ label: data.indicator.metadata.label }
-	]}
-	background="#eaeaea"
-/>
 <Titleblock
 	title={data.indicator.metadata.label}
 	meta={[

diff --git a/src/routes/(app)/indicators/[slug]/+page.ts b/src/routes/(app)/indicators/[slug]/+page.ts
@@ -1,6 +1,8 @@
 import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 import { getDataset } from '$lib/api/getDataset';
+import { base } from '$app/paths';
+import { Breadcrumb } from '@onsvisual/svelte-components';
 
 export const load: PageLoad = async ({ fetch, params }) => {
 	const result = await getDataset(fetch, params?.slug);
@@ -13,6 +15,14 @@ export const load: PageLoad = async ({ fetch, params }) => {
 		...result,
 		title: `${result.indicator.metadata.label} - ONS`,
 		description: result.indicator.metadata.subtitle,
-		pageType: `indicator data page`
+		pageType: `indicator data page`,
+		component: Breadcrumb,
+		breadcrumbLinks: [
+			{ label: 'Home', href: 'https://www.ons.gov.uk/', refresh: true },
+			{ label: 'Explore local statistics', href: `${base}/` },
+			{ label: 'Local indicators', href: `${base}/indicators` },
+			{ label: result.indicator.metadata.label }
+		],
+		background: '#eaeaea'
 	};
 };