[fix] use aria-current instead of active class (#7376)

fixes #7353
sveltejs · Oct 25, 2022 · def0f60 · def0f60
1 parent 640f61f
commit def0f60
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/healthy-mirrors-hide.md b/.changeset/healthy-mirrors-hide.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Use aria-current instead of active class in nav
diff --git a/packages/create-svelte/templates/default/src/routes/Header.svelte b/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;