fix: fix a11y

learosema · Feb 6, 2024 · ec2712f · ec2712f
1 parent 5c38137
commit ec2712f
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 6 deletions.
diff --git a/src/assets/css/components/_button.css b/src/assets/css/components/_button.css
@@ -9,12 +9,17 @@
   color: var(--button-fg, transparent);
   border: var(--button-brd, 1px solid transparent);
   text-decoration: none;
+  --outline-color: var(--button-bg);
 }
 
 .button--small {
   font-size: 0.8em;
 }
 
+.button:focus {
+  outline: 2px solid var(--outline-color);
+}
+
 .button:hover {
   background: var(--button-hover-bg);
   color: var(--button-hover-fg);

diff --git a/src/assets/css/components/_header.css b/src/assets/css/components/_header.css
@@ -3,9 +3,11 @@
   color: var(--header-fg);
   padding: var(--space-m) 1rem;
 
-  --outline: var(--fg);
+  --outline-color: var(--fg);
 }
 
+
+
 .header__top {
   display: flex;
   flex-wrap: wrap;
@@ -14,6 +16,7 @@
 }
 
 .header .logo {
+  color: var(--header-fg);
   flex: 0 0 auto;
 }
 

diff --git a/src/assets/css/components/_skip-link.css b/src/assets/css/components/_skip-link.css
@@ -3,11 +3,17 @@
   top: 1rem;
   left: 1rem;
   z-index: 100;
-  font-size: var(--step-2);
+  font-family: system-ui, sans-serif;
   padding: .5em;
   border-radius: .5rem;
-  color: var(--header-fg);
-  background: var(--header-bg);
+  border: 2px solid var(--button-fg);
+  color: var(--button-fg);
+  background: var(--button-bg);
+
+  &:hover {
+    color: var(--button-hover-fg);
+    background: var(--button-hover-bg);
+  }
 }
 
 .skip-link:not(:focus):not(:active) {

diff --git a/src/assets/css/config/_body.css b/src/assets/css/config/_body.css
@@ -6,5 +6,5 @@ body {
 }
 
 *:focus-visible {
-  outline: 2px solid var(--outline, #37f);
+  outline: 2px solid currentColor;
 }
diff --git a/src/assets/css/config/_themes.css b/src/assets/css/config/_themes.css
@@ -3,7 +3,7 @@
 
   --bg: var(--gray-6);
   --fg: #fff;
-  --outline-color: var(--blue-1);
+  --outline-color: var(--blue-1, currentColor);
 
   --headline-fg: var(--pink-5);