Update keyboard access (a11y) (#128)

* Add outlines, remove unused transition/border-radius * Run prettier * Remove unused transitions * Update Toolbar outline styles * Run prettier
ekaterinburgdev · Dec 21, 2023 · 090a524 · 090a524
1 parent 06241de
commit 090a524
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 40 deletions.
diff --git a/components/ArrowNavLink/ArrowNavLink.module.css b/components/ArrowNavLink/ArrowNavLink.module.css
@@ -1,10 +1,9 @@
 .ArrowNavLink {
     box-shadow: none;
     margin: 0 0 76px;
-    border-radius: 2rem;
     font-weight: 400;
     font-size: clamp(14px, 1.8vw, 18px);
-    transition: 0.3s;
+    transition: 0.3s ease text-decoration;
     color: var(--color);
 }
 

diff --git a/components/Button/Button.module.css b/components/Button/Button.module.css
@@ -10,6 +10,7 @@
     cursor: pointer;
     transition: all 0.15s ease;
     text-decoration: none;
+    outline-offset: 3px;
 }
 
 .Button_type-primary {

diff --git a/components/Ecosystem/Ecosystem.module.css b/components/Ecosystem/Ecosystem.module.css
@@ -3,6 +3,12 @@
     --ecosystem-color: var(--color-bg-light);
 }
 
+.Ecosystem a:focus-visible,
+.Ecosystem button:focus-visible {
+    outline: 2px solid black;
+    outline-offset: 4px;
+}
+
 @media print {
     .Ecosystem {
         display: none;

diff --git a/components/ManualPreview/ManualPreview.module.css b/components/ManualPreview/ManualPreview.module.css
@@ -14,10 +14,7 @@
     font-weight: 500;
     font-size: clamp(18px, 5vw, 21px);
     background: var(--manual-bg-back);
-}
-
-.manual:focus-visible {
-    outline-width: 0;
+    outline-offset: 3px;
 }
 
 .manualEmoji {
@@ -71,10 +68,6 @@
     transform: matrix(1, -0.125, 0, 1, 0, 0) scaleX(0.95);
 }
 
-.manual:focus-visible {
-    outline: 2px solid black;
-}
-
 .manualTitle {
     position: relative;
     font-weight: 400;

diff --git a/components/ManualTitle/ManualTitle.module.css b/components/ManualTitle/ManualTitle.module.css
@@ -6,21 +6,20 @@
 .ManualTitle__mainpage {
     position: relative;
     align-self: flex-start;
-    border-radius: 16px;
     padding-top: 4px;
-    color: var(--color);
-    font-size: 14px;
+    color: hsl(var(--color-hsl) / 55%);
     font-weight: 500;
-    transition: 0.15s ease;
-    text-underline-offset: 4px;
-    text-transform: uppercase;
+    font-size: 14px;
     letter-spacing: 0.1em;
-    opacity: 0.55;
-    transition: 0.15s ease;
+    text-transform: uppercase;
+    transition:
+        0.15s ease text-underline,
+        0.15s ease color;
+    text-underline-offset: 4px;
 }
 
 .ManualTitle__mainpage:hover {
-    opacity: 0.8;
+    color: hsl(var(--color-hsl) / 80%);
 }
 
 .ManualTitle__mainpage:hover::after {
@@ -30,19 +29,20 @@
 .ManualTitle__mainpage::after {
     content: '/';
     position: absolute;
-    top: 4px;
-    right: -12px;
+    top: 0;
+    padding-top: 4px;
+    padding-left: 5px;
     opacity: 0.6;
 }
 
 .ManualTitle__caption {
-    line-height: 1.2;
-    font-size: 24px;
-    font-weight: 500;
-    transition: 0.2s;
     margin-top: 6px;
     margin-bottom: 8px;
     color: var(--color);
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 1.2;
+    transition: 0.15s ease text-decoration;
     text-decoration-color: transparent;
     text-underline-offset: 5.5px;
     text-decoration-thickness: 2px;
@@ -54,7 +54,7 @@
     }
 
     .ManualTitle__caption {
-        font-size: 40px;
         color: inherit;
+        font-size: 40px;
     }
 }
diff --git a/components/ProjectLinks/ProjectLinks.module.css b/components/ProjectLinks/ProjectLinks.module.css
@@ -11,6 +11,8 @@
 .ProjectLinks__github {
     display: none;
     color: black;
+    outline-offset: 3px;
+    border-radius: 50%;
 }
 
 .ProjectLinks__github svg {

diff --git a/components/TableOfContents/TableOfContents.module.css b/components/TableOfContents/TableOfContents.module.css
@@ -81,7 +81,8 @@ html:has(.open) {
     padding: 12px 16px 12px 16px;
     font-size: 16px;
     border-radius: 8px;
-    transition: 0.15s ease;
+    transition: 0.15s ease background-color;
+    outline-offset: -1px;
 }
 
 .tableOfContentsLink:not(:only-child) {
@@ -165,8 +166,6 @@ html:has(.open) {
     display: flex;
     color: var(--color);
     text-decoration: none;
-    border-radius: 8px;
-    transition: 0.15s ease;
     padding: 0 8px;
     position: relative;
     font-size: 14px;
@@ -178,8 +177,13 @@ html:has(.open) {
     z-index: 2;
 }
 
-.innerTableOfContentsLink:hover span {
+.innerTableOfContentsLink span {
     text-decoration: underline;
+    text-decoration-color: transparent;
+    transition: 0.15s ease text-decoration;
+}
+
+.innerTableOfContentsLink:hover span {
     text-decoration-color: hsl(var(--color-hsl) / 30%);
 }
 
@@ -245,7 +249,7 @@ html:has(.open) {
         scrollbar-width: none;
         padding: 0px 11px 11px 9px;
     }
-    
+
     html:has(.open) {
         overflow: auto;
     }

diff --git a/components/Toolbar/Toolbar.module.css b/components/Toolbar/Toolbar.module.css
@@ -35,17 +35,18 @@
 }
 
 .Toolbar__item {
-    padding: 4px;
     margin: 0 -2px;
+    padding: 4px;
     border: 0;
     border-radius: 50%;
     background: transparent;
     color: var(--color);
-    outline: none;
-    outline-width: 0;
+    outline-offset: 5px;
     font-size: 0;
     cursor: pointer;
-    transition: 0.15s ease;
+    transition:
+        0.15s ease color,
+        0.15s ease background-color;
 }
 
 .Toolbar__item:hover {
@@ -58,10 +59,6 @@
     color: white;
 }
 
-.Toolbar__item:focus-visible svg {
-    box-shadow: inset 0 0 0 2px black;
-}
-
 .hidden {
     visibility: hidden;
 }

diff --git a/styles/globals.css b/styles/globals.css
@@ -38,7 +38,7 @@ a {
     text-decoration-thickness: 1px;
     text-underline-offset: 0.3em;
     text-decoration-color: var(--color-underline);
-    transition: 0.15s ease;
+    transition: 0.15s ease text-decoration;
 }
 
 a:hover {