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

- resolves #59203
- resolves #56611

In the files list before this the accessible name of the button (default
action) was overridden to the default action display name.
But this causes problem for screen readers because then the whole table
row is just called "view" or "download" instead of using the inner text
(e.g. "filename.txt").

This fixes it to rename it `ACTION: FILENAME` instead.

Also when long names were truncated there were no useful title (tooltip)
for it, so it was not possible to get the real name.
This is fixed by always provide a proper tooltip including the full
name.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

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',
 					},
 				}

cypress/e2e/files_external/files-external-failed.cy.ts

@@ -48,7 +48,7 @@ describe('Files user credentials', { testIsolation: true }, () => {
 		// Ensure the row is visible and marked as unavailable
 		getRowForFile('Storage1').as('row').should('be.visible')
 		cy.get('@row').find('[data-cy-files-list-row-name-link]')
-			.should('have.attr', 'title', 'This node is unavailable')
+			.should('have.attr', 'title', / \(unavailable\)$/)
 
 		// Ensure clicking on the location does not open the folder
 		cy.location().then((loc) => {
@@ -74,7 +74,7 @@ describe('Files user credentials', { testIsolation: true }, () => {
 		// Ensure the row is visible and marked as unavailable
 		getRowForFile('Storage2').as('row').should('be.visible')
 		cy.get('@row').find('[data-cy-files-list-row-name-link]')
-			.should('have.attr', 'title', 'This node is unavailable')
+			.should('have.attr', 'title', / \(unavailable\)$/)
 
 		// Ensure clicking on the location does not open the folder
 		cy.location().then((loc) => {