From f52c6869f2db9ce6c78af8532749383bc26c91a7 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat, 22 Feb 2020 20:28:23 +0100
Subject: [PATCH] feat: Use aria-current instead of visual only indicator
 (#173)

---
 src/components/Nav.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 1892864..99d46b1 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -26,12 +26,12 @@
 		float: left;
 	}
 
-	.selected {
+	[aria-current] {
 		position: relative;
 		display: inline-block;
 	}
 
-	.selected::after {
+	[aria-current]::after {
 		position: absolute;
 		content: '';
 		width: calc(100% - 1em);
@@ -50,11 +50,11 @@
 
 <nav>
 	<ul>
-		<li><a class:selected='{segment === undefined}' href='.'>home</a></li>
-		<li><a class:selected='{segment === "about"}' href='about'>about</a></li>
+		<li><a aria-current='{segment === undefined ? "page" : undefined}' href='.'>home</a></li>
+		<li><a aria-current='{segment === "about" ? "page" : undefined}' href='about'>about</a></li>
 
 		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
 		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>blog</a></li>
+		<li><a rel=prefetch aria-current='{segment === "blog" ? "page" : undefined}' href='blog'>blog</a></li>
 	</ul>
 </nav>