From 528d3c87913cf504cbc5e1fe15f17390c585f9fb Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Fri, 23 Apr 2021 14:00:21 +0200
Subject: [PATCH 1/5] feat: move location picker hint under breadcrumbs

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

diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 0b2361b7672..09b33e6993d 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -2,8 +2,8 @@
   <div id="files-location-picker" class="uk-flex uk-height-1-1">
     <div tabindex="-1" class="files-list-wrapper uk-width-expand">
       <div id="files-app-bar" class="oc-p-s">
-        <h1 class="location-picker-selection-info oc-mr-s oc-mb" v-text="title" />
-        <p class="oc-text-muted" v-text="currentHint" />
+        <h1 class="location-picker-selection-info oc-mb" v-text="title" />
+        <p class="oc-text-muted uk-text-meta uk-text-italic" v-text="currentHint" />
         <hr class="oc-mt-rm" />
         <oc-breadcrumb :items="breadcrumbs" class="oc-mb-s" />
         <oc-grid gutter="small" flex class="uk-flex-middle">

From 085ebda2c7813f210698238697daaaabba9fa3d2 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Tue, 27 Apr 2021 11:00:04 +0200
Subject: [PATCH 2/5] feat: add focus trap to left sidebar

---
 .../unreleased/enhancement-sidebar-focus-trap |  6 +++
 package.json                                  |  2 +
 packages/web-runtime/src/App.vue              | 37 ++++++++++---------
 3 files changed, 28 insertions(+), 17 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-sidebar-focus-trap

diff --git a/changelog/unreleased/enhancement-sidebar-focus-trap b/changelog/unreleased/enhancement-sidebar-focus-trap
new file mode 100644
index 00000000000..9e77b066d44
--- /dev/null
+++ b/changelog/unreleased/enhancement-sidebar-focus-trap
@@ -0,0 +1,6 @@
+Enhancement: Add focus trap to left sidebar
+
+We've added a focus trap to the left sidebar on smaller resolutions when it's collapsible.
+If the sidebar is opened and focus, the focus stays within the sidebar.
+
+https://github.com/owncloud/web/pull/5027
\ No newline at end of file
diff --git a/package.json b/package.json
index 03fefd1ee28..bba73967669 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,8 @@
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
     "eslint-plugin-vuejs-accessibility": "^0.6.1",
+    "focus-trap": "^6.4.0",
+    "focus-trap-vue": "^1.1.1",
     "fs-extra": "^9.0.1",
     "jest": "^26.6.3",
     "jest-axe": "^4.1.0",
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index 148e0e2199d..a539e167729 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -19,22 +19,23 @@
       </template>
       <div v-else key="core-content" class="uk-flex uk-flex-stretch">
         <transition :name="appNavigationAnimation">
-          <oc-sidebar
-            v-if="isSidebarVisible"
-            v-touch:swipe.left="handleNavSwipe"
-            class="oc-app-navigation"
-            :logo-img="logoImage"
-            :logo-alt="sidebarLogoAlt"
-            :nav-items="sidebarNavItems"
-            :class="sidebarClasses"
-            :fixed="isSidebarFixed"
-            :accessible-label="accessibleLabel"
-            @close="toggleAppNavigationVisibility"
-          >
-            <template v-if="sidebar.sidebarFooterContentComponent" v-slot:footer>
-              <component :is="sidebar.sidebarFooterContentComponent" />
-            </template>
-          </oc-sidebar>
+          <focus-trap v-if="isSidebarVisible" :active="windowWidth < 1200 && appNavigationVisible">
+            <oc-sidebar
+              v-touch:swipe.left="handleNavSwipe"
+              class="oc-app-navigation"
+              :logo-img="logoImage"
+              :logo-alt="sidebarLogoAlt"
+              :nav-items="sidebarNavItems"
+              :class="sidebarClasses"
+              :fixed="isSidebarFixed"
+              :accessible-label="accessibleLabel"
+              @close="toggleAppNavigationVisibility"
+            >
+              <template v-if="sidebar.sidebarFooterContentComponent" v-slot:footer>
+                <component :is="sidebar.sidebarFooterContentComponent" />
+              </template>
+            </oc-sidebar>
+          </focus-trap>
         </transition>
         <div class="uk-width-expand web-content-container">
           <top-bar
