fix: raise contrast, target sizes and visibility of small UI parts

packages/design-system/src/components/OcCheckbox/OcCheckbox.vue

@@ -12,7 +12,7 @@
         'align-middle',
         'm-0.5',
         'border-2',
-        'border-role-outline/80',
+        'border-role-outline',
         'outline-0',
         'outline-role-secondary',
         'focus-visible:outline',

packages/design-system/src/components/OcRange/OcRange.vue

@@ -17,7 +17,7 @@
       :max="max"
       :step="step"
       :disabled="disabled"
-      class="oc-range h-1.5 appearance-none rounded-sm bg-role-surface-container-high outline-0 outline-role-secondary hover:opacity-100 focus-visible:outline not-disabled:cursor-pointer disabled:cursor-not-allowed"
+      class="oc-range h-1.5 appearance-none rounded-sm bg-role-outline outline-0 outline-role-secondary hover:opacity-100 focus-visible:outline not-disabled:cursor-pointer disabled:cursor-not-allowed"
       :class="[inlineLabel ? 'grow basis-0' : 'w-full', inputClass]"
       @input="onInput"
       @change="onChange"

packages/design-system/src/components/OcSearchBar/OcSearchBar.vue

@@ -20,7 +20,7 @@
       <oc-button
         v-if="icon"
         :aria-label="$gettext('Search')"
-        class="absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0"
+        class="absolute top-[50%] transform-[translateY(-50%)] right-0 p-1 mx-3 mb-4 mt-0"
         appearance="raw"
         no-hover
         @click.prevent.stop="$emit('advancedSearch', $event)"

packages/design-system/src/components/OcSelect/OcSelect.spec.ts

@@ -165,6 +165,25 @@ describe('OcSelect', () => {
       wrapper.unmount()
     })
   })
