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

@@ -50,20 +50,25 @@ app-home {
             color: themed('mutedColor');
         }
 
-        span {
-            visibility: hidden;
+        &: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 {
+        &:hover, &:focus {
             text-decoration: none;
 
             @include themify($themes) {
                 color: themed('primaryColor');
             }
 
-            span {
-                visibility: visible;
-            }
         }
     }
 }