@janga/norna 0.7.18 → 0.7.22

package/src/components/NavigationPageTree.astro

@@ -1,12 +1,12 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import type { PageNavigationNode } from '../lib/siteNavigation';
-import type { SitePage } from '../lib/sitePages';
+import type { SiteNavigationNode } from '../lib/siteNavigation';
+import type { SiteNode, SitePage } from '../lib/sitePages';
 import PageContentsLinks from './PageContentsLinks.astro';
 
 interface Props {
-	nodes: PageNavigationNode[];
+	nodes: SiteNavigationNode[];
 	currentPage: SitePage;
 	variant: 'mobile' | 'sidebar' | 'submenu';
 	integratePageSections?: boolean;
@@ -14,64 +14,95 @@ interface Props {
 
 const { nodes, currentPage, variant, integratePageSections = false } = Astro.props;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
-const hasBranch = (node: PageNavigationNode) => node.children.length > 0;
+const hasBranch = (node: SiteNavigationNode) => node.children.length > 0;
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
-const isCurrentBranch = (page: SitePage) => (
-	currentPage.pageDirectory === page.pageDirectory
-	|| currentPage.pageDirectory.startsWith(`${page.pageDirectory}/pages/`)
+const isCurrentBranch = (node: SiteNode) => (
+	currentPage.pageDirectory === node.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`)
 );
-const getBranchId = (page: SitePage) => [
+const getBranchId = (node: SiteNode) => [
 	'navigation',
 	variant,
-	page.pagePath || 'home',
+	node.pagePath || 'home',
 	'children',
 ].join('-').replace(/[^a-z0-9-]+/gi, '-');
-const hasPageSections = (node: PageNavigationNode) => node.headings.some((heading) => heading.depth === 2);
-const hasPageDisclosure = (node: PageNavigationNode) => hasBranch(node) || hasPageSections(node);
+const hasPageSections = (node: SiteNavigationNode) => (
+	node.node.kind === 'page' && node.headings.some((heading) => heading.depth === 2)
+);
+const hasPageDisclosure = (node: SiteNavigationNode) => hasBranch(node) || hasPageSections(node);
 ---
 
 <ul class:list={['navigation-page-tree', `navigation-page-tree-${variant}`]}>
 	{nodes.map((node) => (
 		<li
 			class:list={['navigation-page-node', {
-				'navigation-page-node-current': isCurrentPage(node.page),
-				'navigation-page-node-current-branch': isCurrentBranch(node.page),
+				'navigation-page-node-category': node.node.kind === 'category',
+				'navigation-page-node-current': node.node.kind === 'page' && isCurrentPage(node.node),
+				'navigation-page-node-current-branch': isCurrentBranch(node.node),
 			}]}
 		>
-			{variant !== 'submenu' && integratePageSections ? (
+			{node.node.kind === 'category' ? (
+				<details
+					class:list={[
+						'navigation-page-branch',
+						'navigation-page-disclosure',
+						'navigation-category-disclosure',
+						`navigation-page-disclosure-${variant}`,
+					]}
+					data-page-path={node.node.pagePath}
+					data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
+					open={isCurrentBranch(node.node)}
+				>
+					<summary
+						class="navigation-page-summary"
+						aria-controls={getBranchId(node.node)}
+					>
+						<span class="navigation-page-summary-title">{node.node.title}</span>
+						<span class="navigation-page-chevron" aria-hidden="true"></span>
+					</summary>
+					<div id={getBranchId(node.node)} class="navigation-page-branch-content">
+						<Astro.self
+							nodes={node.children}
+							currentPage={currentPage}
+							variant={variant}
+							integratePageSections={integratePageSections}
+						/>
+					</div>
+				</details>
+			) : variant !== 'submenu' && integratePageSections ? (
 				hasPageDisclosure(node) ? (
 					<details
 						class:list={['navigation-page-branch', 'navigation-page-disclosure', `navigation-page-disclosure-${variant}`]}
-						data-page-path={node.page.pagePath || '/'}
-						data-current-branch={isCurrentBranch(node.page) ? 'true' : undefined}
-						data-current-page={isCurrentPage(node.page) ? 'true' : undefined}
+						data-page-path={node.node.pagePath || '/'}
+						data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
+						data-current-page={isCurrentPage(node.node) ? 'true' : undefined}
 						data-has-sections={hasPageSections(node) ? 'true' : undefined}
-						open={isCurrentBranch(node.page)}
+						open={isCurrentBranch(node.node)}
 					>
 						<summary
 							class="navigation-page-summary"
-							aria-controls={getBranchId(node.page)}
+							aria-controls={getBranchId(node.node)}
 						>
-							<span class="navigation-page-summary-title">{node.page.title}</span>
+							<span class="navigation-page-summary-title">{node.node.title}</span>
 							<span class="navigation-page-chevron" aria-hidden="true"></span>
 						</summary>
 						<a
 							class:list={['navigation-page-open-link', { 'mobile-nav-destination': variant === 'mobile' }]}
-							href={pageHref(node.page)}
-							aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+							href={pageHref(node.node)}
+							aria-current={isCurrentPage(node.node) ? 'page' : undefined}
 						>
-							{node.page.title}
+							{node.node.title}
 						</a>
-						<div id={getBranchId(node.page)} class="navigation-page-branch-content">
+						<div id={getBranchId(node.node)} class="navigation-page-branch-content">
 							{hasPageSections(node) && (
 								<nav
 									class="navigation-page-sections"
-									aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.page.title}`}
+									aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
 								>
 									<PageContentsLinks
 										headings={node.headings}
 										variant={variant === 'mobile' ? 'mobile' : 'desktop'}
-										pageHref={isCurrentPage(node.page) ? undefined : pageHref(node.page)}
+										pageHref={isCurrentPage(node.node) ? undefined : pageHref(node.node)}
 									/>
 								</nav>
 							)}
@@ -88,25 +119,25 @@ const hasPageDisclosure = (node: PageNavigationNode) => hasBranch(node) || hasPa
 				) : (
 					<a
 						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
-						href={pageHref(node.page)}
-						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+						href={pageHref(node.node)}
+						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
 					>
-						{node.page.title}
+						{node.node.title}
 					</a>
 				)
 			) : variant !== 'submenu' ? (
 				<>
 					<a
 						class:list={['navigation-page-link', { 'mobile-nav-destination': variant === 'mobile' }]}
-						href={pageHref(node.page)}
-						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+						href={pageHref(node.node)}
+						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
 					>
-						{node.page.title}
+						{node.node.title}
 					</a>
-					{variant === 'sidebar' && isCurrentPage(node.page) && hasPageSections(node) && (
+					{variant === 'sidebar' && isCurrentPage(node.node) && hasPageSections(node) && (
 						<nav
 							class="navigation-page-sections"
-							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.page.title}`}
+							aria-label={`${projectConfig.locale.labels.pageNavigation}: ${node.node.title}`}
 						>
 							<PageContentsLinks
 								headings={node.headings}
@@ -117,17 +148,17 @@ const hasPageDisclosure = (node: PageNavigationNode) => hasBranch(node) || hasPa
 					{hasBranch(node) && (
 						<details
 							class="navigation-page-branch"
-							data-page-path={node.page.pagePath || '/'}
-							data-current-branch={isCurrentBranch(node.page) ? 'true' : undefined}
-							open={isCurrentBranch(node.page)}
+							data-page-path={node.node.pagePath || '/'}
+							data-current-branch={isCurrentBranch(node.node) ? 'true' : undefined}
+							open={isCurrentBranch(node.node)}
 						>
-							<summary aria-controls={getBranchId(node.page)}>
+							<summary aria-controls={getBranchId(node.node)}>
 								<span class="visually-hidden">
-									{projectConfig.locale.labels.navigationChildren}: {node.page.title}
+									{projectConfig.locale.labels.navigationChildren}: {node.node.title}
 								</span>
 								<span aria-hidden="true"></span>
 							</summary>
-							<div id={getBranchId(node.page)} class="navigation-page-branch-content">
+							<div id={getBranchId(node.node)} class="navigation-page-branch-content">
 								<Astro.self
 									nodes={node.children}
 									currentPage={currentPage}
@@ -142,10 +173,10 @@ const hasPageDisclosure = (node: PageNavigationNode) => hasBranch(node) || hasPa
 				<>
 					<a
 						class="navigation-page-link"
-						href={pageHref(node.page)}
-						aria-current={isCurrentPage(node.page) ? 'page' : undefined}
+						href={pageHref(node.node)}
+						aria-current={isCurrentPage(node.node) ? 'page' : undefined}
 					>
-						{node.page.title}
+						{node.node.title}
 					</a>
 					{node.children.length > 0 && (
 						<Astro.self nodes={node.children} currentPage={currentPage} variant={variant} />

package/src/components/SectionNavigationScript.astro

@@ -7,6 +7,22 @@
 	const submenuItems = Array.from(document.querySelectorAll<HTMLElement>('.site-nav-item-has-submenu'));
 	const mobileDestinationLinks = Array.from(mobileMenu?.querySelectorAll<HTMLAnchorElement>('.mobile-nav-destination') ?? []);
 	const mobileMenuSummary = mobileMenu?.querySelector<HTMLElement>(':scope > summary');
+	const sectionTrackingEnabled = document.documentElement.dataset.sectionTracking === 'enabled';
+	const trackedHeadingIds = new Set(sectionLinks.flatMap((link) => {
+		const linkUrl = new URL(link.href, window.location.href);
+		if (linkUrl.pathname !== window.location.pathname || !linkUrl.hash) return [];
+
+		try {
+			return [decodeURIComponent(linkUrl.hash.slice(1))];
+		} catch {
+			return [];
+		}
+	}));
+	const trackedHeadings = sectionTrackingEnabled
+		? Array.from(document.querySelectorAll<HTMLElement>('.site-content h2[id], .site-content h3[id]'))
+			.filter((heading) => trackedHeadingIds.has(heading.id))
+		: [];
+	let sectionTrackingFrame: number | undefined;
 
 	const setAnchorOffset = () => {
 		if (!siteTop) return;
@@ -55,6 +71,33 @@
 		});
 	};
 
+	const updateReadingPosition = () => {
+		sectionTrackingFrame = undefined;
+		const readingLine = Math.ceil(siteTop?.getBoundingClientRect().bottom ?? 0) + 8;
+		let currentHeadingId: string | undefined;
+
+		for (const heading of trackedHeadings) {
+			if (heading.getBoundingClientRect().top > readingLine) break;
+			currentHeadingId = heading.id;
+		}
+
+		sectionLinks.forEach((link) => {
+			const target = getSamePageTarget(link);
+			const isCurrent = target !== undefined && target.id === currentHeadingId;
+
+			if (isCurrent) {
+				link.setAttribute('aria-current', 'location');
+			} else if (link.getAttribute('aria-current') === 'location') {
+				link.removeAttribute('aria-current');
+			}
+		});
+	};
+
+	const scheduleReadingPositionUpdate = () => {
+		if (!sectionTrackingEnabled || sectionTrackingFrame !== undefined) return;
+		sectionTrackingFrame = window.requestAnimationFrame(updateReadingPosition);
+	};
+
 	submenuItems.forEach((item) => {
 		const resetDismissal = () => delete item.dataset.submenuDismissed;
 		item.addEventListener('pointerleave', resetDismissal);
@@ -128,13 +171,24 @@
 		});
 	});
 
-	window.addEventListener('hashchange', updateCurrentSection);
+	window.addEventListener('hashchange', () => {
+		updateCurrentSection();
+		scheduleReadingPositionUpdate();
+	});
 	updateCurrentSection();
+	if (sectionTrackingEnabled) {
+		window.addEventListener('scroll', scheduleReadingPositionUpdate, { passive: true });
+		window.addEventListener('resize', scheduleReadingPositionUpdate);
+		scheduleReadingPositionUpdate();
+	}
 
 	setAnchorOffset();
 	if (window.location.hash) window.requestAnimationFrame(alignInitialHashTarget);
 
 	if (siteTop && 'ResizeObserver' in window) {
-		new ResizeObserver(setAnchorOffset).observe(siteTop);
+		new ResizeObserver(() => {
+			setAnchorOffset();
+			scheduleReadingPositionUpdate();
+		}).observe(siteTop);
 	}
 </script>

package/src/components/SiteBreadcrumbs.astro

@@ -1,31 +1,34 @@
 ---
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
-import type { SitePage } from '../lib/sitePages';
+import type { SiteNode, SitePage } from '../lib/sitePages';
 
 interface Props {
 	currentPage: SitePage;
-	pages: SitePage[];
+	nodes: SiteNode[];
 }
 
-const { currentPage, pages } = Astro.props;
-const pagesByPath = new Map(pages.map((page) => [page.pagePath, page]));
-const ancestors: SitePage[] = [];
+const { currentPage, nodes } = Astro.props;
+const nodesByPath = new Map(nodes.map((node) => [node.pagePath, node]));
+const ancestors: SiteNode[] = [];
 let parentPagePath = currentPage.parentPagePath;
 while (parentPagePath !== null) {
-	const parentPage = pagesByPath.get(parentPagePath);
-	if (!parentPage) break;
-	ancestors.unshift(parentPage);
-	parentPagePath = parentPage.parentPagePath;
+	const parentNode = nodesByPath.get(parentPagePath);
+	if (!parentNode) break;
+	ancestors.unshift(parentNode);
+	parentPagePath = parentNode.parentPagePath;
 }
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
-const breadcrumbPages = ancestors;
 ---
 
 <nav class="site-breadcrumbs" aria-label={projectConfig.locale.labels.breadcrumb}>
 	<ol>
-		{breadcrumbPages.map((page) => (
-			<li><a href={pageHref(page)}>{page.title}</a></li>
+		{ancestors.map((node) => (
+			<li>
+				{node.kind === 'page'
+					? <a href={pageHref(node)}>{node.title}</a>
+					: <span>{node.title}</span>}
+			</li>
 		))}
 		<li><span aria-current="page">{currentPage.title}</span></li>
 	</ol>

package/src/components/SiteNavigation.astro

@@ -2,8 +2,14 @@
 import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
-import { getListedPageNavigationTree, type PageNavigationEntry } from '../lib/siteNavigation';
-import type { SitePage } from '../lib/sitePages';
+import {
+	getFirstPageInNavigationNode,
+	getListedSiteNavigationTree,
+	type SiteNavigationEntry,
+	type SiteNavigationNode,
+} from '../lib/siteNavigation';
+import type { SiteNode, SitePage } from '../lib/sitePages';
+import DisplaySettings from './DisplaySettings.astro';
 import NavigationPageTree from './NavigationPageTree.astro';
 import SectionNavigationScript from './SectionNavigationScript.astro';
 
@@ -19,12 +25,24 @@ interface Props {
 		height?: string;
 	};
 	currentPage: SitePage;
-	pageNavigation: PageNavigationEntry[];
+	navigationEntries: SiteNavigationEntry[];
 	navigationMode: 'sections' | 'top' | 'tree';
 	frameColors: FrameColors;
+	readerPreferences: {
+		controls: {
+			appearance: boolean;
+			readingWidth: boolean;
+			focusReading: boolean;
+		};
+		defaults: {
+			appearance: 'system' | 'light' | 'dark';
+			readingWidth: 'narrow' | 'standard' | 'wide';
+			focusReading: 'off' | 'on';
+		};
+	};
 }
 
-const { logo, currentPage, pageNavigation, navigationMode, frameColors } = Astro.props;
+const { logo, currentPage, navigationEntries, navigationMode, frameColors, readerPreferences } = Astro.props;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
 	: frameColors.backgroundColor;
@@ -33,69 +51,98 @@ const navigationStyle = [
 	`--site-top-text-color: ${frameColors.textColor}`,
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
-const siteNavigationPages = pageNavigation.filter(({ page }) => page.isHome || page.navigation.listed);
-const siteNavigationTree = getListedPageNavigationTree(pageNavigation);
+const siteNavigationTree = getListedSiteNavigationTree(navigationEntries);
 const topLevelNavigation = siteNavigationTree;
-const showSiteNavigation = siteNavigationPages.some(({ page }) => !page.isHome);
-const homePage = pageNavigation.find(({ page }) => page.isHome)?.page ?? currentPage;
-const currentPageNavigation = pageNavigation.find(({ page }) => page.pathname === currentPage.pathname);
+const showSiteNavigation = topLevelNavigation.some(({ node }) => !node.isHome);
+const homeNode = navigationEntries.find(({ node }) => node.isHome)?.node;
+const homePage = homeNode?.kind === 'page' ? homeNode : currentPage;
+const currentPageNavigation = navigationEntries.find(({ node }) => node.kind === 'page' && node.pathname === currentPage.pathname);
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
-const isCurrentBranch = (page: SitePage) => currentPage.pageDirectory === page.pageDirectory
-	|| currentPage.pageDirectory.startsWith(`${page.pageDirectory}/pages/`);
+const isCurrentBranch = (node: SiteNode) => currentPage.pageDirectory === node.pageDirectory
+	|| currentPage.pageDirectory.startsWith(`${node.pageDirectory}/pages/`);
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
+const getNavigationPage = (node: SiteNavigationNode) => getFirstPageInNavigationNode(node);
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
+const showSinglePageTopLink = !showSiteNavigation;
+const currentPageSectionCount = currentPageNavigation?.sections.length ?? 0;
 const hasCurrentPageSectionMenu = Boolean(
-	currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+	currentPageNavigation && (
+		showSinglePageTopLink
+			? currentPageSectionCount > 0
+			: hasSectionMenu(currentPageNavigation.sections)
+	),
 );
 const hasTreePageContents = Boolean(
 	navigationMode === 'tree' && currentPageNavigation?.headings.length,
 );
-const showSinglePageTopLink = !showSiteNavigation;
+const showPageNavigation = Boolean(
+	navigationMode !== 'tree'
+	&& currentPageNavigation
+	&& (showSinglePageTopLink || hasCurrentPageSectionMenu),
+);
+const showSinglePageTitleOnly = showSinglePageTopLink && currentPageSectionCount === 0;
 const showMobileNavigation = showSiteNavigation || hasCurrentPageSectionMenu || hasTreePageContents;
-const showNavigationRow = showMobileNavigation || Boolean(logo);
+const showReaderControls = Object.values(readerPreferences.controls).some(Boolean);
+const showDesktopNavigationRow = showSiteNavigation || Boolean(logo) || showReaderControls;
+const showNavigationRow = showMobileNavigation || showDesktopNavigationRow;
 const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents || navigationMode === 'tree';
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
 
 <header
-	class:list={['site-top', { 'site-top-has-site-nav': showSiteNavigation }]}
+	class:list={['site-top', {
+		'site-top-has-site-nav': showSiteNavigation,
+		'site-top-has-navigation-row': showDesktopNavigationRow,
+	}]}
 	data-navigation-mode={navigationMode}
 	style={navigationStyle}
 >
 	{showNavigationRow && (
-		<div class="site-nav-row">
+		<div class:list={['site-nav-row', { 'site-nav-row-mobile-only': !showDesktopNavigationRow }]}>
 			{logo && (
-				<a class="site-brand" href={pageHref(homePage)}>
-					<img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} />
-				</a>
+				<div class="site-nav-leading">
+					<a class="site-brand" href={pageHref(homePage)}>
+						<img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} />
+					</a>
+				</div>
 			)}
 
-			{showSiteNavigation && (
-				<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
+			<div class="site-nav-actions">
+				{showSiteNavigation && (
+					<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
 					<ul>
-					{topLevelNavigation.map((node) => (
-						<li class:list={['site-nav-item', {
-							'site-nav-item-has-submenu': navigationMode !== 'tree' && node.children.length > 0,
-							'site-nav-item-current-branch': !isCurrentPage(node.page) && isCurrentBranch(node.page),
-						}]}>
-							<a href={pageHref(node.page)} aria-current={isCurrentPage(node.page) ? 'page' : undefined}>
-								{node.page.title}
-							</a>
-							{navigationMode !== 'tree' && node.children.length > 0 && (
-								<div class="site-nav-submenu">
-									<nav aria-label={`${node.page.title} ${projectConfig.locale.labels.siteNavigation}`}>
-										<NavigationPageTree nodes={[node]} currentPage={currentPage} variant="submenu" />
-									</nav>
+					{topLevelNavigation.map((navigationNode) => {
+						const destination = getNavigationPage(navigationNode);
+						if (!destination) return null;
+						const nodeIsCurrentPage = navigationNode.node.kind === 'page' && isCurrentPage(navigationNode.node);
+						return (
+							<li class:list={['site-nav-item', {
+								'site-nav-item-has-submenu': navigationMode !== 'tree' && navigationNode.children.length > 0,
+								'site-nav-item-current-branch': !nodeIsCurrentPage && isCurrentBranch(navigationNode.node),
+							}]}>
+								<a href={pageHref(destination)} aria-current={nodeIsCurrentPage ? 'page' : undefined}>
+									{navigationNode.node.title}
+								</a>
+								{navigationMode !== 'tree' && navigationNode.children.length > 0 && (
+									<div class="site-nav-submenu">
+										<nav aria-label={`${navigationNode.node.title} ${projectConfig.locale.labels.siteNavigation}`}>
+											<NavigationPageTree nodes={[navigationNode]} currentPage={currentPage} variant="submenu" />
+										</nav>
 									</div>
 								)}
 							</li>
-						))}
+						);
+					})}
 					</ul>
-				</nav>
-			)}
+					</nav>
+				)}
 
-			{showMobileNavigation && <details class="mobile-nav-menu">
+				{showReaderControls && (
+					<DisplaySettings controls={readerPreferences.controls} defaults={readerPreferences.defaults} />
+				)}
+
+				{showMobileNavigation && <details class="mobile-nav-menu">
 			<summary>
 				<span>{projectConfig.locale.labels.navigationMenu}</span>
 			</summary>
@@ -140,12 +187,16 @@ const needsNavigationScript = hasCurrentPageSectionMenu || hasTreePageContents |
 					)}
 				</div>
 			</div>
-		</details>}
+				</details>}
+			</div>
 		</div>
 	)}
 
-	{navigationMode !== 'tree' && hasCurrentPageSectionMenu && currentPageNavigation && (
-		<nav class="page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
+	{showPageNavigation && currentPageNavigation && (
+		<nav
+			class:list={['page-nav', { 'page-nav-title-only': showSinglePageTitleOnly }]}
+			aria-label={projectConfig.locale.labels.pageNavigation}
+		>
 			<div class="page-nav-inner">
 				{!showSinglePageTopLink && (
 					<span class="page-nav-label">{projectConfig.locale.labels.pageNavigation}</span>