From: Julius Härtl <jus@bitgrid.net>
Date: Mon, 17 Aug 2020 18:04:05 +0000 (+0200)
Subject: Fix keyboard navigation
X-Git-Tag: v20.0.0beta1~35^2~18
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=fa2072e36b44051c113aaf1ba6ae6efd8e057480;p=nextcloud-server.git

Fix keyboard navigation

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index e86b1e094aa..e266d64c6dd 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -29,7 +29,9 @@
 			<a v-tooltip="tooltip"
 				class="edit-panels icon-rename"
 				tabindex="0"
-				@click="showModal">{{ t('dashboard', 'Customize') }}</a>
+				@click="showModal"
+				@keyup.enter="showModal"
+				@keyup.space="showModal">{{ t('dashboard', 'Customize') }}</a>
 		</div>
 
 		<Modal v-if="modal" @close="closeModal">
@@ -427,6 +429,7 @@ export default {
 		opacity: 1;
 		text-align: center;
 
+		&:focus,
 		&:hover {
 			opacity: 1;
 			background-color: var(--color-background-hover);
diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index 800b76dad9d..9c4bfcfa5ec 100644
--- a/apps/dashboard/src/components/BackgroundSettings.vue
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -22,27 +22,35 @@
 
 <template>
 	<div class="background-selector">
-		<div class="background" tabindex="0" @click="pickFile">
+		<a class="background filepicker"
+			tabindex="0"
+			@click="pickFile"
+			@keyup.enter="pickFile"
+			@keyup.space="pickFile">
 			<div class="background--preview">
 				{{ t('dashboard', 'Pick from files') }}
 			</div>
-		</div>
-		<div class="background default"
-			:class="{ 'icon-loading': loading === 'default' }"
+		</a>
+		<a class="background default"
 			tabindex="0"
-			@click="setDefault()">
+			:class="{ 'icon-loading': loading === 'default' }"
+			@click="setDefault"
+			@keyup.enter="setDefault"
+			@keyup.space="setDefault">
 			<div class="background--preview">
-				Default
+				{{ t('dashboard', 'Default images') }}
 			</div>
-		</div>
-		<div v-for="background in shippedBackgrounds"
+		</a>
+		<a v-for="background in shippedBackgrounds"
 			:key="background.name"
+			tabindex="0"
 			class="background"
 			:class="{ 'icon-loading': loading === background.name }"
-			tabindex="0"
-			@click="setShipped(background.name)">
+			@click="setShipped(background.name)"
+			@keyup.enter="setShipped(background.name)"
+			@keyup.space="setShipped(background.name)">
 			<div class="background--preview" :style="{ 'background-image': 'url(' + background.url + ')' }" />
-		</div>
+		</a>
 	</div>
 </template>
 
@@ -138,22 +146,30 @@ export default {
             margin: 8px;
 			text-align: center;
             border-radius: var(--border-radius-large);
+			border-radius: var(--border-radius-large);
+			border: 2px solid var(--color-main-background);
+			overflow: hidden;
 
 			&.current {
 				background-image: var(--color-background-dark);
 			}
 
 			&--preview {
-				width: 172px;
+				width: 100%;
 				height: 96px;
 				background-size: cover;
 				background-position: center center;
-				border-radius: var(--border-radius-large);
-                border: 2px solid var(--color-main-background);
 			}
 
-			&:hover .background--preview,
-            &:focus .background--preview {
+			&.filepicker, &.default {
+				border: 2px solid var(--color-border);
+				.background--preview {
+					line-height: 100px;
+				}
+			}
+
+			&:hover,
+            &:focus {
                 border: 2px solid var(--color-primary);
 			}
 		}