bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +00:00
Code Issues 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
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"; @import "variables.scss";
app-sync { app-sync {
content { content {
.btn { .btn {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
} }
app-password-generator .password-block { app-password-generator .password-block {
font-size: $font-size-large; font-size: $font-size-large;
font-family: $font-family-monospace; font-family: $font-family-monospace;
margin: 20px; margin: 20px;
.password-wrapper { .password-wrapper {
text-align: center; text-align: center;
} }
} }
app-home { app-home {
position: fixed; position: fixed;
height: 100%; height: 100%;
width: 100%; width: 100%;
.center-content { .center-content {
margin-top: -50px; margin-top: -50px;
height: calc(100% + 50px); height: calc(100% + 50px);
} }
img { img {
width: 284px; width: 284px;
margin: 0 auto; margin: 0 auto;
} }
p.lead { p.lead {
margin: 30px 0; margin: 30px 0;
} }
.btn + .btn { .btn + .btn {
margin-top: 10px; margin-top: 10px;
} }
a.settings-icon { a.settings-icon {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
@include themify($themes) { @include themify($themes) {
color: themed('mutedColor'); color: themed('mutedColor');
} }
span { &:not(:hover):not(:focus) {
visibility: hidden; span {
} clip: rect(0 0 0 0);
clip-path: inset(50%);
&:hover { height: 1px;
text-decoration: none; overflow: hidden;
position: absolute;
@include themify($themes) { white-space: nowrap;
color: themed('primaryColor'); width: 1px;
} }
}
span {
visibility: visible; &: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%;
} body.body-sm, body.body-xs {
app-home {
p.lead { .center-content {
margin: 15px 0; margin-top: 0;
} height: 100%;
} }
}
p.lead {
body.body-full { margin: 15px 0;
app-home { }
.center-content { }
margin-top: -80px; }
height: calc(100% + 80px);
} body.body-full {
} app-home {
} .center-content {
margin-top: -80px;
height: calc(100% + 80px);
}
}
}