Update external links attributes to open in a new tab (#12980)

source/js/common/template-js-handles/external-links.js

@@ -0,0 +1,28 @@
+import { set } from "react-ga";
+
+/**
+ * ExternalLinks object for handling external links.
+ */
+const ExternalLinks = {
+  /**
+   * Initializes the ExternalLinks object.
+   */
+  init() {
+    this.configure();
+  },
+  /**
+   * Set up the event handlers for the external links.
+   */
+  configure() {
+    document
+      .querySelectorAll(
+        `a[href^="http"]:not([href*="${window.location.host}"]):not([href^="mailto:"])`
+      )
+      .forEach((link) => {
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+      });
+  },
+};
+
+export default ExternalLinks;

source/js/main.js

@@ -43,6 +43,7 @@ import { initYouTubeRegretsRecommendationsPieChart } from "./foundation/pages/yo
 import { initYoutubeRegretsCarousel } from "./foundation/pages/youtube-regrets/carousel";
 import { initYoutubeRegretsLocomotiveScroll } from "./foundation/pages/youtube-regrets/locomotive-scroll";
 import SiteNav from "./common/template-js-handles/site-nav.js";
+import ExternalLinks from "./common/template-js-handles/external-links.js";
 
 // Initializing component a11y browser console logging
 if (process.env.NODE_ENV === "development") {
@@ -67,6 +68,7 @@ let main = {
     Dropdowns.init();
     FoundationCarousels.init();
     SiteNav.init();
+    ExternalLinks.init();
 
     this.fetchEnv((envData) => {
       env = envData;