added focus states

inovex · Aug 4, 2023 · 9a6bf6a · 9a6bf6a
1 parent 334137e
commit 9a6bf6a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/components/Footer.scss b/src/components/Footer.scss
@@ -59,6 +59,12 @@ h2 {
   padding: 0;
   gap: 24px;
   align-items: center;
+
+  a {
+    height: 32px;
+    width: 32px;
+    display: block;
+  }
 }
 
 .footer__internal-links {
@@ -74,6 +80,13 @@ h2 {
     text-decoration: none;
     font-weight: 700;
     line-height: 34px;
+    border: 2px solid transparent;
+    border-radius: 4px;
+
+    &:focus-visible {
+      outline: none;
+      border-color: var(--lightmode-pink);
+    }
   }
 }
 
@@ -124,6 +137,13 @@ h2 {
 
 a {
   transition: all 0.1s ease-in-out;
+  border: 2px solid transparent;
+  border-radius: 4px;
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--lightmode-pink);
+  }
   &:hover {
     color: var(--lightmode-pink);
   }

diff --git a/src/components/ProgressButton.scss b/src/components/ProgressButton.scss
@@ -21,11 +21,18 @@
 
 .progress-button__button {
   all: unset;
+  padding: 2px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+
+  &:focus-visible {
+    border-color: var(--lightmode-pink);
+  }
 }
 
 .progress-button__progress {
   position: absolute;
-  bottom: -8px;
+  bottom: -4px;
   right: 4px;
   width: calc(100% - 8px);
   height: 4px;