From c96274c52aa254384378099a21f2f03eaa61087a Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Thu, 8 Aug 2024 01:41:11 +0200 Subject: fix(systemtags): Make inline tags list fully accessible 1. The label was wrong it mentioned the first and last tag, so the information was duplicated 2. It only mentioned the first and last but not all other 3. All other tags were only added as `title` which is not accessible Signed-off-by: Ferdinand Thiessen --- .../src/actions/inlineSystemTagsAction.spec.ts | 144 --------------------- .../src/actions/inlineSystemTagsAction.ts | 91 ------------- .../files_actions/inlineSystemTagsAction.spec.ts | 133 +++++++++++++++++++ .../src/files_actions/inlineSystemTagsAction.ts | 97 ++++++++++++++ apps/systemtags/src/files_views/systemtagsView.ts | 30 +++++ apps/systemtags/src/init.ts | 26 +--- 6 files changed, 266 insertions(+), 255 deletions(-) delete mode 100644 apps/systemtags/src/actions/inlineSystemTagsAction.spec.ts delete mode 100644 apps/systemtags/src/actions/inlineSystemTagsAction.ts create mode 100644 apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts create mode 100644 apps/systemtags/src/files_actions/inlineSystemTagsAction.ts create mode 100644 apps/systemtags/src/files_views/systemtagsView.ts (limited to 'apps') diff --git a/apps/systemtags/src/actions/inlineSystemTagsAction.spec.ts b/apps/systemtags/src/actions/inlineSystemTagsAction.spec.ts deleted file mode 100644 index 4d7d33792ad..00000000000 --- a/apps/systemtags/src/actions/inlineSystemTagsAction.spec.ts +++ /dev/null @@ -1,144 +0,0 @@ -/** - * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors - * SPDX-License-Identifier: AGPL-3.0-or-later - */ -import { action } from './inlineSystemTagsAction' -import { expect } from '@jest/globals' -import { File, Permission, View, FileAction } from '@nextcloud/files' - -const view = { - id: 'files', - name: 'Files', -} as View - -describe('Inline system tags action conditions tests', () => { - test('Default values', () => { - const file = new File({ - id: 1, - source: 'https://cloud.domain.com/remote.php/dav/files/admin/foobar.txt', - owner: 'admin', - mime: 'text/plain', - permissions: Permission.ALL, - }) - - expect(action).toBeInstanceOf(FileAction) - expect(action.id).toBe('system-tags') - expect(action.displayName([file], view)).toBe('') - expect(action.iconSvgInline([], view)).toBe('') - expect(action.default).toBeUndefined() - expect(action.enabled).toBeDefined() - expect(action.order).toBe(0) - expect(action.enabled!([file], view)).toBe(false) - }) - - test('Enabled with valid system tags', () => { - const file = new File({ - id: 1, - source: 'https://cloud.domain.com/remote.php/dav/files/admin/foobar.txt', - owner: 'admin', - mime: 'text/plain', - permissions: Permission.ALL, - attributes: { - 'system-tags': { - 'system-tag': 'Confidential', - }, - }, - }) - - expect(action.enabled!([file], view)).toBe(true) - }) -}) - -describe('Inline system tags action render tests', () => { - test('Render nothing when Node does not have system tags', async () => { - const file = new File({ - id: 1, - source: 'http://localhost/remote.php/dav/files/admin/foobar.txt', - owner: 'admin', - mime: 'text/plain', - permissions: Permission.ALL, - }) - - const result = await action.renderInline!(file, view) - expect(result).toBeNull() - }) - - test('Render a single system tag', async () => { - const file = new File({ - id: 1, - source: 'http://localhost/remote.php/dav/files/admin/foobar.txt', - owner: 'admin', - mime: 'text/plain', - permissions: Permission.ALL, - attributes: { - 'system-tags': { - 'system-tag': 'Confidential', - }, - }, - }) - - const result = await action.renderInline!(file, view) - expect(result).toBeInstanceOf(HTMLElement) - expect(result!.outerHTML).toBe( - '', - ) - }) - - test('Render two system tags', async () => { - const file = new File({ - id: 1, - source: 'http://localhost/remote.php/dav/files/admin/foobar.txt', - owner: 'admin', - mime: 'text/plain', - permissions: Permission.ALL, - attributes: { - 'system-tags': { - 'system-tag': [ - 'Important', - 'Confidential', - ], - }, - }, - }) - - const result = await action.renderInline!(file, view) - expect(result).toBeInstanceOf(HTMLElement) - expect(result!.outerHTML).toBe( - '', - ) - }) - - test('Render multiple system tags', async () => { - const file = new File({ - id: 1, - source: 'http://localhost/remote.php/dav/files/admin/foobar.txt', - owner: 'admin', - mime: 'text/plain', - permissions: Permission.ALL, - attributes: { - 'system-tags': { - 'system-tag': [ - 'Important', - 'Confidential', - 'Secret', - 'Classified', - ], - }, - }, - }) - - const result = await action.renderInline!(file, view) - expect(result).toBeInstanceOf(HTMLElement) - expect(result!.outerHTML).toBe( - '', - ) - }) -}) diff --git a/apps/systemtags/src/actions/inlineSystemTagsAction.ts b/apps/systemtags/src/actions/inlineSystemTagsAction.ts deleted file mode 100644 index 9954435dd34..00000000000 --- a/apps/systemtags/src/actions/inlineSystemTagsAction.ts +++ /dev/null @@ -1,91 +0,0 @@ -/** - * 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 { translate as t } from '@nextcloud/l10n' - -import '../css/fileEntryInlineSystemTags.scss' - -const getNodeSystemTags = function(node: Node): string[] { - const tags = node.attributes?.['system-tags']?.['system-tag'] as string|string[]|undefined - - if (tags === undefined) { - return [] - } - - return [tags].flat() -} - -const renderTag = function(tag: string, isMore = false): HTMLElement { - const tagElement = document.createElement('li') - tagElement.classList.add('files-list__system-tag') - tagElement.textContent = tag - - if (isMore) { - tagElement.classList.add('files-list__system-tag--more') - } - - return tagElement -} - -export const action = new FileAction({ - id: 'system-tags', - displayName: () => '', - iconSvgInline: () => '', - - enabled(nodes: Node[]) { - // Only show the action on single nodes - if (nodes.length !== 1) { - return false - } - - const node = nodes[0] - const tags = getNodeSystemTags(node) - - // Only show the action if the node has system tags - if (tags.length === 0) { - return false - } - - return true - }, - - exec: async () => null, - - async renderInline(node: Node) { - // Ensure we have the system tags as an array - const tags = getNodeSystemTags(node) - - if (tags.length === 0) { - return null - } - - 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.append(renderTag(tags[0])) - - // More tags than the one we're showing - if (tags.length > 1) { - const moreTagElement = renderTag('+' + (tags.length - 1), true) - moreTagElement.setAttribute('title', tags.slice(1).join(', ')) - systemTagsElement.append(moreTagElement) - } - - return systemTagsElement - }, - - order: 0, -}) - -registerDavProperty('nc:system-tags') -registerFileAction(action) diff --git a/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts new file mode 100644 index 00000000000..61353d098d7 --- /dev/null +++ b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts @@ -0,0 +1,133 @@ +/** + * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import { action } from './inlineSystemTagsAction' +import { expect } from '@jest/globals' +import { File, Permission, View, FileAction } from '@nextcloud/files' + +const view = { + id: 'files', + name: 'Files', +} as View + +describe('Inline system tags action conditions tests', () => { + test('Default values', () => { + const file = new File({ + id: 1, + source: 'https://cloud.domain.com/remote.php/dav/files/admin/foobar.txt', + owner: 'admin', + mime: 'text/plain', + permissions: Permission.ALL, + }) + + expect(action).toBeInstanceOf(FileAction) + expect(action.id).toBe('system-tags') + expect(action.displayName([file], view)).toBe('') + expect(action.iconSvgInline([], view)).toBe('') + expect(action.default).toBeUndefined() + expect(action.enabled).toBeDefined() + expect(action.order).toBe(0) + expect(action.enabled!([file], view)).toBe(false) + }) + + test('Enabled with valid system tags', () => { + const file = new File({ + id: 1, + source: 'https://cloud.domain.com/remote.php/dav/files/admin/foobar.txt', + owner: 'admin', + mime: 'text/plain', + permissions: Permission.ALL, + attributes: { + 'system-tags': { + 'system-tag': 'Confidential', + }, + }, + }) + + expect(action.enabled!([file], view)).toBe(true) + }) +}) + +describe('Inline system tags action render tests', () => { + test('Render nothing when Node does not have system tags', async () => { + const file = new File({ + id: 1, + source: 'http://localhost/remote.php/dav/files/admin/foobar.txt', + owner: 'admin', + mime: 'text/plain', + permissions: Permission.ALL, + }) + + const result = await action.renderInline!(file, view) + expect(result).toBeNull() + }) + + test('Render a single system tag', async () => { + const file = new File({ + id: 1, + source: 'http://localhost/remote.php/dav/files/admin/foobar.txt', + owner: 'admin', + mime: 'text/plain', + permissions: Permission.ALL, + attributes: { + 'system-tags': { + 'system-tag': 'Confidential', + }, + }, + }) + + const result = await action.renderInline!(file, view) + expect(result).toBeInstanceOf(HTMLElement) + expect(result!.outerHTML).toMatchInlineSnapshot( + '""', + ) + }) + + test('Render two system tags', async () => { + const file = new File({ + id: 1, + source: 'http://localhost/remote.php/dav/files/admin/foobar.txt', + owner: 'admin', + mime: 'text/plain', + permissions: Permission.ALL, + attributes: { + 'system-tags': { + 'system-tag': ['Important', 'Confidential'], + }, + }, + }) + + const result = await action.renderInline!(file, view) + expect(result).toBeInstanceOf(HTMLElement) + expect(result!.outerHTML).toMatchInlineSnapshot( + '""', + ) + }) + + test('Render multiple system tags', async () => { + const file = new File({ + id: 1, + source: 'http://localhost/remote.php/dav/files/admin/foobar.txt', + owner: 'admin', + mime: 'text/plain', + permissions: Permission.ALL, + attributes: { + 'system-tags': { + 'system-tag': [ + 'Important', + 'Confidential', + 'Secret', + 'Classified', + ], + }, + }, + }) + + const result = await action.renderInline!(file, view) + expect(result).toBeInstanceOf(HTMLElement) + expect(result!.outerHTML).toMatchInlineSnapshot( + '""', + ) + }) +}) diff --git a/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts new file mode 100644 index 00000000000..46b483129be --- /dev/null +++ b/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts @@ -0,0 +1,97 @@ +/** + * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ +import type { Node } from '@nextcloud/files' +import { FileAction } from '@nextcloud/files' +import { translate as t } from '@nextcloud/l10n' + +import '../css/fileEntryInlineSystemTags.scss' + +const getNodeSystemTags = function(node: Node): string[] { + const tags = node.attributes?.['system-tags']?.['system-tag'] as string|string[]|undefined + + if (tags === undefined) { + return [] + } + + return [tags].flat() +} + +const renderTag = function(tag: string, isMore = false): HTMLElement { + const tagElement = document.createElement('li') + tagElement.classList.add('files-list__system-tag') + tagElement.textContent = tag + + if (isMore) { + tagElement.classList.add('files-list__system-tag--more') + } + + return tagElement +} + +export const action = new FileAction({ + id: 'system-tags', + displayName: () => '', + iconSvgInline: () => '', + + enabled(nodes: Node[]) { + // Only show the action on single nodes + if (nodes.length !== 1) { + return false + } + + const node = nodes[0] + const tags = getNodeSystemTags(node) + + // Only show the action if the node has system tags + if (tags.length === 0) { + return false + } + + return true + }, + + exec: async () => null, + + async renderInline(node: Node) { + // Ensure we have the system tags as an array + const tags = getNodeSystemTags(node) + + if (tags.length === 0) { + return null + } + + const systemTagsElement = document.createElement('ul') + systemTagsElement.classList.add('files-list__system-tags') + systemTagsElement.setAttribute('aria-label', t('files', 'Assigned collaborative tags')) + + 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 + }, + + order: 0, +}) 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() -- cgit v1.2.3