From c96274c52aa254384378099a21f2f03eaa61087a Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Thu, 8 Aug 2024 01:41:11 +0200 Subject: [PATCH] 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 --- .../inlineSystemTagsAction.spec.ts | 25 ++++--------- .../inlineSystemTagsAction.ts | 36 +++++++++++-------- .../src/files_views/systemtagsView.ts | 30 ++++++++++++++++ apps/systemtags/src/init.ts | 26 ++++---------- 4 files changed, 64 insertions(+), 53 deletions(-) rename apps/systemtags/src/{actions => files_actions}/inlineSystemTagsAction.spec.ts (75%) rename apps/systemtags/src/{actions => files_actions}/inlineSystemTagsAction.ts (63%) create mode 100644 apps/systemtags/src/files_views/systemtagsView.ts diff --git a/apps/systemtags/src/actions/inlineSystemTagsAction.spec.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts similarity index 75% rename from apps/systemtags/src/actions/inlineSystemTagsAction.spec.ts rename to 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( - '', + expect(result!.outerHTML).toMatchInlineSnapshot( + '""', ) }) @@ -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( - '', + expect(result!.outerHTML).toMatchInlineSnapshot( + '""', ) }) @@ -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( - '', + expect(result!.outerHTML).toMatchInlineSnapshot( + '""', ) }) }) diff --git a/apps/systemtags/src/actions/inlineSystemTagsAction.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.ts similarity index 63% rename from apps/systemtags/src/actions/inlineSystemTagsAction.ts rename to 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()