feat: Using @vue-a11y/focus-loop to trap focus in social popup

ktquez · Jul 30, 2020 · f2dbd51 · f2dbd51
1 parent bdf76b0
commit f2dbd51
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -80,6 +80,6 @@
     "vuepress-theme-default-vue-a11y": "^0.1.15"
   },
   "dependencies": {
-    "vue-focus-lock": "^1.4.0"
+    "@vue-a11y/focus-loop": "^0.1.0"
   }
 }
diff --git a/rollup.config.prod.js b/rollup.config.prod.js
@@ -7,7 +7,7 @@ import vue from 'rollup-plugin-vue'
 export default commandLineArgs => {
   return {
     input: 'src/index.js',
-    external: ['vue-focus-lock'],
+    external: ['@vue-a11y/focus-loop'],
     plugins: [
       commonjs(),
       replace({
@@ -30,7 +30,7 @@ export default commandLineArgs => {
       name: 'VueSocialChat',
       exports: 'named',
       globals: {
-        'vue-focus-lock': 'FocusLock'
+        '@vue-a11y/focus-loop': 'FocusLoop'
       }
     }
   }

diff --git a/src/SocialChat.vue b/src/SocialChat.vue
@@ -1,5 +1,5 @@
 <template>
-  <FocusLock :disabled="!show">
+  <FocusLoop :disabled="!show">
     <div
       ref="vscPopup"
       class="vsc-popup"
@@ -64,20 +64,20 @@
         >
       </button>
     </div>
-  </FocusLock>
+  </FocusLoop>
 </template>
 
 <script>
 import ListChat from './ListChat.vue'
-import FocusLock from 'vue-focus-lock'
+import { FocusLoop } from '@vue-a11y/focus-loop'
 import { URL_ASSETS, HREF_BY_APP } from './constants'
 
 export default {
   name: 'VueSocialChat',
 
   components: {
     ListChat,
-    FocusLock
+    FocusLoop
   },
 
   props: {