fix(accessibility): fix some accessibility issues

Signed-off-by: Anna Larch <anna@nextcloud.com>

Author: miaulalala

img/activity-dark.svg

@@ -220,15 +220,22 @@ $spacing: 4px;
 	}
 
 	&:not(&--disabled) &__input:hover + &__label,
-	&:not(&--disabled) &__input:focus + &__label {
+	&:not(&--disabled) &__input:focus + &__label,
+	&:not(&--disabled) &__input:focus-visible + &__label {
 		background-color: var(--color-primary-element-light);
 	}
 
-	// Increase focus effect
-	&:not(&--disabled) &__input:focus + &__label {
+	// Increase focus effect for keyboard navigation
+	&:not(&--disabled) &__input:focus + &__label,
+	&:not(&--disabled) &__input:focus-visible + &__label {
 		box-shadow: 0 0 0 2px var(--color-primary-element);
 	}
 
+	// Suppress focus ring for mouse users in browsers that support :focus-visible
+	&:not(&--disabled) &__input:focus:not(:focus-visible) + &__label {
+		box-shadow: none;
+	}
+
 	// Switch specific rules
 	&-switch:not(&--checked) &__icon {
 		color: var(--color-text-lighter);

img/activity.svg

@@ -38,7 +38,7 @@
 							'activity-entry__preview-mimetype': preview.isMimeTypeIcon,
 						}"
 						:src="preview.source"
-						:alt="preview.link ? t('activity', 'Open {filename}', { filename: preview.filename }) : ''">
+						:alt="preview.link ? t('activity', 'Open {filename}', { filename: preview.filename }) : preview.filename">
 				</component>
 			</li>
 		</ul>

img/notifications-dark.svg

@@ -14,7 +14,7 @@
 		<span
 			v-if="isRoot"
 			:title="t('activity', 'Home')"
-			aria-label="t('activity', 'Home')"
+			:aria-label="t('activity', 'Home')"
 			class="icon-home" />
 	</span>
 </template>

src/components/CheckboxInput.vue

@@ -6,7 +6,7 @@
 <template>
 	<a :href="link">
 		<div :id="`opengraph-${id}`" class="opengraph">
-			<div v-if="thumbIsDefined" class="opengraph-thumb" :style="`background-image: url('${thumb}')`" />
+			<div v-if="thumbIsDefined" class="opengraph-thumb" :style="`background-image: url('${thumb}')`" aria-hidden="true" />
 			<div class="opengraph-name" :class="{ 'opengraph-with-thumb': thumbIsDefined }">{{ name }}</div>
 			<div class="opengraph-description" :class="{ 'opengraph-with-thumb': thumbIsDefined }">{{ description }}</div>
 			<span class="opengraph-website">{{ website }}</span>

src/components/activities/GenericActivity.vue

@@ -25,7 +25,7 @@
 				<NcIconSvgWrapper :svg="appIconSVG" :size="36" />
 			</template>
 		</NcEmptyContent>
-		<div ref="container" class="activity-app__container">
+		<div ref="container" class="activity-app__container" aria-live="polite" :aria-busy="loading">
 			<ActivityGroup v-for="activities, date of groupedActivities" :key="date" :activities="activities" />
 			<!-- Only show if not showing the inital empty content for loading -->
 			<NcLoadingIcon

src/components/richArgumentsTypes/FileRichArgument.vue

@@ -41,7 +41,7 @@
 					<NcIconSvgWrapper :svg="lightningBoltSVG" />
 				</template>
 			</NcEmptyContent>
-			<ul v-else class="activity__list">
+			<ul v-else class="activity__list" aria-live="polite" aria-relevant="additions">
 				<ActivityComponent
 					v-for="activity in activities"
 					:key="activity.id"