diff options
| -rw-r--r-- | core/css/guest.css | 16 | ||||
| -rw-r--r-- | core/css/inputs.scss | 11 | ||||
| -rw-r--r-- | core/css/styles.scss | 26 | ||||
| -rw-r--r-- | core/templates/installation.php | 6 | ||||
| -rw-r--r-- | settings/templates/settings/personal/security.php | 2 |
5 files changed, 36 insertions, 25 deletions
diff --git a/core/css/guest.css b/core/css/guest.css index dc9a82bda69..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; @@ -362,9 +356,6 @@ label.infield { top: .8em; float: right; } -#show, #dbpassword-toggle, #personal-show { - display: none; -} #show + label, #dbpassword-toggle + label { right: 21px; top: 15px !important; @@ -386,6 +377,11 @@ label.infield { #show + label:before, #dbpassword-toggle + label:before, #personal-show + label:before { display: none; } +/* Feedback for keyboard focus and mouse hover */ +#show:focus + label, #dbpassword-toggle:focus + label, #personal-show:focus + label, +#show + label:hover, #dbpassword-toggle + label:hover, #personal-show + label:hover { + opacity: 1; +} #pass2, input[name='personal-password-clone'] { padding: .6em 2.5em .4em .4em; width: 8em; @@ -836,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 11c737af52f..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 { @@ -271,10 +265,6 @@ label.infield { float: right; } -#show, #dbpassword, #personal-show { - display: none; -} - #show + label, #dbpassword + label { right: 21px; top: 15px !important; @@ -296,6 +286,18 @@ label.infield { opacity: .3; } +/* Feedback for keyboard focus and mouse hover */ +#show, +#dbpassword, +#personal-show { + &:focus + label { + opacity: 1; + } + + label:hover { + opacity: 1; + } +} + #show + label:before, #dbpassword + label:before, #personal-show + label:before { display: none; } @@ -312,8 +314,8 @@ label.infield { #personal-show + label { display: block; right: 0; - margin-top: -41px; - margin-right: -6px; + margin-top: -43px; + margin-right: -4px; padding: 22px; } diff --git a/core/templates/installation.php b/core/templates/installation.php index 3fdde8da1c2..6dd7ed31382 100644 --- a/core/templates/installation.php +++ b/core/templates/installation.php @@ -50,14 +50,14 @@ script('core', [ value="<?php p($_['adminpass']); ?>" autocomplete="off" autocapitalize="none" autocorrect="off" required> <label for="adminpass" class="infield"><?php p($l->t( 'Password' )); ?></label> - <input type="checkbox" id="show" name="show"> + <input type="checkbox" id="show" class="hidden-visually" name="show"> <label for="show"></label> </p> </fieldset> <?php if(!$_['directoryIsSet'] OR !$_['dbIsSet'] OR count($_['errors']) > 0): ?> <fieldset id="advancedHeader"> - <legend><a id="showAdvanced"><?php p($l->t( 'Storage & database' )); ?> <img src="<?php print_unescaped(image_path('', 'actions/caret-white.svg')); ?>" /></a></legend> + <legend><a id="showAdvanced" tabindex="0" href="#"><?php p($l->t( 'Storage & database' )); ?> <img src="<?php print_unescaped(image_path('', 'actions/caret-white.svg')); ?>" /></a></legend> </fieldset> <?php endif; ?> @@ -113,7 +113,7 @@ script('core', [ value="<?php p($_['dbpass']); ?>" autocomplete="off" autocapitalize="none" autocorrect="off"> <label for="dbpass" class="infield"><?php p($l->t( 'Database password' )); ?></label> - <input type="checkbox" id="dbpassword-toggle" name="dbpassword-toggle"> + <input type="checkbox" id="dbpassword-toggle" class="hidden-visually" name="dbpassword-toggle"> <label for="dbpassword-toggle"></label> </p> <p class="groupmiddle"> diff --git a/settings/templates/settings/personal/security.php b/settings/templates/settings/personal/security.php index ab69f36a00f..f3edec0c18c 100644 --- a/settings/templates/settings/personal/security.php +++ b/settings/templates/settings/personal/security.php @@ -52,7 +52,7 @@ if($_['passwordChangeSupported']) { placeholder="<?php p($l->t('New password')); ?>" data-typetoggle="#personal-show" autocomplete="off" autocapitalize="none" autocorrect="off" /> - <input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label> + <input type="checkbox" id="personal-show" class="hidden-visually" name="show" /><label for="personal-show" class="personal-show-label"></label> </div> <input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" /> |