From 249b1ba39f512bc62860f66a5cf87d534e15d7c7 Mon Sep 17 00:00:00 2001
From: mhe <mail@marcus-herrmann.com>
Date: Mon, 30 Sep 2019 15:00:23 +0200
Subject: [PATCH] Use inert to prevent hidden off canvas nav to be focussable,
 #1647

Add focus management regarding off canvas main nav, #1647
---
 package.json               |  4 ++++
 src/Phoenix.vue            |  1 +
 src/components/Menu.vue    | 18 ++++++++++++++++--
 src/components/Top-Bar.vue | 14 +++++++++++++-
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index edcfe392024..5ae52acdb9b 100644
--- a/package.json
+++ b/package.json
@@ -119,5 +119,9 @@
       "yarn lint --fix",
       "git add"
     ]
+  },
+  "dependencies": {
+    "deepmerge": "^4.0.0",
+    "inert-polyfill": "^0.2.5"
   }
 }
diff --git a/src/Phoenix.vue b/src/Phoenix.vue
index 325b7ee4f94..21dbad447ea 100644
--- a/src/Phoenix.vue
+++ b/src/Phoenix.vue
@@ -17,6 +17,7 @@
   </div>
 </template>
 <script>
+import 'inert-polyfill'
 import { mapGetters, mapState, mapActions } from 'vuex'
 import TopBar from './components/Top-Bar.vue'
 import Menu from './components/Menu.vue'
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index fbf78ce7035..023a3ed014a 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -1,7 +1,6 @@
 <template>
-  <oc-application-menu name="coreMenu" v-model="sidebarIsVisible" @close="sidebarIsVisible = false">
+  <oc-application-menu name="coreMenu" v-model="sidebarIsVisible" :inert="!sidebarIsVisible" @close="sidebarIsVisible = false" ref="sidebar">
     <oc-sidebar-nav-item v-for="(n, nid) in nav" :active="isActive(n)" :key="nid" :icon="n.iconMaterial" :target="n.route ? n.route.path : null" @click="openItem(n.url)">{{ translateMenu(n) }}</oc-sidebar-nav-item>
-
     <oc-sidebar-nav-item icon="account_circle" target="/account" :isolate="true">
       <translate>Account</translate>
     </oc-sidebar-nav-item>
@@ -26,6 +25,11 @@ export default {
   watch: {
     $route () {
       this.toggleSidebar(false)
+    },
+    sidebarIsVisible (val) {
+      if (val) {
+        this.focusFirstLink()
+      }
     }
   },
   computed: {
@@ -76,6 +80,16 @@ export default {
     },
     isActive (navItem) {
       return navItem.route.name === this.$route.name
+    },
+    focusFirstLink () {
+      /*
+      * Delay for two reasons:
+      * - for screen readers Virtual buffer
+      * - to outsmart uikit's focus management
+      */
+      setTimeout(() => {
+        this.$refs.sidebar.$el.querySelector('a:first-of-type').focus()
+      }, 500)
     }
   }
 }
diff --git a/src/components/Top-Bar.vue b/src/components/Top-Bar.vue
index 81fceb6d005..5cd57a2d5dd 100644
--- a/src/components/Top-Bar.vue
+++ b/src/components/Top-Bar.vue
@@ -1,7 +1,7 @@
 <template>
   <oc-navbar id="oc-topbar" tag="header" class="oc-topbar">
     <oc-navbar-item position="left">
-      <oc-button icon="menu" variation="primary" class="oc-topbar-menu-burger uk-height-1-1" aria-label="Menu" @click="toggleSidebar(!isSidebarVisible)" v-if="!publicPage()">
+      <oc-button icon="menu" variation="primary" class="oc-topbar-menu-burger uk-height-1-1" aria-label="Menu" @click="toggleSidebar(!isSidebarVisible)" v-if="!publicPage()" ref="menubutton">
         <span class="oc-topbar-menu-burger-label" v-translate>Menu</span>
       </oc-button>
     </oc-navbar-item>
@@ -66,6 +66,18 @@ export default {
     if (this.intervalId) {
       clearInterval(this.intervalId)
     }
+  },
+  watch: {
+    isSidebarVisible: function (val) {
+      if (!val) {
+        /*
+        * Delay for screen readers Virtual buffers
+        */
+        setTimeout(() => {
+          this.$refs.menubutton.$el.focus()
+        }, 500)
+      }
+    }
   }
 }
 </script>