From 1f279c86a8428c4e18449e89c7546a5b07ac0816 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 3 Apr 2026 16:57:57 +0200
Subject: [PATCH] fix(systemtags): only render inline list of tags if there are
 some

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>

[skip ci]
---
 .../files_actions/inlineSystemTagsAction.ts   | 82 +++++++++----------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts
index bc780b54a6c1b..ad84f6a274779 100644
--- a/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts
+++ b/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts
@@ -45,52 +45,52 @@ const renderTag = function(tag: string, isMore = false): HTMLElement {
 const renderInline = async function(node: Node): 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
 }
 
 export const action = new FileAction({