Merge pull request #47121 from nextcloud/fix/a11y-inline-action

fix(systemtags): Make inline tags list fully accessible

4 files changed, 64 insertions, 53 deletions

diff --git a/apps/systemtags/src/actions/inlineSystemTagsAction.spec.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
index 4d7d33792ad..61353d098d7 100644
--- a/apps/systemtags/src/actions/inlineSystemTagsAction.spec.ts
+++ b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
@@ -79,10 +79,8 @@ describe('Inline system tags action render tests', () => {
 
 		const result = await action.renderInline!(file, view)
 		expect(result).toBeInstanceOf(HTMLElement)
-		expect(result!.outerHTML).toBe(
-			'<ul class="files-list__system-tags" aria-label="This file has the tag Confidential">'
-				+ '<li class="files-list__system-tag">Confidential</li>'
-			+ '</ul>',
+		expect(result!.outerHTML).toMatchInlineSnapshot(
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags"><li class="files-list__system-tag">Confidential</li></ul>"',
 		)
 	})
 
@@ -95,21 +93,15 @@ describe('Inline system tags action render tests', () => {
 			permissions: Permission.ALL,
 			attributes: {
 				'system-tags': {
-					'system-tag': [
-						'Important',
-						'Confidential',
-					],
+					'system-tag': ['Important', 'Confidential'],
 				},
 			},
 		})
 
 		const result = await action.renderInline!(file, view)
 		expect(result).toBeInstanceOf(HTMLElement)
-		expect(result!.outerHTML).toBe(
-			'<ul class="files-list__system-tags" aria-label="This file has the tags Important and Confidential">'
-				+ '<li class="files-list__system-tag">Important</li>'
-				+ '<li class="files-list__system-tag files-list__system-tag--more" title="Confidential">+1</li>'
-			+ '</ul>',
+		expect(result!.outerHTML).toMatchInlineSnapshot(
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags"><li class="files-list__system-tag">Important</li><li class="files-list__system-tag">Confidential</li></ul>"',
 		)
 	})
 
@@ -134,11 +126,8 @@ describe('Inline system tags action render tests', () => {
 
 		const result = await action.renderInline!(file, view)
 		expect(result).toBeInstanceOf(HTMLElement)
-		expect(result!.outerHTML).toBe(
-			'<ul class="files-list__system-tags" aria-label="This file has the tags Important, Confidential, Secret and Classified">'
-				+ '<li class="files-list__system-tag">Important</li>'
-				+ '<li class="files-list__system-tag files-list__system-tag--more" title="Confidential, Secret, Classified">+3</li>'
-			+ '</ul>',
+		expect(result!.outerHTML).toMatchInlineSnapshot(
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags"><li class="files-list__system-tag">Important</li><li class="files-list__system-tag files-list__system-tag--more" title="Confidential, Secret, Classified" aria-hidden="true" role="presentation">+3</li><li class="files-list__system-tag hidden-visually">Confidential</li><li class="files-list__system-tag hidden-visually">Secret</li><li class="files-list__system-tag hidden-visually">Classified</li></ul>"',
 		)
 	})
 })
diff --git a/apps/systemtags/src/actions/inlineSystemTagsAction.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts
index 9954435dd34..46b483129be 100644
--- a/apps/systemtags/src/actions/inlineSystemTagsAction.ts
+++ b/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts
@@ -2,7 +2,8 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import { FileAction, Node, registerDavProperty, registerFileAction } from '@nextcloud/files'
+import type { Node } from '@nextcloud/files'
+import { FileAction } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
 
 import '../css/fileEntryInlineSystemTags.scss'
@@ -63,22 +64,30 @@ export const action = new FileAction({
 
 		const systemTagsElement = document.createElement('ul')
 		systemTagsElement.classList.add('files-list__system-tags')
-
-		if (tags.length === 1) {
-			systemTagsElement.setAttribute('aria-label', t('files', 'This file has the tag {tag}', { tag: tags[0] }))
-		} else {
-			const firstTags = tags.slice(0, -1).join(', ')
-			const lastTag = tags[tags.length - 1]
-			systemTagsElement.setAttribute('aria-label', t('files', 'This file has the tags {firstTags} and {lastTag}', { firstTags, lastTag }))
-		}
+		systemTagsElement.setAttribute('aria-label', t('files', 'Assigned collaborative tags'))
 
 		systemTagsElement.append(renderTag(tags[0]))
-
-		// More tags than the one we're showing
-		if (tags.length > 1) {
+		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
@@ -86,6 +95,3 @@ export const action = new FileAction({
 
 	order: 0,
 })
-
-registerDavProperty('nc:system-tags')
-registerFileAction(action)
diff --git a/apps/systemtags/src/files_views/systemtagsView.ts b/apps/systemtags/src/files_views/systemtagsView.ts
new file mode 100644
index 00000000000..9012e5e8c6b
--- /dev/null
+++ b/apps/systemtags/src/files_views/systemtagsView.ts
@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { translate as t } from '@nextcloud/l10n'
+import { View, getNavigation } from '@nextcloud/files'
+import { getContents } from '../services/systemtags.js'
+
+import svgTagMultiple from '@mdi/svg/svg/tag-multiple.svg?raw'
+
+/**
+ * Register the system tags files view
+ */
+export function registerSystemTagsView() {
+	const Navigation = getNavigation()
+	Navigation.register(new View({
+		id: 'tags',
+		name: t('systemtags', 'Tags'),
+		caption: t('systemtags', 'List of tags and their associated files and folders.'),
+
+		emptyTitle: t('systemtags', 'No tags found'),
+		emptyCaption: t('systemtags', 'Tags you have created will show up here.'),
+
+		icon: svgTagMultiple,
+		order: 25,
+
+		getContents,
+	}))
+}
diff --git a/apps/systemtags/src/init.ts b/apps/systemtags/src/init.ts
index 04b974e37d1..04dd8088001 100644
--- a/apps/systemtags/src/init.ts
+++ b/apps/systemtags/src/init.ts
@@ -2,25 +2,11 @@
  * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import './actions/inlineSystemTagsAction.js'
+import { registerDavProperty, registerFileAction } from '@nextcloud/files'
+import { action as inlineSystemTagsAction } from './files_actions/inlineSystemTagsAction.js'
+import { registerSystemTagsView } from './files_views/systemtagsView.js'
 
-import { translate as t } from '@nextcloud/l10n'
-import { View, getNavigation } from '@nextcloud/files'
-import TagMultipleSvg from '@mdi/svg/svg/tag-multiple.svg?raw'
+registerDavProperty('nc:system-tags')
+registerFileAction(inlineSystemTagsAction)
 
-import { getContents } from './services/systemtags.js'
-
-const Navigation = getNavigation()
-Navigation.register(new View({
-	id: 'tags',
-	name: t('systemtags', 'Tags'),
-	caption: t('systemtags', 'List of tags and their associated files and folders.'),
-
-	emptyTitle: t('systemtags', 'No tags found'),
-	emptyCaption: t('systemtags', 'Tags you have created will show up here.'),
-
-	icon: TagMultipleSvg,
-	order: 25,
-
-	getContents,
-}))
+registerSystemTagsView()