A11y improvements and style tweaks

- Use button element instead of anchors, fixes keyboard navigation and
other issues
- Disable search input until it's open, prevents being able to write
inside it while it's closed
- Use :root instead of html in CSS
- Add minimal size for separator between home button and other links

sass/_buttons.scss

@@ -7,14 +7,19 @@
 }
 
 .inline-button {
+	-webkit-appearance: none;
+	appearance: none;
 	transition: var(--transition);
 	cursor: pointer;
 	box-shadow: var(--edge-highlight);
+	border: none;
 	border-radius: var(--rounded-corner);
 	background-color: var(--fg-muted-1);
+	padding: 0.125rem 0.375rem;
 	padding: 0.625rem 1rem;
 	color: var(--fg-color);
-	font-size: 0.9rem;
+	font-weight: bold;
+	font-size: 0.875rem;
 	line-height: normal;
 	text-decoration: none;
 

sass/_general.scss

@@ -4,7 +4,7 @@
 	box-sizing: border-box;
 }
 
-html {
+:root {
 	text-wrap: pretty;
 	scroll-behavior: smooth;
 	// scrollbar-color: var(--primary-color) transparent;
@@ -18,15 +18,10 @@ html {
 	// }
 }
 
-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
 body {
 	display: grid; // Put footer at the bottom for short pages, such as the 404
 	grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
+	margin: 0;
 	background: var(--bg-color), var(--primary-color);
 	min-height: 100vh;
 	color: var(--fg-color);

sass/_nav.scss

@@ -60,7 +60,7 @@
 						top: -0.125rem;
 						right: -0.5rem;
 						background-color: var(--fg-muted-2);
-						width: 0.0625rem;
+						width: max(1px, 0.0625em);
 						height: calc(100% + 0.25rem);
 						content: "";
 
@@ -81,6 +81,7 @@
 				}
 
 				a,
+				&#search button,
 				&#language-switcher summary {
 					&:hover {
 						box-shadow: var(--edge-highlight);
@@ -130,9 +131,9 @@
 					}
 				}
 
-				&#search a,
+				&#search button,
-				&#feed a,
+				&#language-switcher summary,
-				&#language-switcher summary {
+				&#feed a {
 					padding: 0.5rem 0.625rem;
 
 					&:hover .icon {
@@ -148,8 +149,17 @@
 					}
 				}
 
-				&#search {
+				&#search button {
+					-webkit-appearance: none;
+					appearance: none;
+					transition: var(--transition);
 					cursor: pointer;
+					border: none;
+					border-radius: 999px;
+					background-color: transparent;
+					overflow: hidden;
+					font-weight: bold;
+					font-size: 1rem;
 
 					.icon {
 						$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.57.063c-3.578 0-6.5 2.921-6.5 6.5 0 3.578 2.922 6.5 6.5 6.5a6.46 6.46 0 0 0 3.83-1.256l2.975 2.974c.957.938 2.363-.5 1.406-1.437l-2.96-2.961a6.46 6.46 0 0 0 1.25-3.82c0-3.579-2.923-6.5-6.5-6.5m0 2c2.5 0 4.5 2.003 4.5 4.5 0 2.5-2 4.5-4.5 4.5-2.496 0-4.5-2-4.5-4.5 0-2.497 2.004-4.5 4.5-4.5'/%3E%3C/svg%3E");

templates/404.html

@@ -3,7 +3,7 @@
 {% block content %}
 <picture>
 	<source srcset="{{ get_url(path='404.png') }}" media="(prefers-reduced-motion: reduce)"></source>
-	<img id="not-found" class="pixels transparent no-hover" srcset="{{ get_url(path='404.gif') }}">
+	<img id="not-found" class="pixels transparent no-hover" alt="404" src="{{ get_url(path='404.gif') }}">
 </picture>
 
 <h1>Page Not Found</h1>
@@ -11,7 +11,7 @@
 <p>The requested page could not be found.{% if config.extra.issues_url %} If you feel this is not normal, then you can create an issue on the issue tracker.{% endif %}</p>
 
 <div class="dialog-buttons">
-	<a onclick="window.history.go(-1)" class="inline-button">Go Back</a>
+	<button class="inline-button" onclick="window.history.go(-1)">Go Back</button>
 	{%- if config.extra.issues_url %}
 		<a class="inline-button colored external" href="{{ config.extra.issues_url }}">File an Issue</a>
 	{%- endif %}

templates/partials/comments.html

@@ -22,9 +22,9 @@
 	<h2>{{ macros_translate::translate(key="comments", default="Comments", language_strings=language_strings) }}</h2>
 	<p>{{ macros_translate::translate(key="comments_description", default="You can comment on this blog post by publicly replying to this post using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.", language_strings=language_strings) }}</p>
 	<div class="dialog-buttons">
-		<a id="load-comments" class="inline-button" onclick="loadComments()" onkeypress="loadComments()" tabindex="0">
+		<button id="load-comments" class="inline-button" onclick="loadComments()">
 			{{- macros_translate::translate(key="load_comments", default="Load Comments", language_strings=language_strings) -}}
-		</a>
+		</button>
 		<a class="inline-button colored external" href="https://{{ host }}/@{{ username }}/{{ id }}">
 			{{- macros_translate::translate(key="open_post", default="Open Post", language_strings=language_strings) -}}
 		</a>

templates/partials/nav.html

@@ -35,12 +35,12 @@
 			{%- endfor -%}
 			{%- if config.build_search_index %}
 				<li id="search">
-					<a onclick="toggleSearch()" onkeypress="toggleSearch()" tabindex="0">
+					<button onclick="toggleSearch()">
 						<i class="icon"></i>
 						<span class="hidden">
 							{{- macros_translate::translate(key="search", default="Search", language_strings=language_strings) -}}
 						</span>
-					</a>
+					</button>
 				</li>
 			{%- endif %}
 			{%- if config.languages | length > 0 %}
@@ -59,7 +59,10 @@
 		</ul>
 	</nav>
 	<div id="search-container">
-		<input id="search-bar" type="search" placeholder="{{ macros_translate::translate(key='search_for', default='Search for…', language_strings=language_strings) }}">
+		<label for="search-bar" class="hidden">
+			{{- macros_translate::translate(key="search", default="Search", language_strings=language_strings) -}}
+		</label>
+		<input id="search-bar" placeholder="{{ macros_translate::translate(key='search_for', default='Search for…', language_strings=language_strings) }}" disabled type="search">
 		<div id="search-results"></div>
 	</div>
 </header>

templates/partials/search.html

@@ -191,7 +191,9 @@
 
     function toggleSearch() {
         var searchContainer = document.getElementById("search-container");
+        var searchBar = document.getElementById("search-bar");
         searchContainer.classList.toggle("active");
+        searchBar.toggleAttribute("disabled");
     }
 
     if (document.readyState === "complete" ||