From ac0601ac44434e2c15a69dba8e0c547ac063f0ca Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 22 Apr 2021 14:37:58 +0200
Subject: [PATCH 01/19] Improve accessibility for the files sidebar

---
 .../web-app-files/src/components/Sidebar.vue  |  9 +++++--
 .../components/Sidebar/ActionsAccordion.vue   | 25 +++++++++++++++++--
 .../src/mixins/actions/navigate.js            |  4 ++-
 packages/web-runtime/src/App.vue              |  2 +-
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/Sidebar.vue b/packages/web-app-files/src/components/Sidebar.vue
index 00e2b51a7b5..6db81ef6107 100644
--- a/packages/web-app-files/src/components/Sidebar.vue
+++ b/packages/web-app-files/src/components/Sidebar.vue
@@ -3,6 +3,7 @@
     :key="highlightedFile.id"
     class="files-sidebar oc-p-s oc-border-l"
     :disable-action="false"
+    :close-button-label="$gettext('Close file sidebar')"
     @close="close()"
   >
     <template v-if="highlightedFile" slot="title">
@@ -11,9 +12,10 @@
       </div>
       <div class="uk-inline">
         <div class="uk-flex uk-flex-middle">
-          <span
+          <h3
             id="files-sidebar-item-name"
-            class="oc-mr-s oc-text-bold"
+            class="oc-mr-s oc-text-bold uk-margin-remove"
+            tabindex="-1"
             v-text="highlightedFile.name"
           />
         </div>
@@ -218,4 +220,7 @@ export default {
     fill: #ffba0a !important;
   }
 }
+#files-sidebar-item-name {
+  font-size: medium;
+}
 </style>
diff --git a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
index 4db39f1f327..fd39ab7d90e 100644
--- a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
+++ b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
@@ -1,7 +1,9 @@
 <template>
   <ul id="oc-files-actions-sidebar" class="uk-list oc-mt-s">
     <li v-for="action in actions" :key="action.ariaLabel(highlightedFile)" class="oc-py-xs">
-      <oc-button
+      <component
+        :is="getComponentType(action)"
+        v-bind="getComponentProps(action)"
         :aria-Label="action.ariaLabel(highlightedFile)"
         appearance="raw"
         class="oc-text-bold"
@@ -9,7 +11,7 @@
       >
         <oc-icon :name="action.icon" size="medium" />
         {{ action.ariaLabel(highlightedFile) }}
-      </oc-button>
+      </component>
     </li>
   </ul>
 </template>
@@ -38,6 +40,25 @@ export default {
         })
       )
     }
+  },
+  methods: {
+    getComponentType(action) {
+      if (action.componentType) {
+        return action.componentType
+      }
+
+      return 'oc-button'
+    },
+    getComponentProps(action) {
+      const route = action.getRoute()
+      if (action.componentType === 'router-link' && route) {
+        return {
+          to: route
+        }
+      }
+
+      return {}
+    }
   }
 }
 </script>
diff --git a/packages/web-app-files/src/mixins/actions/navigate.js b/packages/web-app-files/src/mixins/actions/navigate.js
index fb243dfc0e0..e1148a252c8 100644
--- a/packages/web-app-files/src/mixins/actions/navigate.js
+++ b/packages/web-app-files/src/mixins/actions/navigate.js
@@ -18,7 +18,9 @@ export default {
 
             return resource.type === 'folder'
           },
-          canBeDefault: true
+          canBeDefault: true,
+          componentType: 'router-link',
+          getRoute: () => this.$route.name
         }
       ]
     }
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index a5de12b3514..d266d1ea0a7 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -24,7 +24,7 @@
             v-touch:swipe.left="handleNavSwipe"
             class="oc-app-navigation"
             :logo-img="logoImage"
-            :product-name="productName"
+            product-name="ffff"
             :nav-items="sidebarNavItems"
             :hide-nav="sidebar.navigationHidden"
             :class="sidebarClasses"

From 83892c09262dfe2a6e51d6c4b85e72c6c72197ca Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Thu, 22 Apr 2021 16:53:10 +0200
Subject: [PATCH 02/19] close right side bar on outside click

---
 packages/web-runtime/src/directives/clickOutside.js | 13 +++++++++++++
 packages/web-runtime/src/index.js                   |  5 +++++
 2 files changed, 18 insertions(+)
 create mode 100644 packages/web-runtime/src/directives/clickOutside.js

diff --git a/packages/web-runtime/src/directives/clickOutside.js b/packages/web-runtime/src/directives/clickOutside.js
new file mode 100644
index 00000000000..5c254bf9d87
--- /dev/null
+++ b/packages/web-runtime/src/directives/clickOutside.js
@@ -0,0 +1,13 @@
+export default {
+  bind: function(el, binding, vnode) {
+    window.event = function(event) {
+      if (!(el === event.target || el.contains(event.target))) {
+        vnode.context[binding.expression](event)
+      }
+    }
+    document.body.addEventListener('click', window.event)
+  },
+  unbind: function(el) {
+    document.body.removeEventListener('click', window.event)
+  }
+}
diff --git a/packages/web-runtime/src/index.js b/packages/web-runtime/src/index.js
index 6057d136ecb..8b40c7beb11 100644
--- a/packages/web-runtime/src/index.js
+++ b/packages/web-runtime/src/index.js
@@ -26,6 +26,9 @@ import Vue2TouchEvents from 'vue2-touch-events'
 import focusMixin from './mixins/focusMixin'
 import lifecycleMixin from './mixins/lifecycleMixin'
 
+// --- Directive ---
+import ClickOutsideDirective from './directives/clickOutside'
+
 // --- Gettext ----
 import GetTextPlugin from 'vue-gettext'
 import coreTranslations from '../l10n/translations.json'
@@ -79,6 +82,8 @@ Vue.component('avatar-image', Avatar)
 Vue.mixin(focusMixin)
 Vue.mixin(lifecycleMixin)
 
+Vue.directive('click-outside', ClickOutsideDirective)
+
 // --- Router ----
 
 let config

From 2a693ceffa4bca99ec138b494fc440bbbb072a92 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 22 Apr 2021 17:56:39 +0200
Subject: [PATCH 03/19] Remove aria label on file sidebar actions, fix folder
 href

