Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-29 12:55:21 +01:00
Code Issues Projects Releases Wiki Activity

A11y: use visually hidden styles rather than visibility

Browse Source 
- `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)
This commit is contained in:
Patrick H. Lauke 2021-07-31 21:56:05 +01:00
parent 1b12a278cf
commit 888fc74a57
1 changed files with 96 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
src/popup/scss/pages.scss
View File

@ -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);
}
}
}