From fa4dfe6e775b706877759abd4d242f5fd9c9ac66 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 24 Aug 2023 02:00:40 +0200
Subject: [PATCH] fix(FilePicker): Ensure focus-visible outline is visible for
 all focusable elements

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/FilePicker/FileList.vue           |  4 ++++
 lib/components/FilePicker/FilePicker.vue         |  5 +++++
 .../FilePicker/FilePickerNavigation.vue          | 16 +++++++++++++---
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue
index fce6c092..ed7ba48f 100644
--- a/lib/components/FilePicker/FileList.vue
+++ b/lib/components/FilePicker/FileList.vue
@@ -172,6 +172,8 @@ function onChangeDirectory(dir: Node) {
 <style scoped lang="scss">
 .file-picker {
 	&__files {
+		// ensure focus outlines are visible
+		padding: 2px;
 		padding-inline-start: 12px; // align with bread crumbs
 		min-height: calc(5 * var(--row-height, 50px)); // make file list not jumping when loading (1x header 4x loading placeholders)
 		overflow: scroll auto;
@@ -185,6 +187,8 @@ function onChangeDirectory(dir: Node) {
 			position: sticky;
 			top: 0;
 			background-color: var(--color-main-background);
+			// ensure focus outline of buttons is visible
+			padding: 2px;
 
 			&.row-checkbox {
 				width: 44px;
diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
index a38e1273..7f5f8555 100644
--- a/lib/components/FilePicker/FilePicker.vue
+++ b/lib/components/FilePicker/FilePicker.vue
@@ -269,12 +269,17 @@ export default {
 	}
 
 	&__main {
+		box-sizing: border-box;
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		// Auto fit height
 		min-height: 0;
 		flex: 1;
+
+		* {
+			box-sizing: border-box;
+		}
 	}
 }
 
diff --git a/lib/components/FilePicker/FilePickerNavigation.vue b/lib/components/FilePicker/FilePickerNavigation.vue
index d000a04c..888b3a81 100644
--- a/lib/components/FilePicker/FilePickerNavigation.vue
+++ b/lib/components/FilePicker/FilePickerNavigation.vue
@@ -99,6 +99,8 @@ const updateFilterValue = (value: string) => emit('update:filterString', value)
 		align-items: start;
 		gap: 0.5rem;
 		min-width: 200px;
+		// ensure focus outline is visible
+		padding-block: 2px;
 
 		:deep(.button-vue__wrapper) {
 			justify-content: start;
@@ -137,9 +139,17 @@ const updateFilterValue = (value: string) => emit('update:filterString', value)
 }
 </style>
 
-<style>
-.file-picker__navigation .v-select.select {
-	min-width: 220px;
+<style lang="scss">
+/* Ensure focus outline is visible */
+.file-picker__navigation {
+	padding-inline: 2px;
+	&, * {
+		box-sizing: border-box;
+	}
+
+	.v-select.select {
+		min-width: 220px;
+	}
 }
 
 @media (min-width: 513px) and (max-width: 736px) {