feat: add focus trap to left sidebar

owncloud · May 7, 2021 · 085ebda · 085ebda
1 parent 528d3c8
commit 085ebda
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 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 focus, 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-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 {