+  describe('keyboard highlight', () => {
+    const options = [{ label: 'label1' }, { label: 'label2' }]
+
+    it('outlines the highlighted option while typing, not only after arrow keys', async () => {
+      const wrapper = getWrapper({ options })
+      await wrapper.find(selectors.ocSelect).trigger('mousemove')
+      await wrapper.find(selectors.searchInput).trigger('keydown', { key: 'l' })
+      expect(wrapper.find(selectors.ocSelect).classes()).toContain('oc-select-keyboard-navigation')
+    })
+    it('drops the outline when the mouse is used', async () => {
+      const wrapper = getWrapper({ options })
+      await wrapper.find(selectors.searchInput).trigger('keydown', { key: 'l' })
+      expect(wrapper.find(selectors.ocSelect).classes()).toContain('oc-select-keyboard-navigation')
+      await wrapper.find(selectors.ocSelect).trigger('mousemove')
+      expect(wrapper.find(selectors.ocSelect).classes()).not.toContain(
+        'oc-select-keyboard-navigation'
+      )
+    })
+  })
   describe('required mark', () => {
     it('marks the search input as required for assistive technologies', () => {
       const wrapper = getWrapper({ requiredMark: true })

packages/design-system/src/components/OcSelect/OcSelect.vue

@@ -321,7 +321,7 @@ function dropdownShouldOpen({ noDrop, open, mutableLoading }: Record<string, boo
   return !noDrop && open && !mutableLoading && unref(dropdownEnabled)
 }
 
-// highlights the active option with an outline while navigating via arrow keys
+// outlines the option that Enter picks while the keyboard is in use, mouse hover only tints it
 const keyboardNavigation = ref(false)
 
 // vue-select still maps keydown handlers by the deprecated keyCode
@@ -352,9 +352,7 @@ function mapKeydown(map: Record<number, (e: KeyboardEvent) => void>) {
 }
 
 function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-    keyboardNavigation.value = true
-  }
+  keyboardNavigation.value = true
   if (!['Enter', 'Tab', 'Escape'].includes(e.key)) {
     dropdownEnabled.value = true
   }

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -50,7 +50,7 @@
     <template #name="{ item }">
       <div class="flex items-center">
         <space-image class="shrink-0" :space="item" />
-        <span class="pl-2 truncate" :data-test-space-name="item.name">
+        <span class="pl-2 wrap-anywhere" :data-test-space-name="item.name">
           <oc-filter-highlight :text="item.name" :term="filterTerm" />
         </span>
       </div>

packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue

@@ -26,7 +26,7 @@
           />
         </div>
         <div class="files-collaborators-collaborator-name-wrapper pl-2 max-w-full min-w-0">
-          <div class="truncate">
+          <div class="wrap-anywhere">
             <span
               :title="shareDisplayName"
               aria-hidden="true"

packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue

@@ -3,7 +3,7 @@
     <div class="flex items-center">
       <oc-avatar-item :width="36" icon-size="medium" icon="link" name="link" />
       <div class="grid pl-2">
-        <span class="files-links-name truncate" v-text="linkShare.displayName" />
+        <span class="files-links-name wrap-anywhere" v-text="linkShare.displayName" />
         <div class="flex flex-nowrap items-center">
           <link-role-dropdown
             v-if="isModifiable"

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/__snapshots__/ListItem.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`Collaborator ListItem component > share inheritance indicators > show w
         <user-avatar-stub userid="3" username="einstein" width="36" class="files-collaborators-collaborator-indicator"></user-avatar-stub>
       </div>
       <div class="files-collaborators-collaborator-name-wrapper pl-2 max-w-full min-w-0">
-        <div class="truncate"><span title="einstein" aria-hidden="true" class="files-collaborators-collaborator-name"><span class="oc-filter-highlight">einstein</span></span> <span class="sr-only">Share receiver name: einstein, User</span>
+        <div class="wrap-anywhere"><span title="einstein" aria-hidden="true" class="files-collaborators-collaborator-name"><span class="oc-filter-highlight">einstein</span></span> <span class="sr-only">Share receiver name: einstein, User</span>
           <!--v-if-->
         </div>
         <div>

packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`Projects view > different files view states > lists all available proje
         <thead data-v-3c9ab66c="" class="oc-thead border-b">
           <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-table-header-row h-10.5">
             <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
-              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline/80 outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
+              <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><div class="resource-table-select-all flex justify-center items-center"><span data-v-5c58355a="" class="inline-flex items-center"><input data-v-5c58355a="" id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox relative inline-block align-middle m-0.5 border-2 border-role-outline outline-0 outline-role-secondary focus-visible:outline rounded-md checked:bg-role-secondary checked:border-role-secondary indeterminate:bg-white bg-transparent overflow-hidden cursor-pointer disabled:opacity-40 disabled:cursor-default disabled:bg-role-surface-container-low appearance-none size-5" aria-label="Select all"> <!--v-if--></span></div></span>
     </div>
     </th>
     <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button data-v-3c9ab66c="" type="button" aria-label="Sort by Name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">

packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap

@@ -7,7 +7,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
       <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" hasfoldersfirst="false" haspagination="true" showactionsbar="false" showactionsonselection="false" batchactionsloading="false"></app-bar-stub>
       <div class="flex justify-end flex-wrap items-end mx-4 mb-4">
         <div data-v-8440503a="" class="oc-search flex items-center w-full sm:w-3xs">
-          <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input placeholder:text-role-outline disabled:cursor-not-allowed focus:bg-none h-9 pr-10" aria-label="Search" placeholder="Search for trash bins" type="search"> <button data-v-8440503a="" type="button" aria-label="Search" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default absolute top-[50%] transform-[translateY(-50%)] right-0 mx-4 mb-4 mt-0">
+          <div data-v-8440503a="" class="flex-1 relative"><input data-v-8440503a="" id="search-input-v-0" class="oc-search-input oc-input placeholder:text-role-outline disabled:cursor-not-allowed focus:bg-none h-9 pr-10" aria-label="Search" placeholder="Search for trash bins" type="search"> <button data-v-8440503a="" type="button" aria-label="Search" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default absolute top-[50%] transform-[translateY(-50%)] right-0 p-1 mx-3 mb-4 mt-0">
               <!--v-if-->
               <!-- @slot Content of the button --> <span data-v-8440503a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/search-line.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {

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

@@ -46,7 +46,7 @@
     <oc-button
       v-oc-tooltip="$gettext('Display search bar')"
       :aria-label="$gettext('Click to display and focus the search bar')"
-      class="inline-flex sm:hidden mr-6"
+      class="inline-flex sm:hidden p-0.5 -m-0.5 mr-5.5"
       appearance="raw-inverse"
       color-role="chrome"
       no-hover
@@ -233,7 +233,7 @@ function updateLocationFilterInputPadding() {
     return
   }
 
-  inputElement.style.paddingRight = `${Math.ceil(locationFilterElement.offsetWidth) + 32}px`
+  inputElement.style.paddingRight = `${Math.ceil(locationFilterElement.offsetWidth) + 36}px`
 }
 
 watch(isMobile, () => {

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

@@ -28,7 +28,7 @@
       <div class="relative flex w-full" @mouseenter="onMediaEnter" @mouseleave="onMediaLeave">
         <!-- a sibling of the link, interactive elements must not be nested inside it -->
         <div
-          class="z-10 absolute top-0 left-0 [&_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"
+          class="z-10 absolute top-0 left-0 [&_input]:not-[.oc-checkbox-checked]:bg-role-surface"
         >
           <div v-if="isLoading" class="oc-tile-card-loading-spinner z-990 m-2">
             <oc-spinner :aria-label="$gettext('File is being processed')" />

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

@@ -82,7 +82,7 @@
               :label="getResourceCheckboxLabel(resource)"
               :label-hidden="true"
               size="large"
-              class="size-11 justify-center rounded-tl-sm rounded-br-lg hover:bg-role-on-surface/10"
+              class="size-11 justify-center rounded-tl-sm rounded-br-lg hover:bg-role-on-surface/10 cursor-pointer has-disabled:cursor-default"
               :disabled="isResourceDisabled(resource)"
               :model-value="selected"
               :data-test-selection-resource-name="resource.name"

packages/web-pkg/src/components/Filters/ItemFilterInline.vue

@@ -15,9 +15,11 @@
         :appearance="activeOption === option.name ? 'filled' : 'raw-inverse'"
         :color-role="activeOption === option.name ? 'secondaryContainer' : 'surface'"
         :no-hover="activeOption === option.name"
+        gap-size="small"
         :aria-pressed="(activeOption === option.name).toString()"
         @click="toggleFilter(option)"
       >
+        <oc-icon v-if="activeOption === option.name" name="check" size-class="size-4" />
         <span class="truncate item-inline-filter-option-label" v-text="option.label" />
       </oc-button>
     </div>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="z-[var(--z-index-modal)] absolute top-[50%] transform-[translateY(-50%)] right-0 ml-4 mb-4 mt-0 mr-[34px] float-right"
+    class="z-[var(--z-index-modal)] absolute top-[50%] transform-[translateY(-50%)] right-0 ml-4 mb-4 mt-0 mr-[38px] float-right"
     data-testid="search-bar-filter"
     @click.stop
   >

packages/web-pkg/src/components/SideBar/SideBarPanels.vue

@@ -47,7 +47,7 @@
         </div>
       </div>
       <div
-        class="sidebar-panel__body flex flex-col px-2 pb-2 pt-0 overflow-y-auto overflow-x-hidden"
+        class="sidebar-panel__body flex flex-col px-2 pb-(--oc-floating-action-button-space,--spacing(2)) pt-0 overflow-y-auto overflow-x-hidden"
         :class="[`sidebar-panel__body-${panel.name}`]"
       >
         <div

packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue

@@ -3,7 +3,7 @@
     <resource-icon :resource="currentSpace" size-class="size-4" class="mr-2 shrink-0 rounded-xs" />
     <h2
       data-testid="space-info-name"
-      class="font-semibold m-0 text-base min-w-0 flex-1 truncate"
+      class="font-semibold m-0 text-base min-w-0 flex-1 wrap-anywhere"
       v-text="currentSpace.name"
     />
   </div>

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

@@ -4,7 +4,7 @@ exports[`OcTile component > renders default space correctly 1`] = `
 "<oc-card-stub tag="div" titletag="h2" headerclass="" bodyclass="p-0 flex flex-col" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest" data-item-id="1">
   <div class="relative flex w-full">
     <!-- a sibling of the link, interactive elements must not be nested inside it -->
-    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
+    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface"></div>
     <resource-link-stub resource="[object Object]" link="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" aria-label="Space 1" tabindex="-1">
       <!--v-if-->
       <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">
@@ -33,7 +33,7 @@ exports[`OcTile component > renders disabled space correctly 1`] = `
 "<oc-card-stub tag="div" titletag="h2" headerclass="" bodyclass="p-0 flex flex-col" footerclass="" class="oc-tile-card flex flex-col h-full shadow-none [&amp;.item-accentuated]:bg-role-secondary-container bg-role-surface-container hover:bg-role-surface-container-highest outline outline-role-surface-container-highest oc-tile-card-disabled opacity-70 grayscale-60 pointer-events-none" data-item-id="1">
   <div class="relative flex w-full">
     <!-- a sibling of the link, interactive elements must not be nested inside it -->
-    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface-container"></div>
+    <div class="z-10 absolute top-0 left-0 [&amp;_input]:not-[.oc-checkbox-checked]:bg-role-surface"></div>
     <resource-link-stub resource="[object Object]" link="[object Object]" isresourceclickable="true" class="oc-card-media-top flex justify-center items-center m-0 w-full relative aspect-[16/9]" aria-label="Space 1" tabindex="-1">
       <!--v-if-->
       <div class="oc-tile-card-preview flex items-center justify-center text-center size-full absolute">