bugfix(design-system, web-app-admin, web-app-files, web-app-search, web-pg): [OCISDEV-389] fix ui issues

mzner · mzner · commit d91b3d216896 · 2025-10-31T08:28:45.000+01:00
diff --git a/changelog/unreleased/bugfix-ui-issues.md b/changelog/unreleased/bugfix-ui-issues.md
@@ -0,0 +1,6 @@
+Bugfix: Fix ui issues
+
+We have fixed some ui issues to improve the user experience.
+
+https://kiteworks.atlassian.net/browse/OCISDEV-389
+https://github.com/owncloud/web/pull/13255
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -15,7 +15,7 @@
       :aria-label="labelHidden ? label : null"
       @keydown.enter="keydownEnter"
     />
-    <label v-if="!labelHidden" :for="id" :class="labelClasses" v-text="label" />
+    <label v-if="!labelHidden" :for="id" :class="computedLabelClasses" v-text="label" />
   </span>
 </template>
 
@@ -69,6 +69,7 @@ interface Props {
   option?: unknown
   label?: string
   labelHidden?: boolean
+  labelClasses?: string[]
   size?: 'small' | 'medium' | 'large'
 }
 interface Emits {
@@ -89,7 +90,8 @@ const {
   label = null,
   labelHidden = false,
   size = 'medium',
-  modelValue = false
+  modelValue = false,
+  labelClasses = []
 } = defineProps<Props>()
 
 const emit = defineEmits<Emits>()
@@ -114,7 +116,7 @@ const classes = computed(() => {
   ]
 })
 
