SSR-1177 Fix items behind modal being selectable

package-lock.json

@@ -11,6 +11,8 @@
         "axios": "^1.4.0",
         "axios-retry": "^3.5.0",
         "bootstrap": "^5.3",
+        "focus-trap": "^7.5.4",
+        "focus-trap-vue": "^4.0.3",
         "iframe-resizer": "^4.3.9",
         "maska": "^2.1.1",
         "pinia": "^2.1.4",
@@ -9020,6 +9022,23 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/focus-trap": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
+      "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
+    "node_modules/focus-trap-vue": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/focus-trap-vue/-/focus-trap-vue-4.0.3.tgz",
+      "integrity": "sha512-cIX5rybkCAlNZ4IHYJ3nCFIsipDDljJHHjtTO2IgYWkVYg7X9ipUVdab3HzYp88kmHgMwjcB71LYnXRRsF6ZqQ==",
+      "peerDependencies": {
+        "focus-trap": "^7.0.0",
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
@@ -17118,6 +17137,11 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

package.json

@@ -18,6 +18,8 @@
     "axios": "^1.4.0",
     "axios-retry": "^3.5.0",
     "bootstrap": "^5.3",
+    "focus-trap": "^7.5.4",
+    "focus-trap-vue": "^4.0.3",
     "iframe-resizer": "^4.3.9",
     "maska": "^2.1.1",
     "pinia": "^2.1.4",

src/digital-components/modal/modal.vue

@@ -1,5 +1,6 @@
 <template>
     <!-- Modal -->
+    <focus-trap v-model:active="isOpen">
     <div
         :id="modalId"
         class="modal fade modal-component"
@@ -45,6 +46,7 @@
             </div>
         </div>
     </div>
+    </focus-trap>
 </template>
 
 <script>
@@ -86,6 +88,11 @@ export default {
             resetForm
         };
     },
+    data() {
+        return {
+            isOpen: false
+        };
+    },
     computed: {
         isFooterButtonDisabled() {
             if (!this.meta.touched) {
@@ -118,6 +125,7 @@ export default {
                 document.getElementById(this.modalId)
             );
             modal?.show();
+            this.isOpen = true;
             this.$emit('isModalOpened', true);
         },
         closeModal() {
@@ -125,6 +133,7 @@ export default {
                 document.getElementById(this.modalId)
             );
             modal?.hide();
+            this.isOpen = false;
             this.$emit('isModalOpened', false);
         }
     }

src/main.js

@@ -10,6 +10,7 @@ import LoadScript from 'vue-plugin-load-script';
 import analyticsMixin from '@/mixins/analytics-mixin';
 import experimentMixin from '@/mixins/experiment-mixin';
 import defineGlobalRules from '@/helpers/global-rule-definer';
+import { FocusTrap } from 'focus-trap-vue';
 import router from './router';
 import App from './App.vue';
 
@@ -35,6 +36,7 @@ vueApp.mixin(baseMixin);
 vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);
 
+vueApp.component('FocusTrap', FocusTrap);
 vueApp.mount('#app');
 
 // define global rules