From c335ad331de62e8d73d9cdabbe54be6949a0f993 Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Wed, 22 Feb 2023 15:39:07 -0600
Subject: [PATCH] Use @aria-current attribute instead of class on nav items

---
 templates/Header.php | 10 +++++-----
 www/css/core.css     |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/templates/Header.php b/templates/Header.php
index 31a7346a..395efb4f 100644
--- a/templates/Header.php
+++ b/templates/Header.php
@@ -79,19 +79,19 @@ if(!$isXslt){
 		<nav>
 			<ul>
 				<li>
-					<a<? if($highlight == 'ebooks'){ ?> class="highlighted"<? } ?> href="/ebooks">Ebooks</a>
+					<a<? if($highlight == 'ebooks'){ ?> aria-current="page"<? } ?> href="/ebooks">Ebooks</a>
 				</li>
 				<li>
-					<a<? if($highlight == 'about'){ ?> class="highlighted"<? } ?> href="/about">About</a>
+					<a<? if($highlight == 'about'){ ?> aria-current="page"<? } ?> href="/about">About</a>
 				</li>
 				<li>
-					<a<? if($highlight == 'newsletter'){ ?> class="highlighted"<? } ?> href="/newsletter">Newsletter</a>
+					<a<? if($highlight == 'newsletter'){ ?> aria-current="page"<? } ?> href="/newsletter">Newsletter</a>
 				</li>
 				<li>
-					<a<? if($highlight == 'contribute'){ ?> class="highlighted"<? } ?> href="/contribute">Get Involved</a>
+					<a<? if($highlight == 'contribute'){ ?> aria-current="page"<? } ?> href="/contribute">Get Involved</a>
 				</li>
 				<li>
-					<a<? if($highlight == 'donate'){ ?> class="highlighted"<? } ?> href="/donate">Donate</a>
+					<a<? if($highlight == 'donate'){ ?> aria-current="page"<? } ?> href="/donate">Donate</a>
 				</li>
 			</ul>
 		</nav>
diff --git a/www/css/core.css b/www/css/core.css
index 284712e4..28c249f3 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -420,18 +420,18 @@ header nav li a:visited{
 }
 
 header nav li a:hover,
-header nav li a.highlighted:hover{
+header nav li a[aria-current]:hover{
 	color: #fff;
 	border-bottom: 5px solid var(--button);
 	transition: none;
 }
 
-header nav li a.highlighted{
+header nav li a[aria-current]{
 	color: #fff;
 	border-bottom: 5px solid var(--button);
 }
 
-header nav li a.highlighted::after{
+header nav li a[aria-current]::after{
 	position: absolute;
 	content: "";
 	width: 0px;
@@ -3509,7 +3509,7 @@ ul.feed p{
 	body > header > a,
 	header nav li a,
 	header nav li a:hover,
-	header nav li a.highlighted:hover,
+	header nav li a[aria-current]:hover,
 	a.button.next::after,
 	.ebooks nav > a:last-child::after,
 	a[href].button.next:hover::after,