From 7e802d3f0daf9fd91010909daa1c12b4402d2f1a Mon Sep 17 00:00:00 2001
From: Peter Joles <jolzee@gmail.com>
Date: Thu, 5 Mar 2020 14:18:56 -0800
Subject: [PATCH] Get chat button to focus when embedded

---
 public/static/embed-leopard.js |  6 +++
 src/App.vue                    | 84 ++++++++++++++++++++++++++++++----
 2 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/public/static/embed-leopard.js b/public/static/embed-leopard.js
index f25fbb34..7d7c6abd 100644
--- a/public/static/embed-leopard.js
+++ b/public/static/embed-leopard.js
@@ -276,6 +276,12 @@ function receiveLeopardMessage(event) {
           node.className = "teneo-chat-button-widget";
           node.style.display = "block";
           isLeopardAnimating = false;
+          setTimeout(function addFocusToButton() {
+            var leopardFrame = document.getElementById('teneo-chat-widget');
+            var leopardFrameInnerButton = leopardFrame.contentDocument.getElementById('leopard-embed-open-close-button');
+            leopardFrame.focus();
+            leopardFrameInnerButton.focus();
+          }, 300);
         }, 800);
       });
     } else if (event.data === "hideLeopard" && !isLeopardAnimating) {
diff --git a/src/App.vue b/src/App.vue
index 982bb8ca..6b665139 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,12 @@
 <template>
   <div>
     <v-app :dark="$vuetify.theme.dark" v-if="showButtonOnly" class="application-button">
-      <div id="chat-open-close-button-embed" @click="openEmbedButton">
+      <div id="chat-open-close-button-embed">
         <v-fab-transition>
           <v-btn
             v-show="showChatButton"
             id="leopard-embed-open-close-button"
+            @click="openEmbedButton"
             fab
             dark
             color="primary"
@@ -1234,6 +1235,68 @@ code.language-json {
   color: var(--leopard-chat-button-color, "#FFFFFF") !important;
 }
 
+/* Edge Styling */
+@supports (-ms-ime-align: auto) {
+  .leopard-open-close-button.v-btn--fab:hover {
+    color: rgb(173, 170, 170) !important;
+  }
+
+  #leopard-chat-toolbar-title:focus,
+  div.v-input__slot:focus,
+  .v-btn--fab:focus,
+  button:focus,
+  a:focus,
+  div.v-list-item:focus,
+  div.chat-card:focus,
+  .leopard-open-close-button.v-btn--fab:focus,
+  .v-input__icon--clear:focus {
+    outline: 0 !important;
+    -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.421) !important;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.421) !important;
+  }
+
+  a.leopard-img:focus {
+    display: flex;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    outline: 0;
+    background: rgba(255, 255, 255, 0.19);
+    -webkit-box-shadow: 0 0 0 3px rgb(76, 77, 108) !important;
+    box-shadow: 0 0 0 3px rgb(76, 77, 108) !important;
+  }
+
+  #leopard-chat-toolbar-title:focus {
+    padding: 5px !important;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    outline: 0;
+    background: rgba(255, 255, 255, 0.19);
+    box-shadow: 0 0 0 3px red !important;
+  }
+
+  .pulse::before {
+    display: block;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: rgba(116, 116, 116, 0.069) !important;
+    content: "";
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
+    -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+    animation: pulse-animation 4s cubic-bezier(0.24, 0, 0.38, 1) infinite;
+  }
+}
+
+/* IE 11 styling */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .leopard-open-close-button.v-btn--fab:hover {
     color: rgb(173, 170, 170) !important;
@@ -1241,15 +1304,16 @@ code.language-json {
 
   #leopard-chat-toolbar-title:focus,
   div.v-input__slot:focus,
-  .v-btn--fab:focus-within:before,
-  button:focus-within:focus,
-  a:focus-within,
-  div.v-list-item:focus-within,
-  div.chat-card:focus-within,
-  .v-input__icon--clear:focus-within {
+  .v-btn--fab:focus,
+  button:focus,
+  a:focus,
+  div.v-list-item:focus,
+  div.chat-card:focus,
+  .leopard-open-close-button.v-btn--fab:focus,
+  .v-input__icon--clear:focus {
     outline: 0 !important;
-    -webkit-box-shadow: 0 0 0 3px black !important;
-    box-shadow: 0 0 0 3px black !important;
+    -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.421) !important;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.421) !important;
   }
 
   a.leopard-img:focus {
@@ -1282,7 +1346,7 @@ code.language-json {
     width: 100%;
     height: 100%;
     border-radius: inherit;
-    background-color: rgb(139, 139, 214) !important;
+    background-color: rgba(116, 116, 116, 0.069) !important;
     content: "";
     -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
     transition: opacity 0.3s, -webkit-transform 0.3s;