From 4fc0d1e34dbe1c6c91fb82aaa5b33a31bbb8f2eb Mon Sep 17 00:00:00 2001
From: Sara Mansouri <smansouri@zendesk.com>
Date: Thu, 5 Oct 2023 18:06:56 +0200
Subject: [PATCH] feat: [A11y] Add a button to skip to web widget

---
 src/navigation.js    | 27 +++++++++++++++++++++++++++
 styles/_header.scss  | 29 +++++++++++++++++++++++++++++
 templates/header.hbs |  1 +
 3 files changed, 57 insertions(+)

diff --git a/src/navigation.js b/src/navigation.js
index ecbfab0c7..89d6d6198 100644
--- a/src/navigation.js
+++ b/src/navigation.js
@@ -30,6 +30,33 @@ window.addEventListener("DOMContentLoaded", () => {
     }
   });
 
+  // Hide Skip to Web Widget button if Web Widget is not present
+  const skipToWidgetButton = document.body.querySelector(".skip-to-web-widget");
+
+  let webWidgetLoadingCounter = 20;
+let handleSkipToWidgetButtonIntervalId;
+const handleSkipToWidgetButtonIntervalDuration = 500;
+
+skipToWidgetButton.style.display = "none";
+
+const handleSkipToWidgetButton = () => {
+  if ("zE" in window && window.zE("webWidget:get", "display") !== "hidden") {
+    skipToWidgetButton.addEventListener("click", () =>
+      window.zE(
+        window.zE.widget === "classic" ? "webWidget" : "messenger",
+        "open"
+      )
+    );
+    skipToWidgetButton.style.display = "inline-block";
+    clearInterval(handleSkipToWidgetButtonIntervalId);
+  }
+  if (webWidgetLoadingCounter-- <= 0) {
+    clearInterval(handleSkipToWidgetButtonIntervalId);
+  }
+}
+
+handleSkipToWidgetButtonIntervalId = setInterval(handleSkipToWidgetButton, handleSkipToWidgetButtonIntervalDuration);
+
   // Toggles expanded aria to collapsible elements
   const collapsible = document.querySelectorAll(
     ".collapsible-nav, .collapsible-sidebar"
diff --git a/styles/_header.scss b/styles/_header.scss
index 9ba771a49..e7cc94c32 100644
--- a/styles/_header.scss
+++ b/styles/_header.scss
@@ -259,3 +259,32 @@ $header-height: 71px;
 #zd-modal-container ~ .skip-navigation {
   display: none;
 }
+
+.skip-to-web-widget {
+  align-items: center;
+  background-color: black;
+  color: white;
+  display: flex;
+  font-size: 14px;
+  justify-content: center;
+  left: -919px;
+  margin: 20px;
+  padding: 20px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  z-index: -999;
+}
+
+.skip-to-web-widget:focus, .skip-to-web-widget:active {
+  left: auto;
+  overflow: auto;
+  text-align: center;
+  text-decoration: none;
+  top: auto;
+  z-index: 999;
+}
+[dir=rtl] .skip-to-web-widget {
+  left: initial;
+  right: -919px;
+}
diff --git a/templates/header.hbs b/templates/header.hbs
index ae071147a..41b80999d 100644
--- a/templates/header.hbs
+++ b/templates/header.hbs
@@ -1,4 +1,5 @@
 <a class="skip-navigation" tabindex="1" href="#main-content">{{t 'skip_navigation' }}</a>
+<a class="skip-to-web-widget" tabindex="2" href="#launcher" >{{t 'skip_to_chat'}}</a>
 
 <header class="header">
   <div class="logo">