fix: Adjust favorite icon to be accessible

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

cypress/e2e/albums.cy.js

@@ -85,20 +85,20 @@ describe('Manage albums', () => {
 	it('Favorite a file from an album content view', () => {
 		selectMedia([0])
 		favoriteSelection()
-		cy.get('[data-test="media"]').eq(0).find('[aria-label="The file is in the favorites"]')
+		cy.get('[data-test="media"]').eq(0).find('[aria-label="Favorite"]')
 		unfavoriteSelection()
 		unselectMedia([0])
-		cy.get('[aria-label="The file is in the favorites"]').should('not.exist')
+		cy.get('[aria-label="Favorite"]').should('not.exist')
 	})
 
 	it('Favorite multiple files from an album content view', () => {
 		selectMedia([1, 2])
 		favoriteSelection()
-		cy.get('[data-test="media"]').eq(1).find('[aria-label="The file is in the favorites"]')
-		cy.get('[data-test="media"]').eq(2).find('[aria-label="The file is in the favorites"]')
+		cy.get('[data-test="media"]').eq(1).find('[aria-label="Favorite"]')
+		cy.get('[data-test="media"]').eq(2).find('[aria-label="Favorite"]')
 		unfavoriteSelection()
 		unselectMedia([1, 2])
-		cy.get('[aria-label="The file is in the favorites"]').should('not.exist')
+		cy.get('[aria-label="Favorite"]').should('not.exist')
 	})
 
 	// it('Download a file from an album content view', () => {

cypress/e2e/timelines.cy.js

@@ -74,20 +74,20 @@ describe('View list of photos in the main timeline', () => {
 	it('Favorite a file from a timeline', () => {
 		selectMedia([0])
 		favoriteSelection()
-		cy.get('[data-test="media"]').eq(0).find('[aria-label="The file is in the favorites"]')
+		cy.get('[data-test="media"]').eq(0).find('[aria-label="Favorite"]')
 		unfavoriteSelection()
 		unselectMedia([0])
-		cy.get('[aria-label="The file is in the favorites"]').should('not.exist')
+		cy.get('[aria-label="Favorite"]').should('not.exist')
 	})
 
 	it('Favorite multiple files from a timeline', () => {
 		selectMedia([1, 2])
 		favoriteSelection()
-		cy.get('[data-test="media"]').eq(1).find('[aria-label="The file is in the favorites"]')
-		cy.get('[data-test="media"]').eq(2).find('[aria-label="The file is in the favorites"]')
+		cy.get('[data-test="media"]').eq(1).find('[aria-label="Favorite"]')
+		cy.get('[data-test="media"]').eq(2).find('[aria-label="Favorite"]')
 		unfavoriteSelection()
 		unselectMedia([1, 2])
-		cy.get('[aria-label="The file is in the favorites"]').should('not.exist')
+		cy.get('[aria-label="Favorite"]').should('not.exist')
 	})
 
 	it('Download a file from a timeline', () => {

src/components/FavoriteIcon.vue

@@ -0,0 +1,95 @@
+<!--
+  - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+  -
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+<template>
+	<NcIconSvgWrapper class="favorite-marker-icon" :name="t('photos', 'Favorite')" :svg="StarSvg" />
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcIconSvgWrapper } from '@nextcloud/vue'
+import { defineComponent } from 'vue'
+
+// eslint-disable-next-line import/no-unresolved, n/no-missing-import
+import StarSvg from '@mdi/svg/svg/star.svg?raw'
+
+/**
+ * A favorite icon to be used for overlaying favorite entries like the file preview / icon
+ * It has a stroke around the star icon to ensure enough contrast for accessibility.
+ *
+ * If the background has a hover state you might want to also apply it to the stroke like this:
+ * ```scss
+ * .parent:hover :deep(.favorite-marker-icon svg path) {
+ *      stroke: var(--color-background-hover);
+ * }
+ * ```
+ */
+export default defineComponent({
+	name: 'FavoriteIcon',
+	components: {
+		NcIconSvgWrapper,
+	},
+	data() {
+		return {
+			StarSvg,
+		}
+	},
+	mounted() {
+		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')
+		})
+	},
+	methods: {
+		t,
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.favorite-marker-icon {
+	color: #a08b00;
+	// Override NcIconSvgWrapper defaults (clickable area)
+	min-width: unset !important;
+	min-height: unset !important;
+
+	:deep() {
+		svg {
+			// We added a stroke for a11y so we must increase the size to include the stroke
+			width: 32px !important;
+			height: 32px !important;
+
+			// Override NcIconSvgWrapper defaults of 20px
+			max-width: unset !important;
+			max-height: unset !important;
+
+			// Sow a border around the icon for better contrast
+			path {
+				stroke: var(--color-main-background);
+				stroke-width: 10px;
+				stroke-linejoin: round;
+				paint-order: stroke;
+			}
+		}
+	}
+}
+</style>

src/components/File.vue

@@ -77,17 +77,16 @@
 			:checked="selected"
 			@update:checked="onToggle" />
 
-		<Star v-if="file.favorite === 1"
+		<FavoriteIcon v-if="file.favorite === 1"
 			v-once
-			class="favorite-state"
-			:aria-label="t('photos', 'The file is in the favorites')" />
+			class="favorite-state" />
 	</div>
 </template>
 
 <script>
-import Star from 'vue-material-design-icons/Star.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 import PlayCircleIcon from 'vue-material-design-icons/PlayCircle.vue'
+import FavoriteIcon from './FavoriteIcon.vue'
 
 import { generateUrl } from '@nextcloud/router'
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
@@ -97,8 +96,8 @@ import { isCachedPreview } from '../services/PreviewService.js'
 export default {
 	name: 'File',
 	components: {
+		FavoriteIcon,
 		NcCheckboxRadioSwitch,
-		Star,
 		VideoIcon,
 		PlayCircleIcon,
 	},
@@ -367,15 +366,6 @@ export default {
 		top: 2px;
 		// Fancy calculation to render the start in the middle of narrow images.
 		right: min(2px, calc(50% - 7px));
-
-		:deep .material-design-icon__svg {
-			fill: #FC0;
-
-			path {
-				stroke: var(--color-primary-element-light);
-				stroke-width: 1px;
-			}
-		}
 	}
 }
 </style>