Keyboard focus and mouse hover feedback for 'Show password' toggle

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

diff --git a/core/css/guest.css b/core/css/guest.css
index dc9a82bda69c74cf3dff56fdc01a1c3b90c092bb..39d76c5676c015261a02d8dc277b8d5c682a77b1 100644 (file)
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -362,9 +362,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 +383,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:focus + label, #personal-show:focus + label,
+#show + label:hover, #dbpassword + label:hover, #personal-show + label:hover {
+  opacity: 1;
+}
 #pass2, input[name='personal-password-clone'] {
        padding: .6em 2.5em .4em .4em;
        width: 8em;

diff --git a/core/css/styles.scss b/core/css/styles.scss
index 11c737af52f1b16aaceb0e856c611e9cffcfb1fe..efd18bf2e52f7387d0c2f2f1697ee22118b13d65 100644 (file)
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -271,10 +271,6 @@ label.infield {
        float: right;
 }
 
-#show, #dbpassword, #personal-show {
-       display: none;
-}
-
 #show + label, #dbpassword + label {
        right: 21px;
        top: 15px !important;
@@ -296,6 +292,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 +320,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 3fdde8da1c29b302a8a7ab291c7f8ddcbd13708a..3a6fd283e0bd6402db64f6f54b953954bf143bd9 100644 (file)
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@@ -50,7 +50,7 @@ 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>
@@ -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 ab69f36a00f8a541b7c038e22298f5e9649d2790..f3edec0c18cd1f9b42c9eb98d978a67c18fc0c11 100644 (file)
--- 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')); ?>" />