Merge pull request #61658 from nextcloud/fix/files-node-name

fix(files): proper accessible row name and title for overflow

Author: susnux

apps/files/src/components/FileEntry/FileEntryName.vue

@@ -136,7 +136,7 @@ export default defineComponent({
 				return {
 					is: 'span',
 					params: {
-						title: t('files', 'This node is unavailable'),
+						title: this.source.displayname + ` (${t('files', 'unavailable')})`,
 					},
 				}
 			}
@@ -148,11 +148,12 @@ export default defineComponent({
 					folder: this.activeFolder!,
 					contents: [],
 				})
+				const accessibleName = `${displayName}: ${this.source.displayname}`
 				return {
 					is: 'button',
 					params: {
-						'aria-label': displayName,
-						title: displayName,
+						'aria-label': accessibleName,
+						title: accessibleName,
 						tabindex: '0',
 					},
 				}

dist/files-main.js

@@ -36,7 +36,7 @@ test('Create a failed user storage with invalid url', async ({ page, user, files
 
 	await expect(row).toBeVisible()
 	await expect(filesListPage.getRowNameLinkForFile('Storage1'))
-		.toHaveAttribute('title', 'This node is unavailable')
+		.toHaveAttribute('title', / \(unavailable\)$/)
 
 	// Clicking an unavailable storage must not open it (location stays the same)
 	const url = page.url()
@@ -68,7 +68,7 @@ test('Create a failed user storage with invalid login credentials', async ({ pag
 
 	await expect(row).toBeVisible()
 	await expect(filesListPage.getRowNameLinkForFile('Storage2'))
-		.toHaveAttribute('title', 'This node is unavailable')
+		.toHaveAttribute('title', / \(unavailable\)$/)
 
 	const url = page.url()
 	await filesListPage.getRowNameLinkForFile('Storage2').click()

dist/files-main.js.map

@@ -205,8 +205,7 @@ export class FilesListPage {
 
 	/**
 	 * The clickable name link of a row. Clicking it opens a folder or previews a
-	 * file; for an unavailable external storage it is inert (and carries the
-	 * "This node is unavailable" title).
+	 * file; for an unavailable storage it is inert.
 	 */
 	getRowNameLinkForFile(filename: string): Locator {
 		return this.getRowForFile(filename).locator('[data-cy-files-list-row-name-link]')