---
 .../web-app-files/src/components/Sidebar.vue  |  2 +-
 .../components/Sidebar/ActionsAccordion.vue   | 28 ++++++++-----------
 .../web-app-files/src/mixins/actions/copy.js  |  5 ++--
 .../src/mixins/actions/delete.js              | 10 ++++---
 .../src/mixins/actions/download.js            |  5 ++--
 .../src/mixins/actions/favorite.js            |  5 ++--
 .../web-app-files/src/mixins/actions/fetch.js |  5 ++--
 .../web-app-files/src/mixins/actions/move.js  |  5 ++--
 .../src/mixins/actions/navigate.js            | 20 ++++++++-----
 .../src/mixins/actions/rename.js              |  5 ++--
 .../src/mixins/actions/restore.js             |  5 ++--
 packages/web-runtime/src/App.vue              |  2 +-
 12 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/packages/web-app-files/src/components/Sidebar.vue b/packages/web-app-files/src/components/Sidebar.vue
index 6db81ef6107..924c3ae612b 100644
--- a/packages/web-app-files/src/components/Sidebar.vue
+++ b/packages/web-app-files/src/components/Sidebar.vue
@@ -221,6 +221,6 @@ export default {
   }
 }
 #files-sidebar-item-name {
-  font-size: medium;
+  font-size: 1rem;
 }
 </style>
diff --git a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
index fd39ab7d90e..943a9476e4a 100644
--- a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
+++ b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
@@ -1,16 +1,15 @@
 <template>
   <ul id="oc-files-actions-sidebar" class="uk-list oc-mt-s">
-    <li v-for="action in actions" :key="action.ariaLabel(highlightedFile)" class="oc-py-xs">
+    <li v-for="action in actions" :key="action.label(highlightedFile)" class="oc-py-xs">
       <component
-        :is="getComponentType(action)"
-        v-bind="getComponentProps(action)"
-        :aria-Label="action.ariaLabel(highlightedFile)"
+        :is="action.componentType"
+        v-bind="getComponentProps(action, highlightedFile)"
         appearance="raw"
         class="oc-text-bold"
         @click.stop="action.handler(highlightedFile, action.handlerData)"
       >
         <oc-icon :name="action.icon" size="medium" />
-        {{ action.ariaLabel(highlightedFile) }}
+        {{ action.label(highlightedFile) }}
       </component>
     </li>
   </ul>
