Show outlines on links for better keyboard accessibility

dar5hak · Oct 9, 2024 · ac2ecde · ac2ecde
1 parent 5a1011e
commit ac2ecde
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/sass/_global.scss b/sass/_global.scss
@@ -59,11 +59,12 @@ small {
 
 a {
   color: unset;
-  outline: none;
+  border-radius: 2px;
   text-decoration-color: var(--accent-color);
   text-decoration-skip-ink: none;
   text-decoration-thickness: 2px;
   text-underline-offset: 3px;
+  transition: background-color 200ms, outline-width 200ms;
 
   // TODO: uncomment this when Chromium gets its shit together and
   // stops pretending to support this
@@ -81,6 +82,10 @@ a {
   // }
 }
 
+a:focus {
+  outline: 4px solid var(--accent-color);
+}
+
 a[data-focusable]::before {
   content: "▶";
   display: inline-block;
@@ -91,6 +96,8 @@ a[data-focusable]::before {
 
 a[data-focusable]:focus::before {
   visibility: visible;
+  background-color: var(--accent-color);
+  text-decoration: none;
 }
 
 address {

diff --git a/templates/index.html b/templates/index.html
@@ -60,7 +60,9 @@
       margin: 0.5rem;
     }
 
-    .footer-menu a {
+    .footer-menu a:has(.icon-path) {
+      display: inline-block;
+      line-height: 1;
       color: var(--primary-color-dimmed);
       text-decoration: none;
       transition: color 250ms;