fix(files): accessibility tab into recycled invisible files rows

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

2 files changed, 21 insertions, 1 deletions

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 1c96a7da3e1..b0324a6ab4a 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -51,7 +51,7 @@
 				</span>
 
 				<!-- File name -->
-				<span>{{ displayName }}</span>
+				<span class="files-list__row-name-text">{{ displayName }}</span>
 			</a>
 		</td>
 
@@ -298,7 +298,14 @@ export default Vue.extend({
 		active(active) {
 			if (active === false) {
 				this.resetState()
+
+				// When the row is not active anymore
+				// remove the tabindex from the row
+				this.$el.parentNode.style.display = 'none'
+				return
 			}
+			// Restore default tabindex
+			this.$el.parentNode.style.removeProperty('display')
 		},
 		/**
 		 * When the source changes, reset the preview
diff --git a/apps/files/src/mixins/fileslist-row.scss b/apps/files/src/mixins/fileslist-row.scss
index 22364efcb46..6302fda0c74 100644
--- a/apps/files/src/mixins/fileslist-row.scss
+++ b/apps/files/src/mixins/fileslist-row.scss
@@ -112,6 +112,19 @@ td, th {
 		// Fill cell height and width
 		width: 100%;
 		height: 100%;
+
+		// Keyboard indicator a11y
+		&:focus .files-list__row-name-text,
+		&:focus-visible .files-list__row-name-text {
+			outline: 2px solid var(--color-main-text) !important;
+			border-radius: 20px;
+		}
+	}
+
+	.files-list__row-name-text {
+		// Make some space for the outline
+		padding: 5px 10px;
+		margin-left: -10px;
 	}
 }