feat: [A11y] Add a button to skip to web widget

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"

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;
+}

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">