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

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)) {

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)) {

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"
     >

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()

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:

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">
+          {{ $pgettext('Accesibility label to change logo', 'Change logo') }}
+        </label>
         <input
           id="logo-upload-input"
           ref="logoInput"

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)
             "

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -17,7 +17,7 @@ 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-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>
@@ -61,7 +61,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     <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>

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap

@@ -92,7 +92,7 @@ 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-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>

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>

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>

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">
+      {{ $pgettext('Accesibility label to upload a space image', 'Upload space image') }}
+    </label>
     <input
       id="space-image-upload-input"
       ref="spaceImageInput"

packages/web-app-files/src/components/Spaces/SpaceContextActions.vue

@@ -1,6 +1,14 @@
 <template>
   <div>
     <context-action-menu :menu-sections="menuSections" :action-options="actionOptions" />
+    <label class="oc-invisible-sr" for="space-image-upload-input">
+      {{
+        $pgettext(
+          'Accesibility label to upload a space image in the space context actions',
+          'Upload space image'
+        )
+      }}
+    </label>
     <input
       id="space-image-upload-input"
       ref="spaceImageInput"

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -8,6 +8,19 @@
       :class="{ 'space-header-image-expanded': imageExpanded || isMobileWidth }"
     >
       <button v-if="imageContent" class="btn-toggle-image" @click="toggleImageExpanded">
+        <label class="oc-invisible-sr" for="btn-toggle-image">
+          {{
+            imageExpanded
+              ? $pgettext(
+                  'Accessibility label to inform user when space image has been collapsed by being clicked on',
+                  'Collapse space image'
+                )
+              : $pgettext(
+                  'Accessibility label to inform user when space image has been expanded by being clicked on',
+                  'Expand space image'
+                )
+          }}
+        </label>
         <img alt="" :src="imageContent" />
       </button>
       <div v-else class="space-header-image-default oc-flex oc-flex-middle oc-flex-center">
@@ -56,6 +69,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 +78,9 @@
             :to="editReadMeContentLink"
           >
             <oc-icon name="pencil" size="small" fill-type="line" />
+            <span class="oc-invisible-sr">
+              {{ $gettext('Edit description') }}
+            </span>
           </router-link>
         </div>
       </div>

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" for="context-menu-trigger-whitespace">
+      {{ $pgettext('Accessibility label', 'Show context menu') }}
+    </label>
     <oc-drop
       drop-id="context-menu-drop-whitespace"
       toggle="#context-menu-trigger-whitespace"

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>

packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap

@@ -98,7 +98,7 @@ exports[`SpaceHeader > space image > should show the default image if no other i
 
 exports[`SpaceHeader > space image > should show the set image 1`] = `
 "<div class="space-header oc-p-m oc-flex">
-  <div class="space-header-image"><button class="btn-toggle-image"><img alt="" src="blob:image"></button></div>
+  <div class="space-header-image"><button class="btn-toggle-image"><label class="oc-invisible-sr" for="btn-toggle-image">Expand space image</label> <img alt="" src="blob:image"></button></div>
   <div class="space-header-infos">
     <div class="oc-flex oc-mb-s oc-flex-middle oc-flex-between">
       <div class="oc-flex oc-flex-middle space-header-infos-heading">

packages/web-app-search/src/portals/SearchBar.vue

@@ -6,6 +6,14 @@
     class="oc-flex"
     data-custom-key-bindings-disabled="true"
   >
+    <span id="search-description" class="oc-invisible-sr">
+      {{
+        $pgettext(
+          'Accesibility label to inform user that search results will appear below the search bar if they exist',
+          'Results will appear if they exist.'
+        )
+      }}
+    </span>
     <oc-search-bar
       id="files-global-search-bar"
       :label="searchLabel"
@@ -18,6 +26,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 +66,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 +91,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)

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

@@ -84,7 +84,6 @@ const htmlTitle = computed(() => {
   if (isExtensionDisplayed) {
     return `${unref(displayName)}${unref(displayExtension)}`
   }
-
   return unref(displayName)
 })
 </script>

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

@@ -44,7 +44,8 @@
           size="large"
           :label="selectAllCheckboxLabel"
           :disabled="resources.length === disabledResources.length"
-          :label-hidden="true"
+          :label-hidden="false"
+          :label-classes="['oc-invisible-sr']"
           :model-value="areAllResourcesSelected"
           @click.stop="toggleSelectionAll"
         />
@@ -1054,6 +1055,12 @@ function getSharedWithAvatarItems(resource: Resource) {
   height: 0 !important;
 }
 
+.remove-legend-styling {
+  margin: 0px;
+  padding: 0px;
+  border: 0;
+}
+
 .resource-table {
   &-resource-cut {
     opacity: 0.7;