@@ -92,12 +93,14 @@ import MessageBar from './components/MessageBar.vue'
 import SkipTo from './components/SkipTo.vue'
 import moment from 'moment'
 import 'moment/min/locales'
+import { FocusTrap } from 'focus-trap-vue'
 
 export default {
   components: {
     MessageBar,
     TopBar,
-    SkipTo
+    SkipTo,
+    FocusTrap
   },
   data() {
     return {

From 00d61f6d74705321488123e326d6aa1f730ea1d1 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lhirt@owncloud.com>
Date: Tue, 27 Apr 2021 11:42:00 +0200
Subject: [PATCH 3/5] Update
 changelog/unreleased/enhancement-sidebar-focus-trap

Co-authored-by: Pascal Wengerter <pwengerter@owncloud.com>
---
 changelog/unreleased/enhancement-sidebar-focus-trap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/changelog/unreleased/enhancement-sidebar-focus-trap b/changelog/unreleased/enhancement-sidebar-focus-trap
index 9e77b066d44..eb3b5392d66 100644
--- a/changelog/unreleased/enhancement-sidebar-focus-trap
+++ b/changelog/unreleased/enhancement-sidebar-focus-trap
@@ -1,6 +1,6 @@
 Enhancement: Add focus trap to left sidebar
 
 We've added a focus trap to the left sidebar on smaller resolutions when it's collapsible.
-If the sidebar is opened and focus, the focus stays within the sidebar.
+If the sidebar is opened and focused, the focus stays within the sidebar.
 
-https://github.com/owncloud/web/pull/5027
\ No newline at end of file
+https://github.com/owncloud/web/pull/5027

From b9ad9f42f65519a0a8c0fa2bb6ef18d2c4f5238d Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Tue, 4 May 2021 13:47:03 +0200
Subject: [PATCH 4/5] feat: enable focus trap only if the sidebar is an overlay

---
 packages/web-runtime/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index a539e167729..0e608b86a85 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -19,7 +19,7 @@
       </template>
       <div v-else key="core-content" class="uk-flex uk-flex-stretch">
         <transition :name="appNavigationAnimation">
-          <focus-trap v-if="isSidebarVisible" :active="windowWidth < 1200 && appNavigationVisible">
+          <focus-trap v-if="isSidebarVisible" :active="isSidebarFixed && appNavigationVisible">
             <oc-sidebar
               v-touch:swipe.left="handleNavSwipe"
               class="oc-app-navigation"

From 561c3b1b76a9606fa931575352e867fcae29aeb5 Mon Sep 17 00:00:00 2001
From: Lukas Hirt <lukashirt@mail.com>
Date: Fri, 7 May 2021 14:08:11 +0200
Subject: [PATCH 5/5] feat: remove italic font style

---
 packages/web-app-files/src/views/LocationPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 09b33e6993d..c3f565c7a82 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/packages/web-app-files/src/views/LocationPicker.vue
@@ -3,7 +3,7 @@
     <div tabindex="-1" class="files-list-wrapper uk-width-expand">
       <div id="files-app-bar" class="oc-p-s">
         <h1 class="location-picker-selection-info oc-mb" v-text="title" />
-        <p class="oc-text-muted uk-text-meta uk-text-italic" v-text="currentHint" />
+        <p class="oc-text-muted uk-text-meta" v-text="currentHint" />
         <hr class="oc-mt-rm" />
         <oc-breadcrumb :items="breadcrumbs" class="oc-mb-s" />
         <oc-grid gutter="small" flex class="uk-flex-middle">