Fix sharing panel lighthouse warnings

Replaced h5 with span and adjusted selectors.
Fixed ul/li hierarchy of some elements.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

apps/files_sharing/src/components/SharePermissionsEditor.vue

@@ -21,84 +21,86 @@
   -->
 
 <template>
-	<span>
-		<!-- file -->
-		<ActionCheckbox v-if="!isFolder"
-			:checked="shareHasPermissions(atomicPermissions.UPDATE)"
-			:disabled="saving"
-			@update:checked="toggleSharePermissions(atomicPermissions.UPDATE)">
-			{{ t('files_sharing', 'Allow editing') }}
-		</ActionCheckbox>
+	<li>
+		<ul>
+			<!-- file -->
+			<ActionCheckbox v-if="!isFolder"
+				:checked="shareHasPermissions(atomicPermissions.UPDATE)"
+				:disabled="saving"
+				@update:checked="toggleSharePermissions(atomicPermissions.UPDATE)">
+				{{ t('files_sharing', 'Allow editing') }}
+			</ActionCheckbox>
 
-		<!-- folder -->
-		<template v-if="isFolder && fileHasCreatePermission && config.isPublicUploadEnabled">
-			<template v-if="!showCustomPermissionsForm">
-				<ActionRadio :checked="sharePermissionEqual(bundledPermissions.READ_ONLY)"
-					:value="bundledPermissions.READ_ONLY"
-					:name="randomFormName"
-					:disabled="saving"
-					@change="setSharePermissions(bundledPermissions.READ_ONLY)">
-					{{ t('files_sharing', 'Read only') }}
-				</ActionRadio>
+			<!-- folder -->
+			<template v-if="isFolder && fileHasCreatePermission && config.isPublicUploadEnabled">
+				<template v-if="!showCustomPermissionsForm">
+					<ActionRadio :checked="sharePermissionEqual(bundledPermissions.READ_ONLY)"
+						:value="bundledPermissions.READ_ONLY"
+						:name="randomFormName"
+						:disabled="saving"
+						@change="setSharePermissions(bundledPermissions.READ_ONLY)">
+						{{ t('files_sharing', 'Read only') }}
+					</ActionRadio>
 
-				<ActionRadio :checked="sharePermissionEqual(bundledPermissions.UPLOAD_AND_UPDATE)"
-					:value="bundledPermissions.UPLOAD_AND_UPDATE"
-					:disabled="saving"
-					:name="randomFormName"
-					@change="setSharePermissions(bundledPermissions.UPLOAD_AND_UPDATE)">
-					{{ t('files_sharing', 'Allow upload and editing') }}
-				</ActionRadio>
-				<ActionRadio :checked="sharePermissionEqual(bundledPermissions.FILE_DROP)"
-					:value="bundledPermissions.FILE_DROP"
-					:disabled="saving"
-					:name="randomFormName"
-					class="sharing-entry__action--public-upload"
-					@change="setSharePermissions(bundledPermissions.FILE_DROP)">
-					{{ t('files_sharing', 'File drop (upload only)') }}
-				</ActionRadio>
+					<ActionRadio :checked="sharePermissionEqual(bundledPermissions.UPLOAD_AND_UPDATE)"
+						:value="bundledPermissions.UPLOAD_AND_UPDATE"
+						:disabled="saving"
+						:name="randomFormName"
+						@change="setSharePermissions(bundledPermissions.UPLOAD_AND_UPDATE)">
+						{{ t('files_sharing', 'Allow upload and editing') }}
+					</ActionRadio>
+					<ActionRadio :checked="sharePermissionEqual(bundledPermissions.FILE_DROP)"
+						:value="bundledPermissions.FILE_DROP"
+						:disabled="saving"
+						:name="randomFormName"
+						class="sharing-entry__action--public-upload"
+						@change="setSharePermissions(bundledPermissions.FILE_DROP)">
+						{{ t('files_sharing', 'File drop (upload only)') }}
+					</ActionRadio>
 
-				<!-- custom permissions button -->
-				<ActionButton :title="t('files_sharing', 'Custom permissions')"
-					@click="showCustomPermissionsForm = true">
-					<template #icon>
-						<Tune />
-					</template>
-					{{ sharePermissionsIsBundle ? "" : sharePermissionsSummary }}
-				</ActionButton>
-			</template>
+					<!-- custom permissions button -->
+					<ActionButton :title="t('files_sharing', 'Custom permissions')"
+						@click="showCustomPermissionsForm = true">
+						<template #icon>
+							<Tune />
+						</template>
+						{{ sharePermissionsIsBundle ? "" : sharePermissionsSummary }}
+					</ActionButton>
+				</template>
 
