From c5121f01ca42e859f2240f7d1bf543135f26694e Mon Sep 17 00:00:00 2001
From: Nathan Upchurch <nathan@upchur.ch>
Date: Tue, 13 Aug 2024 22:34:00 -0500
Subject: [PATCH] Fix accessibility issue

Fix <li> inside <a> so screenreader can parse nav
---
 _includes/nav.njk    | 11 +++--------
 public/css/index.css | 37 ++++++++++++++-----------------------
 2 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/_includes/nav.njk b/_includes/nav.njk
index e678085..d0360be 100644
--- a/_includes/nav.njk
+++ b/_includes/nav.njk
@@ -2,14 +2,9 @@
 	<h2 class="visually-hidden">Top level navigation menu</h2>
 	<ul class="nav">
 	{%- for entry in collections.all | eleventyNavigation %}
-		<a class="nav-item" href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}>
-			<li>{{ entry.title }}</li>
-		</a>
+		<li class="nav-item" {% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}><a href="{{ entry.url }}">{{ entry.title }}</a></li>
 	{%- endfor %}
-		<a class="nav-item" href="/feed/feed.xml">
-			<li class="subscribe">
-			{% include "rssLogo.njk" %}Feed
-			</li>
-		</a>
+		<li class="subscribe nav-item"><a href="/feed/feed.xml">{% include "rssLogo.njk" %}Feed</a>
+		</li>
 	</ul>
 </nav>
diff --git a/public/css/index.css b/public/css/index.css
index c8178d6..4f99131 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -492,13 +492,8 @@ nav ul {
 	width: var(--space-2xs);
 }
 .nav-item {
-	display: inline-block;
-	text-decoration: none;
-	border-top: var(--border-nav);
-}
-.nav-item li {
 	align-items: baseline;
-	color: var(--text-color);
+	border-top: var(--border-nav);
 	display: flex;
 	font-size: var(--step--2);
 	font-variation-settings: var(--font-variation-ui);
@@ -509,37 +504,33 @@ nav ul {
 	transition: var(--transition-normal);
 	letter-spacing: var(--ui-letter-spacing);
 }
-.nav-item:hover {
-	border-top: var(--border-nav-hover);
+.nav-item a {
+	color: var(--text-color);
+	margin-top: calc(var(--space-xs-s) * -1); /* Compensate for padding */
+	padding-top: var(--space-xs-s); /* Give <a> a larger click area */
 }
-/* Compensate for increased border thickness on hover of a.nav-item */
-.nav-item:hover li {
-	margin-top: calc(var(--space-xs-s) * -1);
+.nav-item:hover {
+	border-top: var(--border-nav-hover); /* Increase border thickness */
+}
+.nav-item:hover a {
+	margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
 }
 .nav-item a[href]:visited {
 	color: var(--text-color);
 }
-.nav-item a[href]:hover {
+.nav-item:hover a[href] {
 	color: var(--text-color);
 	text-decoration: none;
-
 }
 .nav-item a[href]:not(:hover) {
-	color: var(--text-color);
 	text-decoration: none;
 }
 .nav-item[data-currentpage="true"] {
 	border-top: var(--border-nav-currentpage);
+}
+.nav-item[data-currentpage="true"] a {
 	color: var(--contrast-color);
-}
-.nav-item[data-currentpage="true"] li {
-	margin-top: calc(var(--space-xs-s) * -1);
-}
-.nav a[href][aria-current="page"] li {
-	color: var(--contrast-color);
-}
-.subscribe:hover {
-	color: var(--text-color);
+	margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
 }
 
 /* Posts list */