feat: additional styling for focus indicators

2024-06-30 04:47:39 -04:00 · 2024-06-30 04:47:39 -04:00 · f746b1f66b
parent 1d96d6170d
commit f746b1f66b
2 changed files with 26 additions and 1 deletions
--- a/assets/css/main.css
+++ b/assets/css/main.css
@ -49,6 +49,29 @@ main > a:nth-child(3n+3) {
  justify-self: end;
 }

+.hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+:focus-visible,
+a:focus-visible,
+.focus-visible {
+  position: relative;
+  z-index: 10000 !important;
+  outline: 3px solid var(--blue);
+  box-shadow: 0 0 0 6px var(--lightBlue);
+}
+
+div:focus-visible {
+  outline: none;
+}
+
 /* ------- Eye -------
 CSS blinking eye animation from
 https://codepen.io/creme/pen/rdjXav
@ -58,6 +81,7 @@ https://codepen.io/creme/pen/rdjXav
  position: relative;
  width: 200px;
  height: 150px;
+  z-index: 0;
 }

 .eye .iris {
--- a/index.html
+++ b/index.html
@ -51,7 +51,8 @@
 <body>

  <main>
-    <a href="/test">
+    <a href="/test" aria-label="test">
+      <span class="hidden">Test</span>
      <div class="eye">
        <div class="iris lightBlue indigo"></div>
      </div>