@@ -42,18 +41,15 @@ export default {
     }
   },
   methods: {
-    getComponentType(action) {
-      if (action.componentType) {
-        return action.componentType
-      }
-
-      return 'oc-button'
-    },
-    getComponentProps(action) {
-      const route = action.getRoute()
-      if (action.componentType === 'router-link' && route) {
+    getComponentProps(action, highlightedFile) {
+      if (action.componentType === 'router-link' && action.route) {
         return {
-          to: route
+          to: {
+            name: action.route,
+            params: {
+              item: highlightedFile.path
+            }
+          }
         }
       }
 
diff --git a/packages/web-app-files/src/mixins/actions/copy.js b/packages/web-app-files/src/mixins/actions/copy.js
index 756ea1dcfb8..cc513cfe709 100644
--- a/packages/web-app-files/src/mixins/actions/copy.js
+++ b/packages/web-app-files/src/mixins/actions/copy.js
@@ -11,7 +11,7 @@ export default {
         {
           icon: 'file_copy',
           handler: this.$_copy_trigger,
-          ariaLabel: () => this.$gettext('Copy'),
+          label: () => this.$gettext('Copy'),
           isEnabled: () => {
             if (
               !checkRoute(
@@ -27,7 +27,8 @@ export default {
             }
 
             return true
-          }
+          },
+          componentType: 'oc-button'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/delete.js b/packages/web-app-files/src/mixins/actions/delete.js
index 6f5bf9b2f42..9ed16b79d78 100644
--- a/packages/web-app-files/src/mixins/actions/delete.js
+++ b/packages/web-app-files/src/mixins/actions/delete.js
@@ -8,7 +8,7 @@ export default {
       return [
         {
           icon: 'delete',
-          ariaLabel: () => {
+          label: () => {
             return this.$gettext('Delete')
           },
           handler: this.$_delete_trigger,
@@ -18,13 +18,15 @@ export default {
             }
 
             return resource.canBeDeleted()
-          }
+          },
+          componentType: 'oc-button'
         },
         {
           icon: 'delete',
-          ariaLabel: () => this.$gettext('Delete'),
+          label: () => this.$gettext('Delete'),
           handler: this.$_delete_trigger,
-          isEnabled: () => checkRoute(['files-trashbin'], this.$route.name)
+          isEnabled: () => checkRoute(['files-trashbin'], this.$route.name),
+          componentType: 'oc-button'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/download.js b/packages/web-app-files/src/mixins/actions/download.js
index 0c7fb84844e..ec346522203 100644
--- a/packages/web-app-files/src/mixins/actions/download.js
+++ b/packages/web-app-files/src/mixins/actions/download.js
@@ -7,7 +7,7 @@ export default {
         {
           icon: 'file_download',
           handler: this.$_download_trigger,
-          ariaLabel: () => {
+          label: () => {
             return this.$gettext('Download')
           },
           isEnabled: ({ resource }) => {
@@ -17,7 +17,8 @@ export default {
 
             return resource.canDownload()
           },
-          canBeDefault: true
+          canBeDefault: true,
+          componentType: 'oc-button'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/favorite.js b/packages/web-app-files/src/mixins/actions/favorite.js
index a538d0eb8ea..ac983728c82 100644
--- a/packages/web-app-files/src/mixins/actions/favorite.js
+++ b/packages/web-app-files/src/mixins/actions/favorite.js
@@ -9,7 +9,7 @@ export default {
         {
           icon: 'star',
           handler: this.$_favorite_trigger,
-          ariaLabel: item => {
+          label: item => {
             if (item.starred) {
               return this.$gettext('Unmark as favorite')
             }
@@ -27,7 +27,8 @@ export default {
               this.capabilities.files.favorites &&
               isRouteAllowed
             )
-          }
+          },
+          componentType: 'oc-button'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/fetch.js b/packages/web-app-files/src/mixins/actions/fetch.js
index 63ad682d5fb..58a76e6a2b3 100644
--- a/packages/web-app-files/src/mixins/actions/fetch.js
+++ b/packages/web-app-files/src/mixins/actions/fetch.js
@@ -10,7 +10,7 @@ export default {
         {
           icon: 'remove_red_eye',
           handler: file => this.$_fetch_trigger(file, 'application/pdf', this.isPublicFilesRoute),
-          ariaLabel: () => {
+          label: () => {
             return this.$gettext('Open in browser')
           },
           isEnabled: ({ resource }) => {
@@ -20,7 +20,8 @@ export default {
 
             return resource.extension === 'pdf'
           },
-          canBeDefault: true
+          canBeDefault: true,
+          componentType: 'oc-button'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/move.js b/packages/web-app-files/src/mixins/actions/move.js
index 9b4a70650e9..1be8320a9fc 100644
--- a/packages/web-app-files/src/mixins/actions/move.js
+++ b/packages/web-app-files/src/mixins/actions/move.js
@@ -12,7 +12,7 @@ export default {
         {
           icon: 'folder-move',
           handler: resource => this.$_move_trigger(resource),
-          ariaLabel: () =>
+          label: () =>
             this.$pgettext(
               'Action in the files list row to initiate move of a single resource',
               'Move'
@@ -32,7 +32,8 @@ export default {
             }
 
             return canBeMoved(resource, this.currentFolder.path)
-          }
+          },
+          componentType: 'oc-button'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/navigate.js b/packages/web-app-files/src/mixins/actions/navigate.js
index e1148a252c8..197bfc77f65 100644
--- a/packages/web-app-files/src/mixins/actions/navigate.js
+++ b/packages/web-app-files/src/mixins/actions/navigate.js
@@ -9,7 +9,7 @@ export default {
         {
           icon: 'folder-open',
           handler: resource => this.$_navigate_trigger(resource),
-          ariaLabel: () =>
+          label: () =>
             this.$pgettext('Action in the files list row to open a folder', 'Open folder'),
           isEnabled: ({ resource }) => {
             if (checkRoute(['files-trashbin'], this.$route.name)) {
@@ -20,9 +20,18 @@ export default {
           },
           canBeDefault: true,
           componentType: 'router-link',
-          getRoute: () => this.$route.name
+          route: this.route,
+          getRouterLink: resource => this.getRouterLink(resource)
         }
       ]
+    },
+    route() {
+      let route = 'files-personal'
+      if (this.publicPage()) {
+        route = 'files-public-list'
+      }
+
+      return route
     }
   },
   methods: {
@@ -32,12 +41,9 @@ export default {
       if (this.searchTerm !== '' && this.$route.params.item === folder.path) {
         this.resetSearch()
       }
-      let route = 'files-personal'
-      if (this.publicPage()) {
-        route = 'files-public-list'
-      }
+
       this.$router.push({
-        name: route,
+        name: this.route,
         params: {
           item: folder.path
         }
diff --git a/packages/web-app-files/src/mixins/actions/rename.js b/packages/web-app-files/src/mixins/actions/rename.js
index fd4467840b7..0d359686479 100644
--- a/packages/web-app-files/src/mixins/actions/rename.js
+++ b/packages/web-app-files/src/mixins/actions/rename.js
@@ -10,7 +10,7 @@ export default {
       return [
         {
           icon: 'edit',
-          ariaLabel: () => {
+          label: () => {
             return this.$gettext('Rename')
           },
           handler: this.$_rename_trigger,
@@ -20,7 +20,8 @@ export default {
             }
 
             return resource.canRename()
-          }
+          },
+          componentType: 'oc-button'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/restore.js b/packages/web-app-files/src/mixins/actions/restore.js
index ccafed6a454..379d72d6db7 100644
--- a/packages/web-app-files/src/mixins/actions/restore.js
+++ b/packages/web-app-files/src/mixins/actions/restore.js
@@ -8,9 +8,10 @@ export default {
       return [
         {
           icon: 'restore',
-          ariaLabel: () => this.$gettext('Restore'),
+          label: () => this.$gettext('Restore'),
           handler: this.$_restore_trigger,
-          isEnabled: () => checkRoute(['files-trashbin'], this.$route.name)
+          isEnabled: () => checkRoute(['files-trashbin'], this.$route.name),
+          componentType: 'oc-button'
         }
       ]
     }
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index d266d1ea0a7..a5de12b3514 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -24,7 +24,7 @@
             v-touch:swipe.left="handleNavSwipe"
             class="oc-app-navigation"
             :logo-img="logoImage"
-            product-name="ffff"
+            :product-name="productName"
             :nav-items="sidebarNavItems"
             :hide-nav="sidebar.navigationHidden"
             :class="sidebarClasses"

From d83429f7ebe719077a480abbf183e11e1b822d3e Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 22 Apr 2021 18:45:52 +0200
Subject: [PATCH 04/19] Add unit test

---
 .../components/Sidebar/ActionsAccordion.vue   | 20 ++++++++++++++++---
 .../src/mixins/actions/navigate.js            |  3 +--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
index 943a9476e4a..b114ac08426 100644
--- a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
+++ b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
@@ -1,10 +1,9 @@
 <template>
-  <ul id="oc-files-actions-sidebar" class="uk-list oc-mt-s">
+  <ul id="oc-files-actions-sidebar" class="uk-list oc-mt-s oc-files-actions-sidebar-actions">
     <li v-for="action in actions" :key="action.label(highlightedFile)" class="oc-py-xs">
       <component
         :is="action.componentType"
         v-bind="getComponentProps(action, highlightedFile)"
-        appearance="raw"
         class="oc-text-bold"
         @click.stop="action.handler(highlightedFile, action.handlerData)"
       >
@@ -53,8 +52,23 @@ export default {
         }
       }
 
-      return {}
+      return {
+        appearance: 'raw'
+      }
     }
   }
 }
 </script>
+
+<style lang="scss">
+.oc-files-actions-sidebar-actions {
+  > li a,
+  > li a:hover {
+    text-decoration: none;
+    color: var(--oc-color-swatch-passive-default);
+    display: inline-flex;
+    gap: 10px;
+    vertical-align: top;
+  }
+}
+</style>
diff --git a/packages/web-app-files/src/mixins/actions/navigate.js b/packages/web-app-files/src/mixins/actions/navigate.js
index 197bfc77f65..41a29a53d9b 100644
--- a/packages/web-app-files/src/mixins/actions/navigate.js
+++ b/packages/web-app-files/src/mixins/actions/navigate.js
@@ -20,8 +20,7 @@ export default {
           },
           canBeDefault: true,
           componentType: 'router-link',
-          route: this.route,
-          getRouterLink: resource => this.getRouterLink(resource)
+          route: this.route
         }
       ]
     },

From 7b6f6ea845d452ffd7ae3ce8776f495438e1d8f6 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 08:35:49 +0200
Subject: [PATCH 05/19] Transform the favorite-star in sidebar to a button,
 adjust aria-label

---
 .../web-app-files/src/components/Sidebar.vue     | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-files/src/components/Sidebar.vue b/packages/web-app-files/src/components/Sidebar.vue
index 924c3ae612b..683e0bdf685 100644
--- a/packages/web-app-files/src/components/Sidebar.vue
+++ b/packages/web-app-files/src/components/Sidebar.vue
@@ -20,18 +20,20 @@
           />
         </div>
         <div class="uk-flex uk-flex-middle">
-          <oc-icon
+          <oc-button
             v-if="!publicPage() && isFavoritesEnabled"
             id="files-sidebar-star-icon"
-            :class="['uk-inline', 'oc-mr-xs', favoriteIconClass]"
-            name="star"
-            :accessible-label="
+            :aria-label="
               highlightedFile.starred
-                ? $gettext('File is marked as favorite')
-                : $gettext('File is not marked as favorite')
+                ? $gettext('Click to remove this file from your favorites')
+                : $gettext('Click to mark this file as favorite')
             "
+            appearance="raw"
+            class="oc-mr-xs"
             @click.native.stop="toggleFileFavorite(highlightedFile)"
-          />
+          >
+            <oc-icon :class="favoriteIconClass" name="star" />
+          </oc-button>
           <template v-if="highlightedFile.size > -1">
             {{ getResourceSize(highlightedFile.size) }},
           </template>

From e140f07ad93df8b064ce55de8b5f0a5ea6006617 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 08:53:48 +0200
Subject: [PATCH 06/19] Add changelog item

---
 .../enhancement-files-sidebar-accessibility          | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-files-sidebar-accessibility

diff --git a/changelog/unreleased/enhancement-files-sidebar-accessibility b/changelog/unreleased/enhancement-files-sidebar-accessibility
new file mode 100644
index 00000000000..d9033d7962f
--- /dev/null
+++ b/changelog/unreleased/enhancement-files-sidebar-accessibility
@@ -0,0 +1,12 @@
+Enhancement: Improve accessibility for the files sidebar
+
+We've did several improvements to enhance the accessibility on the files sidebar:
+- Transformed the file name to a h3 element
+- Transformed the "Open folder"-action to a link instead of a button
+- Transformed the favorite-star to a button-element
+- Adjusted aria-label of the favorite-star to describe what it does instead of its current state
+- Added a more descriptive close button label
+- Clicking outside of the sidebar now closes it
+- Removed the aria-label on the action buttons as they already include proper labels
+
+https://github.com/owncloud/web/pull/5000

From a1bf5f00d2d4557cd33c6a0f3ad73f6156415c79 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Fri, 23 Apr 2021 09:33:28 +0200
Subject: [PATCH 07/19] fix label and index for accordion actions in files app

---
 .../web-app-files/src/components/Sidebar/ActionsAccordion.vue   | 2 +-
 packages/web-app-files/src/mixins/fileActions.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
index b114ac08426..0c96a8b3524 100644
--- a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
+++ b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
@@ -1,6 +1,6 @@
 <template>
   <ul id="oc-files-actions-sidebar" class="uk-list oc-mt-s oc-files-actions-sidebar-actions">
-    <li v-for="action in actions" :key="action.label(highlightedFile)" class="oc-py-xs">
+    <li v-for="(action, index) in actions" :key="`action-${index}`" class="oc-py-xs">
       <component
         :is="action.componentType"
         v-bind="getComponentProps(action, highlightedFile)"
diff --git a/packages/web-app-files/src/mixins/fileActions.js b/packages/web-app-files/src/mixins/fileActions.js
index 086be675d0e..f7826357d47 100644
--- a/packages/web-app-files/src/mixins/fileActions.js
+++ b/packages/web-app-files/src/mixins/fileActions.js
@@ -43,7 +43,7 @@ export default {
     $_fileActions_editorActions() {
       return this.apps.fileEditors.map(editor => {
         return {
-          ariaLabel: () => {
+          label: () => {
             return `Open in ${this.apps.meta[editor.app].name}`
           },
           icon: this.apps.meta[editor.app].icon,

From 851cb675ebb448f3906962e6cb0904ab6541005b Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 09:35:03 +0200
Subject: [PATCH 08/19] Add componentType for extentsion actions

---
 packages/web-app-files/src/mixins/fileActions.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/mixins/fileActions.js b/packages/web-app-files/src/mixins/fileActions.js
index f7826357d47..5776756a48a 100644
--- a/packages/web-app-files/src/mixins/fileActions.js
+++ b/packages/web-app-files/src/mixins/fileActions.js
@@ -55,7 +55,8 @@ export default {
 
             return resource.extension === editor.extension
           },
-          canBeDefault: true
+          canBeDefault: true,
+          componentType: 'oc-button'
         }
       })
     }

From adf71e7768e13bcd4582b8d1d995b77e991e8589 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 23 Apr 2021 09:37:11 +0200
Subject: [PATCH 09/19] fix click outside

---
 packages/web-app-files/src/components/Sidebar.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/web-app-files/src/components/Sidebar.vue b/packages/web-app-files/src/components/Sidebar.vue
index 683e0bdf685..061171960af 100644
--- a/packages/web-app-files/src/components/Sidebar.vue
+++ b/packages/web-app-files/src/components/Sidebar.vue
@@ -1,6 +1,7 @@
 <template>
   <oc-app-side-bar
     :key="highlightedFile.id"
+    v-click-outside="onClickOutside"
     class="files-sidebar oc-p-s oc-border-l"
     :disable-action="false"
     :close-button-label="$gettext('Close file sidebar')"
@@ -206,6 +207,12 @@ export default {
 
     expandActionsAccordion() {
       this.SET_APP_SIDEBAR_EXPANDED_ACCORDION('files-actions')
+    },
+
+    onClickOutside(event) {
+      if (!document.querySelector('.files-table').contains(event.target)) {
+        this.close()
+      }
     }
   }
 }

From 4d4b132a3dd42c335d53e765fdba6e5c6a909d65 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 09:44:13 +0200
Subject: [PATCH 10/19] Use oc-text-initial class instead of own css

---
 packages/web-app-files/src/components/Sidebar.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/components/Sidebar.vue b/packages/web-app-files/src/components/Sidebar.vue
index 061171960af..05c2da40dbc 100644
--- a/packages/web-app-files/src/components/Sidebar.vue
+++ b/packages/web-app-files/src/components/Sidebar.vue
@@ -15,7 +15,7 @@
         <div class="uk-flex uk-flex-middle">
           <h3
             id="files-sidebar-item-name"
-            class="oc-mr-s oc-text-bold uk-margin-remove"
+            class="oc-text-initial oc-mr-s oc-text-bold uk-margin-remove"
             tabindex="-1"
             v-text="highlightedFile.name"
           />
@@ -229,7 +229,4 @@ export default {
     fill: #ffba0a !important;
   }
 }
-#files-sidebar-item-name {
-  font-size: 1rem;
-}
 </style>

From b1ed60845c1d1b5c6bca683358dffdb679351c91 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 10:09:37 +0200
Subject: [PATCH 11/19] Fix xpath selectors on file actions

---
 .../FilesPageElement/fileActionsMenu.js       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js b/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
index b4703bca787..a4f14cd34fb 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
@@ -160,27 +160,27 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     deleteButtonInAccordion: {
-      selector: '//button[@aria-label="Delete"]',
+      selector: '//button[text()="Delete"]',
       locateStrategy: 'xpath'
     },
     downloadButtonInAccordion: {
-      selector: '//button[@aria-label="Download"]',
+      selector: '//button[text()="Download"]',
       locateStrategy: 'xpath'
     },
     favoriteButtonInAccordion: {
-      selector: '//button[@aria-label="Mark as favorite"]',
+      selector: '//button[text()="Mark as favorite"]',
       locateStrategy: 'xpath'
     },
     unmarkFavoriteButtonInAccordion: {
-      selector: '//button[@aria-label="Unmark as favorite"]',
+      selector: '//button[text()="Unmark as favorite"]',
       locateStrategy: 'xpath'
     },
     restoreButtonInAccordion: {
-      selector: '//button[@aria-label="Restore"]',
+      selector: '//button[text()="Restore"]',
       locateStrategy: 'xpath'
     },
     renameButtonInAccordion: {
-      selector: '//button[@aria-label="Rename"]',
+      selector: '//button[text()="Rename"]',
       locateStrategy: 'xpath'
     },
     // TODO: Merge with selectors in personalPage
@@ -194,19 +194,19 @@ module.exports = {
       selector: '.oc-modal-body-input > input'
     },
     moveButtonInAccordion: {
-      selector: '//button[@aria-label="Move"]',
+      selector: '//button[text()="Move"]',
       locateStrategy: 'xpath'
     },
     copyButtonInAccordion: {
-      selector: '//button[@aria-label="Copy"]',
+      selector: '//button[text()="Copy"]',
       locateStrategy: 'xpath'
     },
     mediaViewerButtonInAccordion: {
-      selector: '//button[@aria-label="Open in Mediaviewer"]',
+      selector: '//button[text()="Open in Mediaviewer"]',
       locateStrategy: 'xpath'
     },
     markdownEditorButtonInAccordion: {
-      selector: '//button[@aria-label="Open in MarkdownEditor"]',
+      selector: '//button[text()="Open in MarkdownEditor"]',
       locateStrategy: 'xpath'
     }
   }

From 2176baf561d400554c03300f20198d6017c992a8 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 10:40:47 +0200
Subject: [PATCH 12/19] Fix xpath selectors on file actions

---
 .../components/Sidebar/ActionsAccordion.vue   |  2 +-
 .../web-app-files/src/mixins/actions/copy.js  |  3 ++-
 .../src/mixins/actions/delete.js              |  6 ++++--
 .../src/mixins/actions/download.js            |  3 ++-
 .../src/mixins/actions/favorite.js            |  3 ++-
 .../web-app-files/src/mixins/actions/fetch.js |  3 ++-
 .../web-app-files/src/mixins/actions/move.js  |  3 ++-
 .../src/mixins/actions/navigate.js            |  3 ++-
 .../src/mixins/actions/rename.js              |  3 ++-
 .../src/mixins/actions/restore.js             |  3 ++-
 .../web-app-files/src/mixins/fileActions.js   |  6 +++++-
 .../FilesPageElement/fileActionsMenu.js       | 20 +++++++++----------
 12 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
index 0c96a8b3524..2a0d613c833 100644
--- a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
+++ b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
@@ -4,7 +4,7 @@
       <component
         :is="action.componentType"
         v-bind="getComponentProps(action, highlightedFile)"
-        class="oc-text-bold"
+        :class="['oc-text-bold', action.class]"
         @click.stop="action.handler(highlightedFile, action.handlerData)"
       >
         <oc-icon :name="action.icon" size="medium" />
diff --git a/packages/web-app-files/src/mixins/actions/copy.js b/packages/web-app-files/src/mixins/actions/copy.js
index cc513cfe709..af992a46c0f 100644
--- a/packages/web-app-files/src/mixins/actions/copy.js
+++ b/packages/web-app-files/src/mixins/actions/copy.js
@@ -28,7 +28,8 @@ export default {
 
             return true
           },
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: 'oc-files-actions-sidebar-copy-trigger'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/delete.js b/packages/web-app-files/src/mixins/actions/delete.js
index 9ed16b79d78..26e6dc048f2 100644
--- a/packages/web-app-files/src/mixins/actions/delete.js
+++ b/packages/web-app-files/src/mixins/actions/delete.js
@@ -19,14 +19,16 @@ export default {
 
             return resource.canBeDeleted()
           },
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: 'oc-files-actions-sidebar-delete-trigger'
         },
         {
           icon: 'delete',
           label: () => this.$gettext('Delete'),
           handler: this.$_delete_trigger,
           isEnabled: () => checkRoute(['files-trashbin'], this.$route.name),
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: 'oc-files-actions-sidebar-delete-trigger'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/download.js b/packages/web-app-files/src/mixins/actions/download.js
index ec346522203..127c9ffc30b 100644
--- a/packages/web-app-files/src/mixins/actions/download.js
+++ b/packages/web-app-files/src/mixins/actions/download.js
@@ -18,7 +18,8 @@ export default {
             return resource.canDownload()
           },
           canBeDefault: true,
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: 'oc-files-actions-sidebar-download-trigger'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/favorite.js b/packages/web-app-files/src/mixins/actions/favorite.js
index ac983728c82..9ab785188ad 100644
--- a/packages/web-app-files/src/mixins/actions/favorite.js
+++ b/packages/web-app-files/src/mixins/actions/favorite.js
@@ -28,7 +28,8 @@ export default {
               isRouteAllowed
             )
           },
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: 'oc-files-actions-sidebar-favorite-trigger'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/fetch.js b/packages/web-app-files/src/mixins/actions/fetch.js
index 58a76e6a2b3..ae86fefe6e6 100644
--- a/packages/web-app-files/src/mixins/actions/fetch.js
+++ b/packages/web-app-files/src/mixins/actions/fetch.js
@@ -21,7 +21,8 @@ export default {
             return resource.extension === 'pdf'
           },
           canBeDefault: true,
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: 'oc-files-actions-sidebar-fetch-trigger'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/move.js b/packages/web-app-files/src/mixins/actions/move.js
index 1be8320a9fc..23d0eef3c6d 100644
--- a/packages/web-app-files/src/mixins/actions/move.js
+++ b/packages/web-app-files/src/mixins/actions/move.js
@@ -33,7 +33,8 @@ export default {
 
             return canBeMoved(resource, this.currentFolder.path)
           },
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: 'oc-files-actions-sidebar-move-trigger'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/navigate.js b/packages/web-app-files/src/mixins/actions/navigate.js
index 41a29a53d9b..21acf5fbc5b 100644
--- a/packages/web-app-files/src/mixins/actions/navigate.js
+++ b/packages/web-app-files/src/mixins/actions/navigate.js
@@ -20,7 +20,8 @@ export default {
           },
           canBeDefault: true,
           componentType: 'router-link',
-          route: this.route
+          route: this.route,
+          class: 'oc-files-actions-sidebar-navigate'
         }
       ]
     },
diff --git a/packages/web-app-files/src/mixins/actions/rename.js b/packages/web-app-files/src/mixins/actions/rename.js
index 0d359686479..427a358b274 100644
--- a/packages/web-app-files/src/mixins/actions/rename.js
+++ b/packages/web-app-files/src/mixins/actions/rename.js
@@ -21,7 +21,8 @@ export default {
 
             return resource.canRename()
           },
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: 'oc-files-actions-sidebar-rename-trigger'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/actions/restore.js b/packages/web-app-files/src/mixins/actions/restore.js
index 379d72d6db7..b0af47dcb21 100644
--- a/packages/web-app-files/src/mixins/actions/restore.js
+++ b/packages/web-app-files/src/mixins/actions/restore.js
@@ -11,7 +11,8 @@ export default {
           label: () => this.$gettext('Restore'),
           handler: this.$_restore_trigger,
           isEnabled: () => checkRoute(['files-trashbin'], this.$route.name),
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: 'oc-files-actions-sidebar-restore-trigger'
         }
       ]
     }
diff --git a/packages/web-app-files/src/mixins/fileActions.js b/packages/web-app-files/src/mixins/fileActions.js
index 5776756a48a..777321ae32b 100644
--- a/packages/web-app-files/src/mixins/fileActions.js
+++ b/packages/web-app-files/src/mixins/fileActions.js
@@ -10,6 +10,7 @@ import Move from './actions/move'
 import Navigate from './actions/navigate'
 import Rename from './actions/rename'
 import Restore from './actions/restore'
+import { kebabCase } from 'lodash'
 
 const actionsMixins = [
   'fetch',
@@ -56,7 +57,10 @@ export default {
             return resource.extension === editor.extension
           },
           canBeDefault: true,
-          componentType: 'oc-button'
+          componentType: 'oc-button',
+          class: `oc-files-actions-sidebar-${kebabCase(
+            this.apps.meta[editor.app].name
+          ).toLowerCase()}-trigger`
         }
       })
     }
diff --git a/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js b/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
index a4f14cd34fb..0938fa1f830 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/fileActionsMenu.js
@@ -160,27 +160,27 @@ module.exports = {
       locateStrategy: 'xpath'
     },
     deleteButtonInAccordion: {
-      selector: '//button[text()="Delete"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-delete-trigger")]',
       locateStrategy: 'xpath'
     },
     downloadButtonInAccordion: {
-      selector: '//button[text()="Download"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-download-trigger")]',
       locateStrategy: 'xpath'
     },
     favoriteButtonInAccordion: {
-      selector: '//button[text()="Mark as favorite"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-favorite-trigger")]',
       locateStrategy: 'xpath'
     },
     unmarkFavoriteButtonInAccordion: {
-      selector: '//button[text()="Unmark as favorite"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-favorite-trigger")]',
       locateStrategy: 'xpath'
     },
     restoreButtonInAccordion: {
-      selector: '//button[text()="Restore"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-restore-trigger")]',
       locateStrategy: 'xpath'
     },
     renameButtonInAccordion: {
-      selector: '//button[text()="Rename"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-rename-trigger")]',
       locateStrategy: 'xpath'
     },
     // TODO: Merge with selectors in personalPage
@@ -194,19 +194,19 @@ module.exports = {
       selector: '.oc-modal-body-input > input'
     },
     moveButtonInAccordion: {
-      selector: '//button[text()="Move"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-move-trigger")]',
       locateStrategy: 'xpath'
     },
     copyButtonInAccordion: {
-      selector: '//button[text()="Copy"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-copy-trigger")]',
       locateStrategy: 'xpath'
     },
     mediaViewerButtonInAccordion: {
-      selector: '//button[text()="Open in Mediaviewer"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-mediaviewer-trigger")]',
       locateStrategy: 'xpath'
     },
     markdownEditorButtonInAccordion: {
-      selector: '//button[text()="Open in MarkdownEditor"]',
+      selector: '//button[contains(@class, "oc-files-actions-sidebar-markdown-editor-trigger")]',
       locateStrategy: 'xpath'
     }
   }

From e2c4117f3a583719193198b530f0bc5c6a2e2559 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 23 Apr 2021 11:11:55 +0200
Subject: [PATCH 13/19] fix click outside

---
 packages/web-app-files/src/components/AppBar.vue  | 2 +-
 packages/web-app-files/src/components/Sidebar.vue | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/AppBar.vue b/packages/web-app-files/src/components/AppBar.vue
index 97e78562b75..d7da1bde4e8 100644
--- a/packages/web-app-files/src/components/AppBar.vue
+++ b/packages/web-app-files/src/components/AppBar.vue
@@ -10,7 +10,7 @@
       @error="onFileError"
       @progress="onFileProgress"
     />
-    <div>
+    <div class="files-topbar">
       <oc-breadcrumb
         v-if="showBreadcrumb"
         id="files-breadcrumb"
diff --git a/packages/web-app-files/src/components/Sidebar.vue b/packages/web-app-files/src/components/Sidebar.vue
index 061171960af..ad250d70eb6 100644
--- a/packages/web-app-files/src/components/Sidebar.vue
+++ b/packages/web-app-files/src/components/Sidebar.vue
@@ -210,7 +210,12 @@ export default {
     },
 
     onClickOutside(event) {
-      if (!document.querySelector('.files-table').contains(event.target)) {
+      if (
+        document.querySelector('.files-topbar').contains(event.target) ||
+        document.querySelector('.oc-topbar').contains(event.target) ||
+        document.querySelector('.oc-app-navigation').contains(event.target) ||
+        event.target.id === 'files-view'
+      ) {
         this.close()
       }
     }

From 15af335cb7caa79db09e5ad6818b5c30ebc48d29 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 23 Apr 2021 11:19:49 +0200
Subject: [PATCH 14/19] added comment

---
 packages/web-app-files/src/components/Sidebar.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/web-app-files/src/components/Sidebar.vue b/packages/web-app-files/src/components/Sidebar.vue
index 9070adce497..822fa0e8b13 100644
--- a/packages/web-app-files/src/components/Sidebar.vue
+++ b/packages/web-app-files/src/components/Sidebar.vue
@@ -210,6 +210,11 @@ export default {
     },
 
     onClickOutside(event) {
+      /*
+       * We need to go for this opt-out solution because under circumstances a model will be rendered,
+       * for example if we click rename, clicking in this model would otherwise falsy close the sidebar.
+       */
+
       if (
         document.querySelector('.files-topbar').contains(event.target) ||
         document.querySelector('.oc-topbar').contains(event.target) ||

From e32f1a04843641dcbba5eaba636da80b8ad7f589 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 11:24:28 +0200
Subject: [PATCH 15/19] Add a hint for screen readers if an action opens a new
 window/tab, use h2

---
 changelog/unreleased/enhancement-files-sidebar-accessibility | 3 ++-
 packages/web-app-files/src/components/Sidebar.vue            | 2 +-
 .../src/components/Sidebar/ActionsAccordion.vue              | 5 +++++
 packages/web-app-files/src/mixins/actions/fetch.js           | 3 ++-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/changelog/unreleased/enhancement-files-sidebar-accessibility b/changelog/unreleased/enhancement-files-sidebar-accessibility
index d9033d7962f..89c75909398 100644
--- a/changelog/unreleased/enhancement-files-sidebar-accessibility
+++ b/changelog/unreleased/enhancement-files-sidebar-accessibility
@@ -1,12 +1,13 @@
 Enhancement: Improve accessibility for the files sidebar
 
 We've did several improvements to enhance the accessibility on the files sidebar:
-- Transformed the file name to a h3 element
+- Transformed the file name to a h2 element
 - Transformed the "Open folder"-action to a link instead of a button
 - Transformed the favorite-star to a button-element
 - Adjusted aria-label of the favorite-star to describe what it does instead of its current state
 - Added a more descriptive close button label
 - Clicking outside of the sidebar now closes it
 - Removed the aria-label on the action buttons as they already include proper labels
+- Added a hint for screen readers if an action opens a new window/tab
 
 https://github.com/owncloud/web/pull/5000
diff --git a/packages/web-app-files/src/components/Sidebar.vue b/packages/web-app-files/src/components/Sidebar.vue
index 822fa0e8b13..f14e67d7c00 100644
--- a/packages/web-app-files/src/components/Sidebar.vue
+++ b/packages/web-app-files/src/components/Sidebar.vue
@@ -13,7 +13,7 @@
       </div>
       <div class="uk-inline">
         <div class="uk-flex uk-flex-middle">
-          <h3
+          <h2
             id="files-sidebar-item-name"
             class="oc-text-initial oc-mr-s oc-text-bold uk-margin-remove"
             tabindex="-1"
diff --git a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
index 2a0d613c833..bb57cc735fa 100644
--- a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
+++ b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
@@ -9,6 +9,11 @@
       >
         <oc-icon :name="action.icon" size="medium" />
         {{ action.label(highlightedFile) }}
+        <span
+          v-if="action.opensInNewWindow"
+          class="oc-invisible-sr"
+          v-text="$gettext('(Opens in new window)')"
+        />
       </component>
     </li>
   </ul>
diff --git a/packages/web-app-files/src/mixins/actions/fetch.js b/packages/web-app-files/src/mixins/actions/fetch.js
index ae86fefe6e6..4ef2e182d97 100644
--- a/packages/web-app-files/src/mixins/actions/fetch.js
+++ b/packages/web-app-files/src/mixins/actions/fetch.js
@@ -22,7 +22,8 @@ export default {
           },
           canBeDefault: true,
           componentType: 'oc-button',
-          class: 'oc-files-actions-sidebar-fetch-trigger'
+          class: 'oc-files-actions-sidebar-fetch-trigger',
+          opensInNewWindow: true
         }
       ]
     }

From 4ce0a87711d6d6f423714398689a338815519b19 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 12:12:25 +0200
Subject: [PATCH 16/19] Fix xpath selectors on file actions

---
 tests/acceptance/pageObjects/FilesPageElement/appSideBar.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
index b70ac75ae02..9399755f306 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
@@ -198,7 +198,8 @@ module.exports = {
       selector: '#oc-files-actions-sidebar'
     },
     actionPanelItems: {
-      selector: '//div[@class="oc-accordion-content"]//li/button',
+      selector:
+        '//div[@class="oc-accordion-content"]//li/button | //div[@class="oc-accordion-content"]//li/a',
       locateStrategy: 'xpath'
     }
   }

From 90b5efae3f2e22461761f3e546926b3a231f4c2b Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 12:48:10 +0200
Subject: [PATCH 17/19] Fix assertion string

---
 .../webUIFilesActionMenu/fileFolderActionMenu.feature    | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/tests/acceptance/features/webUIFilesActionMenu/fileFolderActionMenu.feature b/tests/acceptance/features/webUIFilesActionMenu/fileFolderActionMenu.feature
index 1785266bdc9..8a8acc0d0df 100644
--- a/tests/acceptance/features/webUIFilesActionMenu/fileFolderActionMenu.feature
+++ b/tests/acceptance/features/webUIFilesActionMenu/fileFolderActionMenu.feature
@@ -7,7 +7,7 @@ Background: prepare user and files
     Given user "Alice" has been created with default attributes
     And user "Alice" has logged in using the webUI
     And the user has browsed to the files page
-    
+
   Scenario: observe different actions menu options on selecting different file types or folder
     Given user "Alice" has uploaded file with content "pdf file" to "lorem.pdf"
     And the user has reloaded the current page of the webUI
@@ -26,13 +26,12 @@ Background: prepare user and files
     When the user picks the row of file "lorem.pdf" in the webUI
     Then the app-sidebar for file "lorem.pdf" should be visible on the webUI
     And only the following items with default items should be visible in the actions menu on the webUI
-      | items                     |
-      | open in browser           |
-      | download                  |
+      | items                                           |
+      | open in browser (opens in new window)           |
+      | download                                        |
     When the user picks the row of file "testavatar.png" in the webUI
     Then the app-sidebar for file "testavatar.png" should be visible on the webUI
     And only the following items with default items should be visible in the actions menu on the webUI
       | items                     |
       | open in mediaviewer       |
       | download                  |
-    
\ No newline at end of file

From 336eca8bb9d5bcbfefe38d3744a5c477ec303aa4 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 14:40:48 +0200
Subject: [PATCH 18/19] Fix xpath selection for actionPanelItems to get the
 tests running again

---
 .../src/components/Sidebar/ActionsAccordion.vue             | 4 +++-
 .../webUIFilesActionMenu/fileFolderActionMenu.feature       | 6 +++---
 tests/acceptance/pageObjects/FilesPageElement/appSideBar.js | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
index bb57cc735fa..8d6ad59815e 100644
--- a/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
+++ b/packages/web-app-files/src/components/Sidebar/ActionsAccordion.vue
@@ -8,7 +8,9 @@
         @click.stop="action.handler(highlightedFile, action.handlerData)"
       >
         <oc-icon :name="action.icon" size="medium" />
-        {{ action.label(highlightedFile) }}
+        <span class="oc-files-actions-sidebar-action-label">{{
+          action.label(highlightedFile)
+        }}</span>
         <span
           v-if="action.opensInNewWindow"
           class="oc-invisible-sr"
diff --git a/tests/acceptance/features/webUIFilesActionMenu/fileFolderActionMenu.feature b/tests/acceptance/features/webUIFilesActionMenu/fileFolderActionMenu.feature
index 8a8acc0d0df..55c76e4d5aa 100644
--- a/tests/acceptance/features/webUIFilesActionMenu/fileFolderActionMenu.feature
+++ b/tests/acceptance/features/webUIFilesActionMenu/fileFolderActionMenu.feature
@@ -26,9 +26,9 @@ Background: prepare user and files
     When the user picks the row of file "lorem.pdf" in the webUI
     Then the app-sidebar for file "lorem.pdf" should be visible on the webUI
     And only the following items with default items should be visible in the actions menu on the webUI
-      | items                                           |
-      | open in browser (opens in new window)           |
-      | download                                        |
+      | items                     |
+      | open in browser           |
+      | download                  |
     When the user picks the row of file "testavatar.png" in the webUI
     Then the app-sidebar for file "testavatar.png" should be visible on the webUI
     And only the following items with default items should be visible in the actions menu on the webUI
diff --git a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
index 9399755f306..d65ee055589 100644
--- a/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
+++ b/tests/acceptance/pageObjects/FilesPageElement/appSideBar.js
@@ -199,7 +199,7 @@ module.exports = {
     },
     actionPanelItems: {
       selector:
-        '//div[@class="oc-accordion-content"]//li/button | //div[@class="oc-accordion-content"]//li/a',
+        '//div[@class="oc-accordion-content"]//li/button/span[@class="oc-files-actions-sidebar-action-label"] | //div[@class="oc-accordion-content"]//li/a/span[@class="oc-files-actions-sidebar-action-label"]',
       locateStrategy: 'xpath'
     }
   }

From e9e93349777da046dc0322bedb2ae3b951cdd895 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Fri, 23 Apr 2021 15:14:42 +0200
Subject: [PATCH 19/19] Fix typo

---
 packages/web-app-files/src/components/Sidebar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/Sidebar.vue b/packages/web-app-files/src/components/Sidebar.vue
index f14e67d7c00..1890a94e03e 100644
--- a/packages/web-app-files/src/components/Sidebar.vue
+++ b/packages/web-app-files/src/components/Sidebar.vue
@@ -211,8 +211,8 @@ export default {
 
     onClickOutside(event) {
       /*
-       * We need to go for this opt-out solution because under circumstances a model will be rendered,
-       * for example if we click rename, clicking in this model would otherwise falsy close the sidebar.
+       * We need to go for this opt-out solution because under circumstances a modal will be rendered,
+       * for example if we click rename, clicking in this modal would otherwise falsy close the sidebar.
        */
 
       if (