From d1ba0d52abc434d7a444068319ffa9b115d03eb8 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 25 Jan 2019 12:00:16 +0100
Subject: Keyboard focus and mouse hover feedback for 'Show password' toggle

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/css/guest.css              |  8 +++++---
 core/css/styles.scss            | 20 ++++++++++++++------
 core/templates/installation.php |  4 ++--
 3 files changed, 21 insertions(+), 11 deletions(-)

(limited to 'core')

diff --git a/core/css/guest.css b/core/css/guest.css
index dc9a82bda69..39d76c5676c 100644
--- 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 11c737af52f..efd18bf2e52 100644
--- 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 3fdde8da1c2..3a6fd283e0b 100644
--- 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">
-- 
cgit v1.2.3


From 97ad80524fb1c30980c8f361b29c7d62500355fe Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 25 Jan 2019 12:14:01 +0100
Subject: Fix tabbability of 'Storage & database' in install, open on enter
 stilll missing

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/templates/installation.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'core')

diff --git a/core/templates/installation.php b/core/templates/installation.php
index 3a6fd283e0b..3ff94f05d0a 100644
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@@ -57,7 +57,7 @@ script('core', [
 
 	<?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"><?php p($l->t( 'Storage & database' )); ?> <img src="<?php print_unescaped(image_path('', 'actions/caret-white.svg')); ?>" /></a></legend>
 	</fieldset>
 	<?php endif; ?>
 
-- 
cgit v1.2.3


From d9ecc4d5700c49361c09cd58b61205554988f919 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 25 Jan 2019 12:38:02 +0100
Subject: Installation: Fix focus of database password toggle

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/css/guest.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'core')

diff --git a/core/css/guest.css b/core/css/guest.css
index 39d76c5676c..c924255a55f 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -384,8 +384,8 @@ label.infield {
 	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 {
+#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'] {
-- 
cgit v1.2.3


From 58ecd86f55f18696b6b96f5fc06591301b296dee Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 25 Jan 2019 12:48:59 +0100
Subject: Fix .infield labels not being readable by screenreaders

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 core/css/guest.css   |  8 ++------
 core/css/inputs.scss | 11 +++++++++++
 core/css/styles.scss |  6 ------
 3 files changed, 13 insertions(+), 12 deletions(-)

(limited to 'core')

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 {
-- 
cgit v1.2.3


From 291df5ddfbc7907f260370ba1c9f6dbbc6cd84a7 Mon Sep 17 00:00:00 2001
From: Julius Härtl <jus@bitgrid.net>
Date: Fri, 22 Feb 2019 11:07:16 +0100
Subject: Make Storage&database open on enter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 core/templates/installation.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'core')

diff --git a/core/templates/installation.php b/core/templates/installation.php
index 3ff94f05d0a..6dd7ed31382 100644
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@@ -57,7 +57,7 @@ script('core', [
 
 	<?php if(!$_['directoryIsSet'] OR !$_['dbIsSet'] OR count($_['errors']) > 0): ?>
 	<fieldset id="advancedHeader">
-		<legend><a id="showAdvanced" tabindex="0"><?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; ?>
 
-- 
cgit v1.2.3