diff options
| author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2019-01-25 14:48:59 +0300 |
|---|---|---|
| committer | Roeland Jago Douma <roeland@famdouma.nl> | 2019-02-22 14:54:31 +0300 |
| commit | 58ecd86f55f18696b6b96f5fc06591301b296dee (patch) | |
| tree | 29d5259c657d13c85d741de248f34eedbea868b5 /core/css | |
| parent | d9ecc4d5700c49361c09cd58b61205554988f919 (diff) | |
Fix .infield labels not being readable by screenreaders
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Diffstat (limited to 'core/css')
| -rw-r--r-- | core/css/guest.css | 8 | ||||
| -rw-r--r-- | core/css/inputs.scss | 11 | ||||
| -rw-r--r-- | core/css/styles.scss | 6 |
3 files changed, 13 insertions, 12 deletions
diff --git a/core/css/guest.css b/core/css/guest.css index c924255a55f..f7d9280f9a7 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -331,12 +331,6 @@ input[type='checkbox'].checkbox--white:checked + label:before { background-image: url('../img/actions/checkbox-mark-white.svg'); } - -/* keep the labels for screen readers but hide them since we use placeholders */ -label.infield { - display: none; -} - /* Password strength meter */ .strengthify-wrapper { display: inline-block; @@ -838,6 +832,8 @@ footer .info .entity-name { display: none; } +/* keep the labels for screen readers but hide them since we use placeholders */ +label.infield, .hidden-visually { position: absolute; left:-10000px; diff --git a/core/css/inputs.scss b/core/css/inputs.scss index 37914365a77..e9bee2c62be 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -917,3 +917,14 @@ progress { animation-duration: .7s; animation-timing-function: ease-out; } + +// Keep the labels for screen readers but hide them since we use placeholders +// Same as .hidden-visually +label.infield { + position: absolute; + left:-10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} diff --git a/core/css/styles.scss b/core/css/styles.scss index efd18bf2e52..a066c607522 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -256,12 +256,6 @@ body { user-select: none; } -/* keep the labels for screen readers but hide them since we use placeholders */ - -label.infield { - display: none; -} - /* Show password toggle */ #show, #dbpassword { |