From f5d46be9836abf693ce5147931016c18124fc19f Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 13 May 2024 15:28:11 -0400
Subject: [PATCH] Modal Enter button

Remove focus trap
Add onEnter event for keypress.enter
- preventDefault
- call main button click event

Cleaned up modal.vue to un-red it
---
 package-lock.json                        | 24 ----------------
 package.json                             |  4 +--
 src/digital-components/modal/modal.vue   | 36 +++++++++++-------------
 src/main.js                              |  2 --
 src/styles/ux-variables-svg-strings.scss |  1 +
 5 files changed, 19 insertions(+), 48 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8141346d..109308ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,6 @@
         "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",
@@ -9022,23 +9020,6 @@
       "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",
@@ -17137,11 +17118,6 @@
       "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",
diff --git a/package.json b/package.json
index 0e21726b..43a0013f 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,6 @@
     "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",
@@ -63,4 +61,4 @@
     "vitest": "^0.33.0",
     "volar-service-vetur": "latest"
   }
-}
+}
\ No newline at end of file
diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index ac5e8261..9b90f438 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -1,14 +1,12 @@
 <template>
     <!-- Modal -->
-    <focus-trap
-v-model:active="isOpen"
-:fallbackFocus="getFocusFallback">
     <div
         :id="modalId"
         class="modal fade modal-component"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
         aria-hidden="true"
+        @keypress.enter="onEnter"
         v-on="{
             'hidden.bs.modal': onModalClosed,
             'shown.bs.modal': onModalOpened
@@ -34,6 +32,7 @@ v-model:active="isOpen"
                 </div>
                 <div class="modal-footer px-5 py-4">
                     <modalButtonMain
+                        id="modalbtn"
                         ref="modalButtonMain"
                         isPrimary
                         class="w-100"
@@ -48,7 +47,6 @@ v-model:active="isOpen"
             </div>
         </div>
     </div>
-    </focus-trap>
 </template>
 
 <script>
@@ -83,18 +81,15 @@ export default {
         const { meta, validate, resetForm } = useForm();
 
         // TODO: Correct Duplicate key 'modalId' issue.
+        // Probably just rename the prop. -br
         return {
+            // eslint-disable-next-line vue/no-dupe-keys
             modalId,
             meta,
             validate,
             resetForm
         };
     },
-    data() {
-        return {
-            isOpen: false
-        };
-    },
     computed: {
         isFooterButtonDisabled() {
             if (!this.meta.touched) {
@@ -112,6 +107,12 @@ export default {
                 this.resetButtonStyle();
             }
         },
+        async onEnter(e) {
+            e.preventDefault();
+            document.getElementById('modalbtn')?.focus();
+            this.$refs.modalButtonMain.clicked();
+            document.getElementById(this.modalId)?.focus();
+        },
         resetButtonStyle() {
             this.$refs.modalButtonMain?.resetButtonStyle();
         },
@@ -125,23 +126,20 @@ export default {
         openModal() {
             const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
             modal?.show();
-            this.isOpen = true;
             this.$emit('isModalOpened', true);
         },
         closeModal() {
             const modal = Modal.getInstance(document.getElementById(this.modalId));
             modal?.hide();
-            this.isOpen = false;
             this.$emit('isModalOpened', false);
-        },
-        getFocusFallback() {
-            return this.$refs.modalButtonMain;
         }
     }
 };
 </script>
 
 <style lang="scss">
+@import "@/styles/ux-variables-svg-strings.scss";
+
 .modal {
     top: auto;
     bottom: 0;
@@ -157,14 +155,14 @@ export default {
             position: absolute;
             right: 1rem;
             top: 1rem;
-            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+            background-image: url($svg-modal-header-button-close);
             opacity: 1;
         }
 
         .modal-title {
             font-weight: 500;
             font-size: 1.25rem;
-            line-height: 32px;
+            line-height: 2rem;
             color: $black;
         }
     }
@@ -178,10 +176,10 @@ export default {
     }
     &.modal-component {
         .modal-dialog {
-            max-width: 767px;
+            max-width: 47.9375rem;
             margin: 0 auto;
             @include media-breakpoint-up(md) {
-                width: 376px;
+                width: 23.5rem;
                 position: absolute;
                 top: 0;
                 right: 0;
@@ -189,7 +187,7 @@ export default {
             }
             .modal-content {
                 margin: 1.5rem auto 0 auto;
-                box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
+                box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
                 border-radius: 1.5rem 1.5rem 0 0;
                 @include media-breakpoint-up(md) {
                     box-shadow: none;
diff --git a/src/main.js b/src/main.js
index 91fe4a64..fa8cc769 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,7 +10,6 @@ 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';
 
@@ -36,7 +35,6 @@ vueApp.mixin(baseMixin);
 vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);
 
-vueApp.component('FocusTrap', FocusTrap);
 vueApp.mount('#app');
 
 // define global rules
diff --git a/src/styles/ux-variables-svg-strings.scss b/src/styles/ux-variables-svg-strings.scss
index fba802db..5ed015b6 100644
--- a/src/styles/ux-variables-svg-strings.scss
+++ b/src/styles/ux-variables-svg-strings.scss
@@ -3,6 +3,7 @@ $svg-date-picker-nav-back-button: "data:image/svg+xml,%3Csvg width='7' height='1
 $svg-date-picker-forward-button: "data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A";
 $svg-drop-off-alert: "data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A";
 $svg-loading-modal-image: "data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+$svg-modal-header-button-close: "data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A";
 $svg-payment-method-review-toggle: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e";
 $svg-search-icon: "data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%231574A1'/%3E%3C/svg%3E%0A";
 $svg-select-icon: "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e";