From 41be8c98a5244296afa2340f734265e4e73a11c7 Mon Sep 17 00:00:00 2001
From: vrifox <vrifox@vrifox.cc>
Date: Thu, 18 May 2023 13:17:48 +0200
Subject: [PATCH] improve accessibility

---
 assets/scss/partials/sidebar.scss | 142 +++++++++++++++---------------
 layouts/partials/sidebar.html     |  24 ++---
 2 files changed, 82 insertions(+), 84 deletions(-)

diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index e94e8c8..bf161e3 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -81,7 +81,7 @@
 		}
 	}
 
-	header {
+	#avatar-wrapper {
 		text-align: center;
 		user-select: none;
 		padding: inherit;
@@ -230,86 +230,84 @@
 			}
 		}
 	}
-	aside {
-		#social-links {
-			text-align: center;
+	#social-links {
+		text-align: center;
 
-			@media (max-width: 1140px) {
-				display: none;
-			}
-
-			a {
-				display: flex;
-				padding: 1rem;
-				place-content: center;
-				
-				&:hover {
-					.mastodon-icon {
-						color: hsl(251.5, 58.9%, 51.4%);
-					}
-				}
-
-				.mastodon-icon {
-					color: hsl(239.6, 100%, 69.4%);
-				}
-
-				.icon {
-					height: 1.25rem;
-					width: 1.25rem;
-					display: block;
-					
-					@media (prefers-reduced-motion: no-preference) {
-						transition: color 0.2s ease-in-out;
-					}
-				}
-			}
+		@media (max-width: 1140px) {
+			display: none;
 		}
-		#languages {
-			text-align: center;
-			border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
+
+		a {
+			display: flex;
+			padding: 1rem;
+			place-content: center;
 			
-			@media (max-width: 1140px) {
-				border-radius: 4rem;
-				position: absolute;
-				top: 1rem;
-				left: calc(100vw - 1em - 64px);
-				font-size: 1.4rem;
-				border-radius: 100%;
-				background-color: var(--sidebar-accent-1);
-				aspect-ratio: 1 / 1;
-				width: 64px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				overflow: hidden;
-			}
-			@media (prefers-reduced-motion: no-preference) {
-				transition: background-color 0.2s ease-in-out;
-			}
-
 			&:hover {
-				background-color: var(--sidebar-accent-1);
-
-				@media (max-width: 1140px) {
-					background-color: var(--sidebar-accent-2);
-				}
-			}
-			&:active {
-				background-color: var(--sidebar-accent-2);
-
-				@media (max-width: 1140px) {
-					background-color: var(--sidebar-accent-3);
+				.mastodon-icon {
+					color: hsl(251.5, 58.9%, 51.4%);
 				}
 			}
 
-			#language {
+			.mastodon-icon {
+				color: hsl(239.6, 100%, 69.4%);
+			}
+
+			.icon {
+				height: 1.25rem;
+				width: 1.25rem;
 				display: block;
-				text-decoration: none;
-				width: 100%;
-				height: 100%;
-				padding: 1rem;
-				pointer-events: all;
+				
+				@media (prefers-reduced-motion: no-preference) {
+					transition: color 0.2s ease-in-out;
+				}
 			}
 		}
 	}
+	#languages {
+		text-align: center;
+		border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
+		
+		@media (max-width: 1140px) {
+			border-radius: 4rem;
+			position: absolute;
+			top: 1rem;
+			left: calc(100vw - 1em - 64px);
+			font-size: 1.4rem;
+			border-radius: 100%;
+			background-color: var(--sidebar-accent-1);
+			aspect-ratio: 1 / 1;
+			width: 64px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			overflow: hidden;
+		}
+		@media (prefers-reduced-motion: no-preference) {
+			transition: background-color 0.2s ease-in-out;
+		}
+
+		&:hover {
+			background-color: var(--sidebar-accent-1);
+
+			@media (max-width: 1140px) {
+				background-color: var(--sidebar-accent-2);
+			}
+		}
+		&:active {
+			background-color: var(--sidebar-accent-2);
+
+			@media (max-width: 1140px) {
+				background-color: var(--sidebar-accent-3);
+			}
+		}
+
+		#language {
+			display: block;
+			text-decoration: none;
+			width: 100%;
+			height: 100%;
+			padding: 1rem;
+			pointer-events: all;
+		}
+	}
 }
\ No newline at end of file
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 35a54b3..cea5988 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,14 +1,14 @@
 {{ $currentPage := . }}
 
-<nav id="sidebar">
-    <header>
+<header id="sidebar">
+    <div id="avatar-wrapper">
         {{ with .Site.Params.avatar }}
             {{ $avatar := resources.Get . }}
             {{ $avatar := $avatar.Resize "96x webp" }}
             <img id="avatar" alt="{{ $.Site.Params.displayName }}" src="{{ $avatar.RelPermalink }}" />
         {{ end }}
-    </header>
-    <section id="sidebar-menu">
+    </div>
+    <nav id="sidebar-menu" aria-labelledby="primary-navigation">
         <ul>
             {{- range .Site.Menus.main }}
                 {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
@@ -18,12 +18,12 @@
                 {{ end }}
             {{- end }}
         </ul>
-    </section>
-    <aside>
-        <section id="social-links">
+    </nav>
+    <div>
+        <nav id="social-links" aria-labelledby="social-links">
             <a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" aria-label="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
-        </section>
-        <section id="languages">
+        </nav>
+        <div id="languages">
         {{- if .Site.IsMultiLingual }}
             {{ $siteLanguages := .Site.Languages }}
             {{ $pageLanguage := .Page.Lang }}
@@ -39,6 +39,6 @@
                 {{ end }}
             {{ end }}
         {{- end }}
-        </section>
-    </aside>
-</nav>
+        </div>
+    </div>
+</header>