-const labelClasses = computed(() => ({ 'oc-cursor-pointer': !disabled }))
+const computedLabelClasses = computed(() => [{ 'oc-cursor-pointer': !disabled }, ...labelClasses])
 
 const isChecked = computed(() => {
   if (Array.isArray(model.value)) {
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -240,7 +240,8 @@ function initializeTippy() {
         } as Modifier<'fixVerticalPosition', unknown>
       ]
     },
-    content
+    content,
+    role: 'listbox'
   }
 
   if (unref(target)) {
diff --git a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap b/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
@@ -21,7 +21,7 @@ exports[`OcDrop > tippy > renders tippy 1`] = `
       data-reference-hidden=""
       data-state="visible"
       data-theme="none"
-      role="tooltip"
+      role="listbox"
       style="max-width: 416px; transition-duration: 300ms;"
       tabindex="-1"
     >
@@ -73,7 +73,7 @@ exports[`OcDrop > tippy > renders tippy 2`] = `
       data-reference-hidden=""
       data-state="hidden"
       data-theme="none"
-      role="tooltip"
+      role="listbox"
       style="max-width: 416px; transition-duration: 250ms;"
       tabindex="-1"
     >
@@ -125,7 +125,7 @@ exports[`OcDrop > tippy > renders tippy 3`] = `
       data-reference-hidden=""
       data-state="visible"
       data-theme="none"
-      role="tooltip"
+      role="listbox"
       style="max-width: 416px; transition-duration: 300ms;"
       tabindex="-1"
     >
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -8,6 +8,10 @@
     <div class="oc-width-expand oc-position-relative">
       <input
         ref="searchInput"
+        role="combobox"
+        aria-autocomplete="list"
+        :aria-expanded="ariaExpanded"
+        :aria-controls="ariaControls"
         :class="inputClass"
         :aria-label="label"
         :value="searchQuery"
@@ -83,6 +87,8 @@ import { useGettext } from 'vue3-gettext'
  * @prop {string} [placeholder=''] - Placeholder text for the input field.
  * @prop {string} [label=''] - Aria-label for the input field.
  * @prop {boolean} [small=false] - Whether the search bar should be smaller in size.
+ * @prop {string} [ariaExpanded='false'] - Indicates if the dropdown is expanded (for combobox).
+ * @prop {string} [ariaControls=''] - ID of the dropdown element controlled by this input.
  * @prop {string} [buttonLabel='Search'] - Label for the search button.
  * @prop {boolean} [buttonHidden=false] - Whether to hide the search button visually.
  * @prop {boolean} [typeAhead=false] - If true, triggers the search event on each character input.
@@ -142,6 +148,8 @@ interface Props {
   cancelButtonVariation?: 'passive' | 'primary' | 'danger' | 'success' | 'warning' | 'brand'
   cancelButtonAppearance?: 'outline' | 'filled' | 'raw' | 'raw-inverse'
   cancelHandler?: () => void
+  ariaExpanded?: string
+  ariaControls?: string
 }
 
 interface Emits {
@@ -172,7 +180,9 @@ const {
   showCancelButton = false,
   cancelButtonVariation = 'primary',
   cancelButtonAppearance = 'raw',
-  cancelHandler = () => {}
+  cancelHandler = () => {},
+  ariaExpanded = 'false',
+  ariaControls = ''
 } = defineProps<Props>()
 const emit = defineEmits<Emits>()
 const slots = useSlots()
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -46,6 +46,9 @@
             />
           </oc-button>
           <div v-else>
+            <span class="oc-invisible-sr">
+              {{ field.name }}
+            </span>
             <span v-if="field.headerType === 'slot'" class="oc-table-thead-content">
               <slot :name="field.name + 'Header'" />
             </span>
diff --git a/packages/design-system/src/tokens/ods/font.yaml b/packages/design-system/src/tokens/ods/font.yaml
@@ -6,7 +6,7 @@ font:
     default:
       value: 0.875rem
     xsmall:
-      value: 0.72rem
+      value: 0.80rem
     small:
       value: 0.86rem
     medium:
diff --git a/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue b/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
@@ -28,6 +28,9 @@
         <div class="logo-wrapper">
           <img alt="" :src="currentTheme.logo.topbar" class="oc-p-xs" />
         </div>
+        <label for="logo-upload-input" class="oc-invisible-sr">
+          {{ $gettext('Change logo') }}
+        </label>
         <input
           id="logo-upload-input"
           ref="logoInput"
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -27,7 +27,8 @@
             class="oc-ml-s"
             :label="$gettext('Select all users')"
             :model-value="allUsersSelected"
-            :label-hidden="true"
+            :label-hidden="false"
+            :label-classes="['oc-invisible-sr']"
             @update:model-value="
               allUsersSelected ? unselectAllUsers() : selectUsers(paginatedItems)
             "
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -17,10 +17,10 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     <thead class="oc-thead">
       <tr class="oc-table-header-row">
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-select oc-pl-s" style="top: 0px;">
-          <div><span class="oc-table-thead-content"><oc-checkbox-stub id="oc-checkbox-1" modelvalue="false" disabled="false" label="Select all spaces" labelhidden="true" size="large" class="oc-ml-s"></oc-checkbox-stub></span></div>
+          <div><span class="oc-invisible-sr">select</span> <span class="oc-table-thead-content"><oc-checkbox-stub id="oc-checkbox-1" modelvalue="false" disabled="false" label="Select all spaces" labelhidden="true" labelclasses="" size="large" class="oc-ml-s"></oc-checkbox-stub></span></div>
         </th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 0px;">
-          <div><span class="oc-table-thead-content header-text"></span></div>
+          <div><span class="oc-invisible-sr">icon</span> <span class="oc-table-thead-content header-text"></span></div>
         </th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-name" style="top: 0px;" aria-sort="ascending"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-button-sort oc-width-1-1">
             <!--v-if-->
@@ -31,7 +31,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
             <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Status</span> <span class="oc-icon oc-icon-s oc-icon-passive oc-invisible-sr"><!----></span>
           </button></th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-manager" style="top: 0px;">
-          <div><span class="oc-table-thead-content header-text">Manager</span></div>
+          <div><span class="oc-invisible-sr">manager</span> <span class="oc-table-thead-content header-text">Manager</span></div>
         </th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-members" style="top: 0px;"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-button-sort oc-width-1-1">
             <!--v-if-->
@@ -54,14 +54,14 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
             <!-- @slot Content of the button --> <span class="oc-table-thead-content header-text">Modified</span> <span class="oc-icon oc-icon-s oc-icon-passive oc-invisible-sr"><!----></span>
           </button></th>
         <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-actions oc-pr-s" style="top: 0px;">
-          <div><span class="oc-table-thead-content header-text">Actions</span></div>
+          <div><span class="oc-invisible-sr">actions</span> <span class="oc-table-thead-content header-text">Actions</span></div>
         </th>
       </tr>
     </thead>
     <tbody class="has-item-context-menu">
       <tr class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s">
-          <oc-checkbox-stub id="oc-checkbox-2" modelvalue="false" disabled="false" option="undefined" label="Select 1 Some space" labelhidden="true" size="large" class="oc-ml-s"></oc-checkbox-stub>
+          <oc-checkbox-stub id="oc-checkbox-2" modelvalue="false" disabled="false" option="undefined" label="Select 1 Some space" labelhidden="true" labelclasses="" size="large" class="oc-ml-s"></oc-checkbox-stub>
         </td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="1 Some space">1 Some space</span></td>
@@ -89,7 +89,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       </tr>
       <tr class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false">
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s">
-          <oc-checkbox-stub id="oc-checkbox-3" modelvalue="false" disabled="false" option="undefined" label="Select 2 Another space" labelhidden="true" size="large" class="oc-ml-s"></oc-checkbox-stub>
+          <oc-checkbox-stub id="oc-checkbox-3" modelvalue="false" disabled="false" option="undefined" label="Select 2 Another space" labelhidden="true" labelclasses="" size="large" class="oc-ml-s"></oc-checkbox-stub>
         </td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="2 Another space">2 Another space</span></td>
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -92,10 +92,10 @@ exports[`Users view > list view > renders list initially 1`] = `
             <thead class="oc-thead">
               <tr class="oc-table-header-row">
                 <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-select oc-pl-s" style="top: 0px;">
-                  <div><span class="oc-table-thead-content"><!-- TODO: check whether we really need the click here --> <!-- eslint-disable vuejs-accessibility/no-static-element-interactions --> <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events --> <span><!-- eslint-enable vuejs-accessibility/no-static-element-interactions --> <input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" aria-label="Select all users"> <!--v-if--></span></span></div>
+                  <div><span class="oc-invisible-sr">select</span> <span class="oc-table-thead-content"><!-- TODO: check whether we really need the click here --> <!-- eslint-disable vuejs-accessibility/no-static-element-interactions --> <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events --> <span><!-- eslint-enable vuejs-accessibility/no-static-element-interactions --> <input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l"> <label for="oc-checkbox-1" class="oc-cursor-pointer oc-invisible-sr">Select all users</label></span></span></div>
                 </th>
                 <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 0px;">
-                  <div><span class="oc-table-thead-content header-text"></span></div>
+                  <div><span class="oc-invisible-sr">avatar</span> <span class="oc-table-thead-content header-text"></span></div>
                 </th>
                 <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-onPremisesSamAccountName" style="top: 0px;" aria-sort="ascending">
                   <oc-button-stub type="button" disabled="false" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-button-sort oc-width-1-1"></oc-button-stub>
@@ -113,7 +113,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                   <oc-button-stub type="button" disabled="false" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-button-sort oc-width-1-1"></oc-button-stub>
                 </th>
                 <th class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-actions oc-pr-s" style="top: 0px;">
-                  <div><span class="oc-table-thead-content header-text">Actions</span></div>
+                  <div><span class="oc-invisible-sr">actions</span> <span class="oc-table-thead-content header-text">Actions</span></div>
                 </th>
               </tr>
             </thead>
diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -4,7 +4,7 @@
       <span>{{ app.badge.label }}</span>
     </div>
     <div class="app-image">
-      <oc-img v-if="currentImage?.url" :src="currentImage?.url" />
+      <oc-img v-if="currentImage?.url" :src="currentImage?.url" :alt="app.name" />
       <div v-else class="fallback-icon">
         <oc-icon name="computer" size="xxlarge" />
       </div>
diff --git a/packages/web-app-app-store/src/components/AppTags.vue b/packages/web-app-app-store/src/components/AppTags.vue
@@ -4,7 +4,7 @@
       v-for="tag in app.tags"
       :key="`app-tag-${app.id}-${tag}`"
       data-testid="tag-button"
-      size="small"
+      size="medium"
       class="oc-text-nowrap"
       type="button"
       @click="emitClick(tag)"
@@ -33,5 +33,6 @@ const emitClick = (tagName: string) => {
 .app-tags {
   display: flex;
   gap: 0.5rem;
+  flex-wrap: wrap;
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -1,5 +1,8 @@
 <template>
   <div>
+    <label class="oc-invisible-sr" for="space-image-upload-input">
+      {{ $gettext('Upload space image') }}
+    </label>
     <input
       id="space-image-upload-input"
       ref="spaceImageInput"
diff --git a/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue b/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
     <context-action-menu :menu-sections="menuSections" :action-options="actionOptions" />
+    <label class="oc-invisible-sr" for="space-image-upload-input">
+      {{ $gettext('Upload space image') }}
+    </label>
     <input
       id="space-image-upload-input"
       ref="spaceImageInput"
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -56,6 +56,7 @@
         class="markdown-container oc-flex oc-flex-middle"
       >
         <text-editor is-read-only :current-content="markdownContent" />
+
         <div class="markdown-container-edit oc-ml-s">
           <router-link
             v-oc-tooltip="$gettext('Edit description')"
@@ -64,6 +65,7 @@
             :to="editReadMeContentLink"
           >
             <oc-icon name="pencil" size="small" fill-type="line" />
+            <span class="oc-invisible-sr">Edit description</span>
           </router-link>
         </div>
       </div>
diff --git a/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue b/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue
@@ -1,5 +1,8 @@
 <template>
   <oc-button id="context-menu-trigger-whitespace" aria-hidden appearance="raw">
+    <label class="oc-invisible-sr">
+      {{ $gettext('Show context menu') }}
+    </label>
     <oc-drop
       drop-id="context-menu-drop-whitespace"
       toggle="#context-menu-trigger-whitespace"
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -79,7 +79,7 @@
                   v-if="resource.thumbnail"
                   class="tile-preview"
                   :src="resource.thumbnail"
-                  alt=""
+                  :alt="resource.name"
                 />
               </template>
               <template v-else>
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -20,7 +20,7 @@ exports[`TrashOverview > view states > should render spaces list 1`] = `
         <thead class="oc-thead">
           <tr class="oc-table-header-row">
             <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-icon oc-pl-s" style="top: 0px;">
-              <div><span class="oc-table-thead-content header-text"></span></div>
+              <div><span class="oc-invisible-sr">icon</span> <span class="oc-table-thead-content header-text"></span></div>
             </th>
             <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-name oc-pr-s" style="top: 0px;" aria-sort="ascending"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-button-sort oc-width-1-1">
                 <!--v-if-->
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
@@ -6,6 +6,9 @@
     class="oc-flex"
     data-custom-key-bindings-disabled="true"
   >
+    <span id="search-description" class="oc-invisible-sr">
+      {{ $gettext('Results will appear below the search bar if they exist.') }}
+    </span>
     <oc-search-bar
       id="files-global-search-bar"
       :label="searchLabel"
@@ -18,6 +21,9 @@
       cancel-button-variation="brand"
       cancel-button-appearance="raw-inverse"
       :cancel-handler="cancelSearch"
+      :aria-expanded="showDrop && term ? 'true' : 'false'"
+      aria-controls="files-global-search-options"
+      aria-describedby="search-description"
       @advanced-search="onKeyUpEnter"
       @input="updateTerm"
       @clear="onClear"
@@ -55,7 +61,7 @@
       close-on-click
       same-width-as-target
     >
-      <oc-list class="oc-list-divider">
+      <oc-list role="listbox" class="oc-list-divider">
         <li
           v-if="loading"
           class="loading spinner oc-flex oc-flex-center oc-flex-middle oc-text-muted"
@@ -80,6 +86,8 @@
               <li
                 v-for="providerSearchResultValue in getSearchResultForProvider(provider).values"
                 :key="providerSearchResultValue.id"
+                role="option"
+                :aria-selected="isPreviewElementActive(providerSearchResultValue.id)"
                 :data-search-id="providerSearchResultValue.id"
                 :class="{
                   active: isPreviewElementActive(providerSearchResultValue.id)
diff --git a/packages/web-pkg/src/components/FilesList/ResourceName.vue b/packages/web-pkg/src/components/FilesList/ResourceName.vue
@@ -5,7 +5,6 @@
     :data-test-resource-path="fullPath"
     :data-test-resource-name="fullName"
     :data-test-resource-type="type"
-    :title="htmlTitle"
   >
     <span v-if="truncateName" class="oc-text-truncate">
       <span class="oc-resource-basename" v-text="displayName" />
@@ -79,14 +78,6 @@ const displayPath = computed(() => {
   }
   return `…/${pathSplit[pathSplit.length - 2]}/`
 })
-
-const htmlTitle = computed(() => {
-  if (isExtensionDisplayed) {
-    return `${unref(displayName)}${unref(displayExtension)}`
-  }
-
-  return unref(displayName)
-})
 </script>
 
 <style lang="scss">
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceListItem.spec.ts.snap
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceName.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceName.spec.ts.snap
diff --git a/packages/web-pkg/tests/unit/components/Search/__snapshots__/ResourcePreview.spec.ts.snap b/packages/web-pkg/tests/unit/components/Search/__snapshots__/ResourcePreview.spec.ts.snap

Original file line number	Diff line number	Diff line change
`@@ -240,7 +240,8 @@ function initializeTippy() {`
`240`	`240`	`} as Modifier<'fixVerticalPosition', unknown>`
`241`	`241`	`]`
`242`	`242`	`},`
`243`		`- content`
	`243`	`+ content,`
	`244`	`+ role: 'listbox'`
`244`	`245`	`}`
`245`	`246`
`246`	`247`	`if (unref(target)) {`