From 888fc74a57a43c2ebf361eb6132250dd4716eb68 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sat, 31 Jul 2021 21:56:05 +0100
Subject: [PATCH] A11y: use visually hidden styles rather than visibility

- `visibility:hidden` also hides text from assistive technologies, leading to the settings link lacking an accessible name when not hovered (focused with keyboard only, for instance)
- turn the styles around and hide the non-hovered link's span with "visually hidden" styles https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
- also include `:focus` to make the text visible when hovered (for sighted keyboard users)
---
 src/popup/scss/pages.scss | 187 +++++++++++++++++++-------------------
 1 file changed, 96 insertions(+), 91 deletions(-)

diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss
index f3287b1760..ff0d2094c3 100644
--- a/src/popup/scss/pages.scss
+++ b/src/popup/scss/pages.scss
@@ -1,91 +1,96 @@
-@import "variables.scss";
-
-app-sync {
-    content {
-        .btn {
-            margin-bottom: 10px;
-        }
-    }
-}
-
-app-password-generator .password-block {
-    font-size: $font-size-large;
-    font-family: $font-family-monospace;
-    margin: 20px;
-
-    .password-wrapper {
-        text-align: center;
-    }
-}
-
-app-home {
-    position: fixed;
-    height: 100%;
-    width: 100%;
-
-    .center-content {
-        margin-top: -50px;
-        height: calc(100% + 50px);
-    }
-
-    img {
-        width: 284px;
-        margin: 0 auto;
-    }
-
-    p.lead {
-        margin: 30px 0;
-    }
-
-    .btn + .btn {
-        margin-top: 10px;
-    }
-
-    a.settings-icon {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-
-        @include themify($themes) {
-            color: themed('mutedColor');
-        }
-
-        span {
-            visibility: hidden;
-        }
-
-        &:hover {
-            text-decoration: none;
-
-            @include themify($themes) {
-                color: themed('primaryColor');
-            }
-
-            span {
-                visibility: visible;
-            }
-        }
-    }
-}
-
-body.body-sm, body.body-xs {
-    app-home {
-        .center-content {
-            margin-top: 0;
-            height: 100%;
-        }
-
-        p.lead {
-            margin: 15px 0;
-        }
-    }
-}
-
-body.body-full {
-    app-home {
-        .center-content {
-            margin-top: -80px;
-            height: calc(100% + 80px);
-        }
-    }
-}
+@import "variables.scss";
+
+app-sync {
+    content {
+        .btn {
+            margin-bottom: 10px;
+        }
+    }
+}
+
+app-password-generator .password-block {
+    font-size: $font-size-large;
+    font-family: $font-family-monospace;
+    margin: 20px;
+
+    .password-wrapper {
+        text-align: center;
+    }
+}
+
+app-home {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+
+    .center-content {
+        margin-top: -50px;
+        height: calc(100% + 50px);
+    }
+
+    img {
+        width: 284px;
+        margin: 0 auto;
+    }
+
+    p.lead {
+        margin: 30px 0;
+    }
+
+    .btn + .btn {
+        margin-top: 10px;
+    }
+
+    a.settings-icon {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
+
+        &:not(:hover):not(:focus) {
+            span {
+                clip: rect(0 0 0 0);
+                clip-path: inset(50%);
+                height: 1px;
+                overflow: hidden;
+                position: absolute;
+                white-space: nowrap;
+                width: 1px;
+            }
+        }
+
+        &:hover, &:focus {
+            text-decoration: none;
+
+            @include themify($themes) {
+                color: themed('primaryColor');
+            }
+
+        }
+    }
+}
+
+body.body-sm, body.body-xs {
+    app-home {
+        .center-content {
+            margin-top: 0;
+            height: 100%;
+        }
+
+        p.lead {
+            margin: 15px 0;
+        }
+    }
+}
+
+body.body-full {
+    app-home {
+        .center-content {
+            margin-top: -80px;
+            height: calc(100% + 80px);
+        }
+    }
+}