From 8013dab044e7dabb2b61c2aa7e0d47d095ad8e40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Tue, 23 Oct 2018 16:49:56 +0200
Subject: [PATCH] Allow focus on input with keyboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 apps/files/css/files.scss      | 3 ++-
 apps/files/templates/list.php  | 5 +++--
 core/css/styles.scss           | 4 ++++
 core/templates/filepicker.html | 4 ++--
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index cca8585f43..002a09213d 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -973,7 +973,8 @@ table.dragshadow td.size {
 	opacity: .5;
 
 	&:hover,
-	&:focus {
+	&:focus,
+	#showgridview:focus + & {
 		opacity: 1;
 	}
 }
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index 19e93e17ec..2740359436 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -24,9 +24,10 @@
 	<?php endif;?>
 	<input type="hidden" class="max_human_file_size"
 		   value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
-	<input type="checkbox" class="hidden" id="showgridview"
+	<input type="checkbox" class="hidden-visually" id="showgridview"
 		<?php if($_['showgridview']) { ?>checked="checked" <?php } ?>/>
-	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>" title="<?php p($l->t('Toggle grid view'))?>" tabindex="0"></label>
+	<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
+		   title="<?php p($l->t('Toggle grid view'))?>"></label>
 </div>
 
 <div id="emptycontent" class="hidden">
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 0927687fc7..5f68a0d08e 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -742,6 +742,10 @@ code {
 			opacity: 1;
 		}
 	}
+	// keyboard focus
+	#picker-showgridview:focus + #picker-view-toggle {
+		opacity: 1;
+	}
 
 	.filelist-container {
 		box-sizing: border-box;
diff --git a/core/templates/filepicker.html b/core/templates/filepicker.html
index 53daf4111b..4c66dfc707 100644
--- a/core/templates/filepicker.html
+++ b/core/templates/filepicker.html
@@ -1,7 +1,7 @@
 <div id="{dialog_name}" title="{title}">
 	<span class="dirtree breadcrumb"></span>
-	<input type="checkbox" class="hidden" id="picker-showgridview" checked="checked" />
-	<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist" tabindex="0"></label>
+	<input type="checkbox" class="hidden-visually" id="picker-showgridview" checked="checked" />
+	<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist"></label>
 	<div class="filelist-container">
 		<div class="emptycontent">
 			<div class="icon-folder"></div>