Merge pull request #5027 from owncloud/feat/left-sidebar-focus-trap

owncloud · May 7, 2021 · 8a2284f · 8a2284f
2 parents 64661b7 + 561c3b1
commit 8a2284f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/changelog/unreleased/enhancement-sidebar-focus-trap 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 focused, the focus stays within the sidebar.
+
+https://github.com/owncloud/web/pull/5027
diff --git 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-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" 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">

diff --git 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="isSidebarFixed && 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 {