Merge pull request #13313 from owncloud/chore/OCISDEV-485/ui-improvements

chore(web-pkg): [OCISDEV-485] ui improvements

Author: mzner

packages/web-pkg/src/components/BatchActions.vue

@@ -13,6 +13,7 @@
         class="batch-actions oc-mr-s"
         :shortcut-hint="false"
         :show-tooltip="limitedScreenSpace"
+        :has-limited-screen-space="limitedScreenSpace"
       />
     </oc-list>
   </div>

packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue

@@ -5,7 +5,7 @@
       :type="componentType"
       v-bind="componentProps"
       :class="[action.class, 'action-menu-item', 'oc-py-s', 'oc-px-m', 'oc-width-1-1']"
-      :aria-label="componentProps.disabled ? action.disabledTooltip?.(actionOptions) : null"
+      :aria-label="ariaLabel"
       data-testid="action-handler"
       :size="size"
       justify-content="left"
@@ -68,6 +68,7 @@ interface Props {
   variation?: string
   shortcutHint?: boolean
   showTooltip?: boolean
+  hasLimitedScreenSpace?: boolean
 }
 const {
   action,
@@ -76,7 +77,8 @@ const {
   appearance = 'raw',
   variation = 'passive',
   shortcutHint = true,
-  showTooltip = false
+  showTooltip = false,
+  hasLimitedScreenSpace = false
 } = defineProps<Props>()
 const { $gettext } = useGettext()
 const configStore = useConfigStore()
@@ -96,6 +98,17 @@ const componentType = computed<string>(() => {
   return 'button'
 })
 
+const ariaLabel = computed<string | null>(() => {
+  if (componentProps.value.disabled && action.disabledTooltip) {
+    return action.disabledTooltip(actionOptions)
+  }
+
+  if (hasLimitedScreenSpace) {
+    return action.label(actionOptions)
+  }
+
+  return ''
+})
 const componentProps = computed(() => {
   const properties = {
     appearance: action.appearance || appearance,

packages/web-pkg/src/components/ContextActions/ContextActionMenu.vue

@@ -14,6 +14,7 @@
         :appearance="appearance"
         :variation="variation"
         :action-options="actionOptions"
+        :has-limited-screen-space="true"
         class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"
       />
     </oc-list>

packages/web-pkg/src/components/FilesList/ResourceListItem.vue

@@ -19,7 +19,7 @@
         v-else
         v-oc-tooltip="tooltipLabelIcon"
         :aria-label="tooltipLabelIcon"
-        :aria-hidden="tooltipLabelIcon !== null"
+        :aria-hidden="tooltipLabelIcon === null"
         :resource="resource"
       />
     </span>

packages/web-pkg/src/components/FilesList/ResourceName.vue

@@ -6,6 +6,7 @@
     :data-test-resource-name="fullName"
     :data-test-resource-type="type"
     :title="htmlTitle"
+    :aria-label="htmlTitle"
   >
     <span v-if="truncateName" class="oc-text-truncate">
       <span class="oc-resource-basename" v-text="displayName" />

packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcResource > displays parent folder name default if calculated name is empty 1`] = `
-"<div class="oc-resource oc-text-overflow"><span class="oc-resource-icon-wrapper"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file" aria-hidden="false"><!----></span></span>
+"<div class="oc-resource oc-text-overflow"><span class="oc-resource-icon-wrapper"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file" aria-hidden="true"><!----></span></span>
   <div class="oc-resource-details oc-text-overflow oc-pl-s"><button target="_self" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-resource-link oc-text-overflow" draggable="false">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-resource-name" data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file" title="example.pdf"><span class="oc-text-truncate"><span class="oc-resource-basename">example</span></span><span class="oc-resource-extension">.pdf</span></span>
+      <!-- @slot Content of the button --> <span class="oc-resource-name" data-test-resource-path="example.pdf" data-test-resource-name="example.pdf" data-test-resource-type="file" title="example.pdf" aria-label="example.pdf"><span class="oc-text-truncate"><span class="oc-resource-basename">example</span></span><span class="oc-resource-extension">.pdf</span></span>
     </button>
     <div class="oc-resource-indicators"><span style="cursor: default;" class="parent-folder oc-text-truncate"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text oc-text-truncate">Example parent folder name</span></span></div>
   </div>

packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceName.spec.ts.snap

@@ -1,25 +1,25 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcResourceName > does not show the name as HTML title if the path is being displayed 1`] = `
-"<span class="oc-resource-name" data-test-resource-path="folder" data-test-resource-name="folder" data-test-resource-type="folder" title="folder"><span class="oc-text-truncate"><span class="oc-resource-basename">folder</span></span>
+"<span class="oc-resource-name" data-test-resource-path="folder" data-test-resource-name="folder" data-test-resource-type="folder" title="folder" aria-label="folder"><span class="oc-text-truncate"><span class="oc-resource-basename">folder</span></span>
 <!--v-if--></span>"
 `;
 
-exports[`OcResourceName > does not truncate a very long name when disabled 1`] = `"<span class="oc-resource-name oc-display-inline-block" data-test-resource-path="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-name=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-type="file" title=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt"><span class="oc-resource-basename oc-text-break">.super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end</span><span class="oc-resource-extension">.txt</span></span>"`;
+exports[`OcResourceName > does not truncate a very long name when disabled 1`] = `"<span class="oc-resource-name oc-display-inline-block" data-test-resource-path="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-name=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-type="file" title=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" aria-label=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt"><span class="oc-resource-basename oc-text-break">.super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end</span><span class="oc-resource-extension">.txt</span></span>"`;
 
 exports[`OcResourceName > doesn't add extension to hidden folder 1`] = `
-"<span class="oc-resource-name" data-test-resource-path=".hidden" data-test-resource-name=".hidden" data-test-resource-type="folder" title=".hidden"><span class="oc-text-truncate"><span class="oc-resource-basename">.hidden</span></span>
+"<span class="oc-resource-name" data-test-resource-path=".hidden" data-test-resource-name=".hidden" data-test-resource-type="folder" title=".hidden" aria-label=".hidden"><span class="oc-text-truncate"><span class="oc-resource-basename">.hidden</span></span>
 <!--v-if--></span>"
 `;
 
 exports[`OcResourceName > renders folder names with dots completely in the basename 1`] = `
-"<span class="oc-resource-name" data-test-resource-path="folder.with.dots" data-test-resource-name="folder.with.dots" data-test-resource-type="folder" title="folder.with.dots"><span class="oc-text-truncate"><span class="oc-resource-basename">folder.with.dots</span></span>
+"<span class="oc-resource-name" data-test-resource-path="folder.with.dots" data-test-resource-name="folder.with.dots" data-test-resource-type="folder" title="folder.with.dots" aria-label="folder.with.dots"><span class="oc-text-truncate"><span class="oc-resource-basename">folder.with.dots</span></span>
 <!--v-if--></span>"
 `;
 
 exports[`OcResourceName > shows the name as HTML title if the path is not displayed 1`] = `
-"<span class="oc-resource-name" data-test-resource-path="folder" data-test-resource-name="folder" data-test-resource-type="folder" title="folder"><span class="oc-text-truncate"><span class="oc-resource-basename">folder</span></span>
+"<span class="oc-resource-name" data-test-resource-path="folder" data-test-resource-name="folder" data-test-resource-type="folder" title="folder" aria-label="folder"><span class="oc-text-truncate"><span class="oc-resource-basename">folder</span></span>
 <!--v-if--></span>"
 `;
 
-exports[`OcResourceName > truncates very long name per default 1`] = `"<span class="oc-resource-name" data-test-resource-path="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-name=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-type="file" title=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt"><span class="oc-text-truncate"><span class="oc-resource-basename">.super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end</span></span><span class="oc-resource-extension">.txt</span></span>"`;
+exports[`OcResourceName > truncates very long name per default 1`] = `"<span class="oc-resource-name" data-test-resource-path="super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-name=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" data-test-resource-type="file" title=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt" aria-label=".super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end.txt"><span class="oc-text-truncate"><span class="oc-resource-basename">.super-long-file-name-which-will-be-truncated-when-exceeding-the-screen-space-while-still-preserving-the-file-extension-at-the-end</span></span><span class="oc-resource-extension">.txt</span></span>"`;

packages/web-pkg/tests/unit/components/Search/__snapshots__/ResourcePreview.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`Preview component > should render preview component 1`] = `
 "<div class="oc-resource oc-text-overflow"><span class="oc-resource-icon-wrapper"><img src="blob:image" alt="" aria-hidden="true" loading="eager" class="oc-resource-thumbnail" width="40" height="40"></span>
   <div class="oc-resource-details oc-text-overflow oc-pl-s"><button target="_self" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-undefined oc-button-passive oc-button-passive-raw oc-resource-link oc-text-overflow" draggable="false">
       <!--v-if-->
-      <!-- @slot Content of the button --> <span class="oc-resource-name" data-test-resource-path="/" data-test-resource-name="lorem.txt" title="lorem.txt"><span class="oc-text-truncate"><span class="oc-resource-basename">lorem.txt</span></span>
+      <!-- @slot Content of the button --> <span class="oc-resource-name" data-test-resource-path="/" data-test-resource-name="lorem.txt" title="lorem.txt" aria-label="lorem.txt"><span class="oc-text-truncate"><span class="oc-resource-basename">lorem.txt</span></span>
       <!--v-if--></span>
     </button>
     <div class="oc-resource-indicators"><a attrs="[object Object]" style="cursor: pointer;" class="parent-folder oc-text-truncate"></a></div>