From 888fc74a57a43c2ebf361eb6132250dd4716eb68 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 31 Jul 2021 21:56:05 +0100 Subject: [PATCH 1/3] 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); + } + } +} From 0b024e11d6be276ed4f8f9702177384d4cf377ad Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 17 Sep 2021 21:19:34 +0100 Subject: [PATCH 2/3] Update src/popup/scss/pages.scss Co-authored-by: Addison Beck --- src/popup/scss/pages.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss index ff0d2094c3..4875783b66 100644 --- a/src/popup/scss/pages.scss +++ b/src/popup/scss/pages.scss @@ -68,7 +68,6 @@ app-home { @include themify($themes) { color: themed('primaryColor'); } - } } } From c39636fe8aeef38a62201fa3b677e6b9a8b9e55c Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 30 Sep 2021 09:04:11 +0100 Subject: [PATCH 3/3] Change CRLF to LF --- src/popup/scss/pages.scss | 190 +++++++++++++++++++------------------- 1 file changed, 95 insertions(+), 95 deletions(-) diff --git a/src/popup/scss/pages.scss b/src/popup/scss/pages.scss index 4875783b66..57b422bb39 100644 --- a/src/popup/scss/pages.scss +++ b/src/popup/scss/pages.scss @@ -1,95 +1,95 @@ -@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); - } - } -} +@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); + } + } +}