From d93bb90561ae9be803e013eac62c29387d69b1d9 Mon Sep 17 00:00:00 2001
From: David Lapshin <ddaudix@gmail.com>
Date: Wed, 29 May 2024 03:39:59 +0300
Subject: [PATCH] Custom focus indicator and accessebility fixes

---
 sass/_comments.scss              |  4 ----
 sass/_containers.scss            |  5 +----
 sass/_general.scss               | 21 +++++++++++++++++++++
 sass/_nav.scss                   |  6 +++++-
 templates/partials/comments.html |  2 +-
 5 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/sass/_comments.scss b/sass/_comments.scss
index 750deb9..f420d41 100644
--- a/sass/_comments.scss
+++ b/sass/_comments.scss
@@ -12,10 +12,6 @@ section#comments {
 		}
 	}
 
-	#load-comments {
-		cursor: pointer;
-	}
-
 	#comments-wrapper {
 		display: flex;
 		flex-direction: column;
diff --git a/sass/_containers.scss b/sass/_containers.scss
index a242867..639ecda 100644
--- a/sass/_containers.scss
+++ b/sass/_containers.scss
@@ -12,7 +12,6 @@
 
     button {
         -webkit-backdrop-filter: var(--blur);
-        all: unset;
         display: inline-flex;
         position: absolute;
         top: 0.5rem;
@@ -22,11 +21,10 @@
         transition-property: background-color, transform;
         cursor: pointer;
         box-shadow: var(--edge-highlight);
+        border: none;
         border-radius: 50%;
         background-color: var(--fg-muted-1);
         padding: 0.5rem;
-        width: 1rem;
-        height: 1rem;
 
         &:hover {
             background-color: var(--fg-muted-2);
@@ -54,7 +52,6 @@
         i {
             $copy-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
             -webkit-mask-image: $copy-icon;
-            display: inline-block;
             mask-image: $copy-icon;
             transition: background-color var(--transition);
             background-color: var(--fg-muted-4);
diff --git a/sass/_general.scss b/sass/_general.scss
index c304615..e6876e2 100644
--- a/sass/_general.scss
+++ b/sass/_general.scss
@@ -54,3 +54,24 @@ body {
 		}
 	}
 }
+
+:focus-visible {
+	animation: focus-in var(--transition);
+	outline: 0.125rem solid var(--primary-color);
+	outline-offset: 2px;
+}
+
+@supports not selector(:focus-visible) {
+	:focus {
+		animation: focus-in var(--transition);
+		outline: 0.125rem solid var(--primary-color);
+		outline-offset: 2px;
+	}
+}
+
+@keyframes focus-in {
+	from {
+		outline: 0.5rem solid transparent;
+		outline-offset: 0.25rem;
+	}
+}
diff --git a/sass/_nav.scss b/sass/_nav.scss
index 9c24548..933c8a2 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -79,12 +79,16 @@
 
 		#main-content {
 			position: absolute;
-			transform: translateY(-300%);
+			transform: translateY(-100%);
+			opacity: 0;
 			z-index: 999;
+			transition-duration: var(--transition);
+			transition-property: transform, opacity;
 			background: var(--bg-color), var(--primary-color);
 
 			&:focus {
 				transform: translateY(0);
+				opacity: 1;
 			}
 		}
 
diff --git a/templates/partials/comments.html b/templates/partials/comments.html
index 2bfab0d..1cfb155 100644
--- a/templates/partials/comments.html
+++ b/templates/partials/comments.html
@@ -25,7 +25,7 @@
 	</p>
 
 	<p>
-		<a id="load-comments" class="inline-button" onclick="loadComments()">Load Comments</a>
+		<a id="load-comments" class="inline-button" onclick="loadComments()" onkeypress="loadComments()" tabindex="0">Load Comments</a>
 	</p>
 
 	<div id="comments-wrapper">