Add keyboard navigation to spaces

changelog/unreleased/enhancement-add-keyboard-navigation-to-spaces-overview

@@ -0,0 +1,7 @@
+Enhancement: Add keyboard navigation to spaces overview
+
+In the spaces overview it is now possible to navigate through the individual spaces
+and perform actions using the keyboard
+
+https://github.com/owncloud/web/pull/9625
+https://github.com/owncloud/web/issues/9624

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

@@ -11,17 +11,17 @@
       <oc-img
         v-if="hasThumbnail"
         :key="thumbnail"
+        v-oc-tooltip="tooltipLabelIcon"
         :src="thumbnail"
         class="oc-resource-thumbnail"
         width="40"
         height="40"
-        v-oc-tooltip="tooltipLabelIcon"
         :aria-label="tooltipLabelIcon"
       />
       <oc-resource-icon
+        v-else
         v-oc-tooltip="tooltipLabelIcon"
         :aria-label="tooltipLabelIcon"
-        v-else
         :resource="resource"
       >
         <template v-if="showStatusIcon" #status>

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

@@ -26,8 +26,8 @@
         <span v-text="$gettext('Disabled')" />
       </oc-tag>
       <div
-        class="oc-tile-card-preview oc-flex oc-flex-middle oc-flex-center"
         v-oc-tooltip="tooltipLabelIcon"
+        class="oc-tile-card-preview oc-flex oc-flex-middle oc-flex-center"
         :aria-label="tooltipLabelIcon"
       >
         <div class="oc-tile-card-hover"></div>

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

@@ -54,8 +54,8 @@
           <span class="oc-invisible-sr" v-text="screenreaderShareExpiration" />
         </div>
         <oc-button
-          class="oc-mx-s"
           id="show-more-share-options-btn"
+          class="oc-mx-s"
           :aria-label="$gettext('Show more actions')"
           appearance="raw"
         >

packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts

@@ -1,12 +1,12 @@
 import { onBeforeUnmount, onMounted, unref, computed, Ref, watchEffect } from 'vue'
-import { eventBus, useStore, ViewModeConstants } from 'web-pkg'
+import { eventBus, QueryValue, useStore, ViewModeConstants } from 'web-pkg'
 import { KeyboardActions } from 'web-pkg/src/composables/keyboardActions'
 import { Resource } from 'web-client'
 import { findIndex } from 'lodash-es'
 
 export const useKeyboardTableMouseActions = (
   keyActions: KeyboardActions,
-  viewMode: Ref<string>
+  viewMode: Ref<string | QueryValue>
 ) => {
   const store = useStore()
   const latestSelectedId = computed(() => store.state.Files.latestSelectedId)

packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts

@@ -1,4 +1,4 @@
-import { useStore, ViewModeConstants } from 'web-pkg'
+import { QueryValue, useStore, ViewModeConstants } from 'web-pkg'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 import { computed, Ref, ref, unref, nextTick, watchEffect } from 'vue'
 import { Key, KeyboardActions, ModifierKey } from 'web-pkg/src/composables/keyboardActions'
@@ -12,7 +12,7 @@ const enum Direction {
 export const useKeyboardTableNavigation = (
   keyActions: KeyboardActions,
   paginatedResources: Ref<Resource[]>,
-  viewMode: Ref<string>
+  viewMode: Ref<string | QueryValue>
 ) => {
   const store = useStore()
   const { scrollToResource } = useScrollTo()

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

@@ -161,6 +161,12 @@ import { sortFields as availableSortFields } from '../../helpers/ui/resourceTile
 import { formatFileSize } from 'web-pkg/src'
 import { useGettext } from 'vue3-gettext'
 import { spaceRoleEditor, spaceRoleManager, spaceRoleViewer } from 'web-client/src/helpers/share'
+import { useKeyboardActions } from 'web-pkg/src/composables/keyboardActions'
+import {
+  useKeyboardTableNavigation,
+  useKeyboardTableMouseActions,
+  useKeyboardTableActions
+} from 'web-app-files/src/composables/keyboardActions'
 
 export default defineComponent({
   components: {
@@ -233,6 +239,11 @@ export default defineComponent({
       defaultValue: ViewModeConstants.tilesView.name
     })
 
+    const keyActions = useKeyboardActions()
+    useKeyboardTableNavigation(keyActions, runtimeSpaces, viewMode)
+    useKeyboardTableMouseActions(keyActions, viewMode)
+    useKeyboardTableActions(keyActions)
+
     const getManagerNames = (space: SpaceResource) => {
       const allManagers = space.spaceRoles[spaceRoleManager.name]
       const managers = allManagers.length > 2 ? allManagers.slice(0, 2) : allManagers