Merge pull request #41619 from nextcloud/fix/files--active-state-on-l…

…ist-item-click

fix(files): remove focus outline on file list item click and make the link focusable

apps/files/src/components/FileEntry/FileEntryName.vue

@@ -37,20 +37,21 @@
 			@keyup.esc="stopRenaming" />
 	</form>
 
-	<a v-else
+	<component :is="linkTo.is"
+		v-else
 		ref="basename"
 		:aria-hidden="isRenaming"
 		class="files-list__row-name-link"
 		data-cy-files-list-row-name-link
-		v-bind="linkTo"
+		v-bind="linkTo.params"
 		@click="$emit('click', $event)">
 		<!-- File name -->
 		<span class="files-list__row-name-text">
 			<!-- Keep the displayName stuck to the extension to avoid whitespace rendering issues-->
 			<span class="files-list__row-name-" v-text="displayName" />
 			<span class="files-list__row-name-ext" v-text="extension" />
 		</span>
-	</a>
+	</component>
 </template>
 
 <script lang="ts">
@@ -137,8 +138,10 @@ export default Vue.extend({
 		linkTo() {
 			if (this.source.attributes.failed) {
 				return {
-					title: t('files', 'This node is unavailable'),
 					is: 'span',
+					params: {
+						title: t('files', 'This node is unavailable'),
+					},
 				}
 			}
 
@@ -147,16 +150,24 @@ export default Vue.extend({
 				const action = enabledDefaultActions[0]
 				const displayName = action.displayName([this.source], this.currentView)
 				return {
-					title: displayName,
-					role: 'button',
+					is: 'a',
+					params: {
+						title: displayName,
+						role: 'button',
+						tabindex: '0',
+					},
 				}
 			}
 
 			if (this.source?.permissions & Permission.READ) {
 				return {
-					download: this.source.basename,
-					href: this.source.source,
-					title: t('files', 'Download file {name}', { name: this.displayName }),
+					is: 'a',
+					params: {
+						download: this.source.basename,
+						href: this.source.source,
+						title: t('files', 'Download file {name}', { name: this.displayName }),
+						tabindex: '0',
+					},
 				}
 			}
 
@@ -324,7 +335,6 @@ export default Vue.extend({
 			}
 		},
 
-
 		t,
 	},
 })

apps/files/src/components/FilesListVirtual.vue

@@ -544,11 +544,13 @@ export default defineComponent({
 				}
 
 				// Keyboard indicator a11y
-				&:focus .files-list__row-name-text,
-				&:focus-visible .files-list__row-name-text {
+				&:focus .files-list__row-name-text {
 					outline: 2px solid var(--color-main-text) !important;
 					border-radius: 20px;
 				}
+				&:focus:not(:focus-visible) .files-list__row-name-text {
+					outline: none !important;
+				}
 			}
 
 			.files-list__row-name-text {