-			<!-- custom permissions -->
-			<span v-else :class="{error: !sharePermissionsSetIsValid}">
-				<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.READ)"
-					:disabled="saving || !canToggleSharePermissions(atomicPermissions.READ)"
-					@update:checked="toggleSharePermissions(atomicPermissions.READ)">
-					{{ t('files_sharing', 'Read') }}
-				</ActionCheckbox>
-				<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.CREATE)"
-					:disabled="saving || !canToggleSharePermissions(atomicPermissions.CREATE)"
-					@update:checked="toggleSharePermissions(atomicPermissions.CREATE)">
-					{{ t('files_sharing', 'Upload') }}
-				</ActionCheckbox>
-				<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.UPDATE)"
-					:disabled="saving || !canToggleSharePermissions(atomicPermissions.UPDATE)"
-					@update:checked="toggleSharePermissions(atomicPermissions.UPDATE)">
-					{{ t('files_sharing', 'Edit') }}
-				</ActionCheckbox>
-				<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.DELETE)"
-					:disabled="saving || !canToggleSharePermissions(atomicPermissions.DELETE)"
-					@update:checked="toggleSharePermissions(atomicPermissions.DELETE)">
-					{{ t('files_sharing', 'Delete') }}
-				</ActionCheckbox>
+				<!-- custom permissions -->
+				<span v-else :class="{error: !sharePermissionsSetIsValid}">
+					<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.READ)"
+						:disabled="saving || !canToggleSharePermissions(atomicPermissions.READ)"
+						@update:checked="toggleSharePermissions(atomicPermissions.READ)">
+						{{ t('files_sharing', 'Read') }}
+					</ActionCheckbox>
+					<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.CREATE)"
+						:disabled="saving || !canToggleSharePermissions(atomicPermissions.CREATE)"
+						@update:checked="toggleSharePermissions(atomicPermissions.CREATE)">
+						{{ t('files_sharing', 'Upload') }}
+					</ActionCheckbox>
+					<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.UPDATE)"
+						:disabled="saving || !canToggleSharePermissions(atomicPermissions.UPDATE)"
+						@update:checked="toggleSharePermissions(atomicPermissions.UPDATE)">
+						{{ t('files_sharing', 'Edit') }}
+					</ActionCheckbox>
+					<ActionCheckbox :checked="shareHasPermissions(atomicPermissions.DELETE)"
+						:disabled="saving || !canToggleSharePermissions(atomicPermissions.DELETE)"
+						@update:checked="toggleSharePermissions(atomicPermissions.DELETE)">
+						{{ t('files_sharing', 'Delete') }}
+					</ActionCheckbox>
 
-				<ActionButton @click="showCustomPermissionsForm = false">
-					<template #icon>
-						<ChevronLeft />
-					</template>
-					{{ t('files_sharing', 'Bundled permissions') }}
-				</ActionButton>
-			</span>
-		</template>
-	</span>
+					<ActionButton @click="showCustomPermissionsForm = false">
+						<template #icon>
+							<ChevronLeft />
+						</template>
+						{{ t('files_sharing', 'Bundled permissions') }}
+					</ActionButton>
+				</span>
+			</template>
+		</ul>
+	</li>
 </template>
 
 <script>

apps/files_sharing/src/components/SharingEntry.vue

@@ -33,7 +33,7 @@
 			v-tooltip.auto="tooltip"
 			:href="share.shareWithLink"
 			class="sharing-entry__desc">
-			<h5>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></h5>
+			<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span>
 			<p v-if="hasStatus">
 				<span>{{ share.status.icon || '' }}</span>
 				<span>{{ share.status.message || '' }}</span>

apps/files_sharing/src/components/SharingEntryInternal.vue

@@ -1,20 +1,22 @@
 
 <template>
-	<SharingEntrySimple class="sharing-entry__internal"
-		:title="t('files_sharing', 'Internal link')"
-		:subtitle="internalLinkSubtitle">
-		<template #avatar>
-			<div class="avatar-external icon-external-white" />
-		</template>
+	<ul>
+		<SharingEntrySimple class="sharing-entry__internal"
+			:title="t('files_sharing', 'Internal link')"
+			:subtitle="internalLinkSubtitle">
+			<template #avatar>
+				<div class="avatar-external icon-external-white" />
+			</template>
 
-		<ActionLink ref="copyButton"
-			:href="internalLink"
-			target="_blank"
-			:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
-			@click.prevent="copyLink">
-			{{ clipboardTooltip }}
-		</ActionLink>
-	</SharingEntrySimple>
+			<ActionLink ref="copyButton"
+				:href="internalLink"
+				target="_blank"
+				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
+				@click.prevent="copyLink">
+				{{ clipboardTooltip }}
+			</ActionLink>
+		</SharingEntrySimple>
+	</ul>
 </template>
 
 <script>

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -26,9 +26,9 @@
 			:icon-class="isEmailShareType ? 'avatar-link-share icon-mail-white' : 'avatar-link-share icon-public-white'"
 			class="sharing-entry__avatar" />
 		<div class="sharing-entry__desc">
-			<h5 :title="title">
+			<span class="sharing-entry__title" :title="title">
 				{{ title }}
-			</h5>
+			</span>
 			<p v-if="subtitle">
 				{{ subtitle }}
 			</p>
@@ -883,15 +883,15 @@ export default {
 		line-height: 1.2em;
 		overflow: hidden;
 
-		h5 {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-		}
 		p {
 			color: var(--color-text-maxcontrast);
 		}
 	}
+	&__title {
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+	}
 
 	&:not(.sharing-entry--share) &__actions {
 		.new-share-link {

apps/files_sharing/src/components/SharingEntrySimple.vue

@@ -24,7 +24,7 @@
 	<li class="sharing-entry">
 		<slot name="avatar" />
 		<div v-tooltip="tooltip" class="sharing-entry__desc">
-			<h5>{{ title }}</h5>
+			<span class="sharing-entry__title">{{ title }}</span>
 			<p v-if="subtitle">
 				{{ subtitle }}
 			</p>
@@ -99,16 +99,16 @@ export default {
 		position: relative;
 		flex: 1 1;
 		min-width: 0;
-		h5 {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			max-width: inherit;
-		}
 		p {
 			color: var(--color-text-maxcontrast);
 		}
 	}
+	&__title {
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		max-width: inherit;
+	}
 	&__actions {
 		margin-left: auto !important;
 	}