chore(web-app-admin-settings, web-app-files, design-system): [OCISDEV-391] ui improvements

Author: mzner

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

@@ -52,7 +52,13 @@
             <span
               v-else
               class="oc-table-thead-content header-text"
-              v-text="extractFieldTitle(field)"
+              :class="{ 'oc-invisible-sr': !extractFieldTitle(field) }"
+              :aria-hidden="extractFieldTitle(field) ? 'false' : 'true'"
+              v-text="
+                extractFieldTitle(field) || hasIconsColumn
+                  ? $pgettext('Table component header', 'icons')
+                  : ''
+              "
             />
           </div>
         </oc-th>
@@ -159,6 +165,7 @@ import { useGettext } from 'vue3-gettext'
  * @prop {String} sortDir - Current sort direction ('asc' or 'desc').
  * @prop {String} sortBy - Current sort column name.
  * @prop {Object} groupingSettings - Grouping configuration (CERN-specific).
+ * @prop {Boolean} hasIconsColumn - To show table header for columns with no value but icons.
  *
  * @event item-dropped - Emitted when an item is dropped during drag and drop.
  * @event item-dragged - Emitted when an item starts being dragged.
@@ -222,6 +229,7 @@ interface Props {
   sortBy?: string
   caption?: string
   captionVisible?: boolean
+  hasIconsColumn?: boolean
 }
 
 interface Emits {
@@ -258,7 +266,8 @@ const {
   sortDir = undefined,
   sortBy = undefined,
   caption = '',
-  captionVisible = true
+  captionVisible = true,
+  hasIconsColumn = false
 } = defineProps<Props>()
 
 const emit = defineEmits<Emits>()

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

@@ -20,7 +20,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
           <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>
+          <div><span class="oc-table-thead-content header-text oc-invisible-sr" aria-hidden="true"></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-table-thead-content header-text" aria-hidden="false">icons</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,7 +54,7 @@ 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-table-thead-content header-text" aria-hidden="false">icons</span></div>
         </th>
       </tr>
     </thead>

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

@@ -99,7 +99,7 @@ exports[`Users view > list view > renders list initially 1`] = `
                   <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>
+                  <div><span class="oc-table-thead-content header-text oc-invisible-sr" aria-hidden="true"></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>
@@ -117,7 +117,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-table-thead-content header-text" aria-hidden="false">icons</span></div>
                 </th>
               </tr>
             </thead>

packages/web-app-files/src/views/spaces/DriveResolver.vue

@@ -11,7 +11,6 @@
 <script lang="ts" setup>
 import DriveRedirect from './DriveRedirect.vue'
 import GenericSpace from './GenericSpace.vue'
-import GenericTrash from './GenericTrash.vue'
 
 import { computed, onMounted, ref, unref, useAttrs } from 'vue'
 import {

packages/web-app-files/src/views/trash/Overview.vue

@@ -36,6 +36,7 @@
             :header-position="fileListHeaderY"
             :sticky="true"
             :hover="true"
+            :has-icons-column="true"
             @sort="handleSort"
           >
             <template #icon="{ item }">

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-table-thead-content header-text oc-invisible-sr" aria-hidden="true">icons</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-->