fix(systemtags): only render inline list of tags if there are some

- resolves #59332

If there are no tags available, then we cannot render an `<ul>` element
as this would result in invalid HTML / invalid accessibility state.
Ref: https://www.w3.org/TR/wai-aria-1.2/#mustContain

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

Author: susnux

apps/systemtags/src/files_actions/inlineSystemTagsAction.ts

@@ -34,12 +34,15 @@ export const action: IFileAction = {
 		return true
 	},
 
-	exec: async () => null,
-	renderInline: ({ nodes }) => {
+	async exec() {
+		return null
+	},
+
+	async renderInline({ nodes }) {
 		if (nodes.length !== 1 || !nodes[0]) {
-			return Promise.resolve(null)
+			return null
 		}
-		return renderInline(nodes[0])
+		return await renderInline(nodes[0])
 	},
 
 	order: 0,
@@ -56,12 +59,12 @@ subscribe('systemtags:tag:updated', updateTag)
  *
  * @param node - The updated node
  */
-function updateSystemTagsHtml(node: INode) {
-	renderInline(node).then((systemTagsHtml) => {
-		document.querySelectorAll(`[data-systemtags-fileid="${node.fileid}"]`).forEach((element) => {
-			element.replaceWith(systemTagsHtml)
-		})
-	})
+async function updateSystemTagsHtml(node: INode) {
+	const systemTagsHtml = await renderInline(node)
+	const elements = document.querySelectorAll(`[data-systemtags-fileid="${node.id}"]`)
+	for (const element of elements) {
+		element.replaceWith(systemTagsHtml)
+	}
 }
 
 /**
@@ -145,50 +148,50 @@ function renderTag(tag: string, isMore = false): HTMLElement {
 async function renderInline(node: INode): Promise<HTMLElement> {
 	// Ensure we have the system tags as an array
 	const tags = getNodeSystemTags(node)
-
-	const systemTagsElement = document.createElement('ul')
-	systemTagsElement.classList.add('files-list__system-tags')
-	systemTagsElement.setAttribute('aria-label', t('files', 'Assigned collaborative tags'))
-	systemTagsElement.setAttribute('data-systemtags-fileid', node.fileid?.toString() || '')
-
-	if (tags.length === 0) {
-		return systemTagsElement
-	}
-
-	// Fetch the tags if the cache is empty
-	if (cache.length === 0) {
-		try {
-			// Best would be to support attributes from webdav,
-			// but currently the library does not support it
-			cache.push(...await fetchTags())
-		} catch (error) {
-			logger.error('Failed to fetch tags', { error })
+	const systemTagsElementWrapper = document.createElement('div')
+	systemTagsElementWrapper.setAttribute('data-systemtags-fileid', node.id || '')
+
+	if (tags.length > 0) {
+		const systemTagsElement = document.createElement('ul')
+		systemTagsElement.classList.add('files-list__system-tags')
+		systemTagsElement.setAttribute('aria-label', t('files', 'Assigned collaborative tags'))
+		systemTagsElementWrapper.appendChild(systemTagsElement)
+
+		// Fetch the tags if the cache is empty
+		if (cache.length === 0) {
+			try {
+				// Best would be to support attributes from webdav,
+				// but currently the library does not support it
+				cache.push(...await fetchTags())
+			} catch (error) {
+				logger.error('Failed to fetch tags', { error })
+			}
 		}
-	}
 
-	systemTagsElement.append(renderTag(tags[0]!))
-	if (tags.length === 2) {
-		// Special case only two tags:
-		// the overflow fake tag would take the same space as this, so render it
-		systemTagsElement.append(renderTag(tags[1]!))
-	} else if (tags.length > 1) {
-		// More tags than the one we're showing
-		// So we add a overflow element indicating there are more tags
-		const moreTagElement = renderTag('+' + (tags.length - 1), true)
-		moreTagElement.setAttribute('title', tags.slice(1).join(', '))
-		// because the title is not accessible we hide this element for screen readers (see alternative below)
-		moreTagElement.setAttribute('aria-hidden', 'true')
-		moreTagElement.setAttribute('role', 'presentation')
-		systemTagsElement.append(moreTagElement)
-
-		// For accessibility the tags are listed, as the title is not accessible
-		// but those tags are visually hidden
-		for (const tag of tags.slice(1)) {
-			const tagElement = renderTag(tag)
-			tagElement.classList.add('hidden-visually')
-			systemTagsElement.append(tagElement)
+		systemTagsElement.append(renderTag(tags[0]!))
+		if (tags.length === 2) {
+			// Special case only two tags:
+			// the overflow fake tag would take the same space as this, so render it
+			systemTagsElement.append(renderTag(tags[1]!))
+		} else if (tags.length > 1) {
+			// More tags than the one we're showing
+			// So we add a overflow element indicating there are more tags
+			const moreTagElement = renderTag('+' + (tags.length - 1), true)
+			moreTagElement.setAttribute('title', tags.slice(1).join(', '))
+			// because the title is not accessible we hide this element for screen readers (see alternative below)
+			moreTagElement.setAttribute('aria-hidden', 'true')
+			moreTagElement.setAttribute('role', 'presentation')
+			systemTagsElement.append(moreTagElement)
+
+			// For accessibility the tags are listed, as the title is not accessible
+			// but those tags are visually hidden
+			for (const tag of tags.slice(1)) {
+				const tagElement = renderTag(tag)
+				tagElement.classList.add('hidden-visually')
+				systemTagsElement.append(tagElement)
+			}
 		}
 	}
 
-	return systemTagsElement
+	return systemTagsElementWrapper
 }