fix(files): Remove aria-label from span and move to favorite icon

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud · Dec 1, 2023 · f79a1ad · f79a1ad
1 parent 2091b5a
commit f79a1ad
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/apps/files/src/components/FileEntry/FavoriteIcon.vue b/apps/files/src/components/FileEntry/FavoriteIcon.vue
@@ -20,10 +20,13 @@
   -
   -->
 <template>
-	<NcIconSvgWrapper class="favorite-marker-icon" :svg="StarSvg" />
+	<NcIconSvgWrapper class="favorite-marker-icon" :name="t('files', 'Favorite')" :svg="StarSvg" />
 </template>
 
-<script>
+<script lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
 import StarSvg from '@mdi/svg/svg/star.svg?raw'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 
@@ -38,7 +41,7 @@ import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js
  * }
  * ```
  */
-export default {
+export default defineComponent({
 	name: 'FavoriteIcon',
 	components: {
 		NcIconSvgWrapper,
@@ -52,10 +55,14 @@ export default {
 		await this.$nextTick()
 		// MDI default viewbox is "0 0 24 24" but we add a stroke of 10px so we must adjust it
 		const el = this.$el.querySelector('svg')
-		el.setAttribute('viewBox', '-4 -4 30 30')
+		el?.setAttribute?.('viewBox', '-4 -4 30 30')
 	},
-}
+	methods: {
+		t,
+	},
+})
 </script>
+
 <style lang="scss" scoped>
 .favorite-marker-icon {
 	color: #a08b00;

diff --git a/apps/files/src/components/FileEntry/FileEntryPreview.vue b/apps/files/src/components/FileEntry/FileEntryPreview.vue
@@ -22,7 +22,7 @@
 <template>
 	<span class="files-list__row-icon">
 		<template v-if="source.type === 'folder'">
-			<FolderOpenIcon v-once v-if="dragover" />
+			<FolderOpenIcon v-if="dragover" v-once />
 			<template v-else>
 				<FolderIcon v-once />
 				<OverlayIcon :is="folderOverlay"
@@ -42,12 +42,10 @@
 			@error="backgroundFailed = true"
 			@load="backgroundFailed = false">
 
-		<FileIcon v-once v-else />
+		<FileIcon v-else v-once />
 
 		<!-- Favorite icon -->
-		<span v-if="isFavorite"
-			class="files-list__row-icon-favorite"
-			:aria-label="t('files', 'Favorite')">
+		<span v-if="isFavorite" class="files-list__row-icon-favorite">
 			<FavoriteIcon v-once />
 		</span>