use aria-current instead of active class - fixes #7353

Author: Rich-Harris

.changeset/healthy-mirrors-hide.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Use aria-current instead of active class in nav

packages/create-svelte/templates/default/src/routes/Header.svelte

@@ -16,13 +16,13 @@
 			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 		</svg>
 		<ul>
-			<li class:active={$page.url.pathname === '/'}>
+			<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
 				<a href="/">Home</a>
 			</li>
-			<li class:active={$page.url.pathname === '/about'}>
+			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
 				<a href="/about">About</a>
 			</li>
-			<li class:active={$page.url.pathname.startsWith('/sverdle')}>
+			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
 				<a href="/sverdle">Sverdle</a>
 			</li>
 		</ul>
@@ -97,7 +97,7 @@
 		height: 100%;
 	}
 
-	li.active::before {
+	li[aria-current='page']::before {
 		--size: 6px;
 		content: '';
 		width: 0;