Use aria-current instead of .current to mark link to current page

yochem · Sep 9, 2024 · a3759d9 · a3759d9
1 parent 3157bf0
commit a3759d9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 27 deletions.
diff --git a/assets/nav-current-page.js b/assets/nav-current-page.js
diff --git a/assets/style.css b/assets/style.css
@@ -53,14 +53,6 @@ footer {
 
 		& a {
 
-			&.current {
-				color: var(--detail-color);
-			}
-
-			&:first-child {
-				justify-self: left;
-			}
-
 			&:first-child {
 				justify-self: left;
 			}
@@ -107,7 +99,8 @@ a:visited {
 	text-decoration-thickness: 4%;
 }
 
-a:hover {
+a:hover,
+a[aria-current] {
 	color: var(--detail-color);
 }
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -20,29 +20,30 @@
 	{{ $css := resources.Get "style.css" }}
 	<link rel="stylesheet" href="{{ $css.RelPermalink }}">
 	<link rel="icon" type="image/x-icon" href="/favicon.ico">
-	{{ $js := resources.Get "nav-current-page.js" }}
-	<script src="{{ $js.RelPermalink }}" defer></script>
 </head>
 
 <body>
 	<header>
-		<h1 aria-label="website title" lang="nl" translate="no">
+		<h1 {{ if (eq .Page.RelPermalink "/") -}}aria-current="page"{{- end }} aria-label="website title" lang="nl" translate="no">
 			<a title="Back home" aria-label="homepage" href="/">
 				Yochem van Rosmalen
 			</a>
 		</h1>
 	</header>
 
 	<main>
-	{{- block "content" . }}{{- end }}
+	{{- block "content" . -}}
+	{{- end -}}
 	</main>
 	<footer>
 		<hr>
 		<nav>
-			<a aria-label="Back home" href="/">/home</a>
-			<a aria-label="Blogs list" href="/posts/">/blog</a>
-			<a aria-label="Now page" href="/now/">/now</a>
-			<a aria-label="Contact page" href="/contact/">/contact</a>
+			{{- $currentPageURL := .Page.RelPermalink -}}
+			{{ range site.Menus.footer }}
+			<a {{ if (eq $currentPageURL .URL) -}}aria-current="page"{{- end }} aria-label="{{ .Name }} page" href="{{ .URL }}">
+				/{{ lower .Name }}
+			</a>
+			{{- end }}
 		</nav>
 	</footer>
 </body>