From b50dddbd2bc8c8c3c98da56f1143867512b54b39 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 23 Aug 2026 02:31:28 +0000
Subject: [PATCH] Palette: External links security & focus state enhancement

Enhance external social link security and context preservation by adding
target="_blank" and rel="noopener noreferrer" in Nav.astro and Footer.astro.
Improve focus-visible styling for screen-reader skip-link in BaseLayout.astro.

Co-authored-by: alehar9320 <5390430+alehar9320@users.noreply.github.com>
---
 .Jules/palette.md            |  6 ++++++
 src/components/Footer.astro  | 14 +++++++++++---
 src/components/Nav.astro     | 18 ++++++++++++++++--
 src/layouts/BaseLayout.astro |  5 ++++-
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index d951d9f5..c370cb48 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -1,5 +1,11 @@
 # Palette 🎨 - UX & Accessibility Journal
 
+## 2026-05-20 - Preserving Session Continuity & High-Visibility Skip Link Focus
+
+**Learning:** Navigation links to third-party social or external platforms in site headers and footers should open in new tabs (`target="_blank"` with `rel="noopener noreferrer"`) so users do not lose their active browsing session, scroll position, or digital twin chat state when exploring external profiles. Furthermore, the accessibility skip-to-content link requires explicit `:focus-visible` styling with a high-contrast focus ring (`outline: 2px solid var(--accent-regular)` with `4px` offset) to guarantee clear visual feedback when keyboard users initiate navigation.
+
+**Action:** Added `target="_blank"` and `rel="noopener noreferrer"` attributes to social links in `Nav.astro` and `Footer.astro`. Enhanced `BaseLayout.astro` skip-to-content CSS with `:focus-visible` selector and accent outline rules.
+
 ## 2026-05-17 - Enhancing Content Selection and Standardizing Focus Spatiality
 
 **Learning:** Using `user-select: none` on informational badges (like `Pill`) creates unnecessary friction for users trying to copy text for reference. Additionally, consistent `outline-offset: 4px` across all interactive elements (including theme toggles and cards) reinforces a predictable spatial model for keyboard users. Adding `target="_blank"` with `rel="noopener noreferrer"` to external informational links (like the Astro framework link in the footer) ensures a non-disruptive navigation experience that preserves the user's session.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 5729cd9e..6b33696f 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -29,9 +29,17 @@ const currentYear = new Date().getFullYear();
     </div>
   </div>
   <p class="socials">
-    <a href="https://www.linkedin.com/in/alehar/"> LinkedIn</a>
-    <a href="https://blog.ifs.com/author/alexander-harenstam/"> IFS Blog</a>
-    <a href="https://github.com/alehar9320"> GitHub</a>
+    <a href="https://www.linkedin.com/in/alehar/" target="_blank" rel="noopener noreferrer">
+      LinkedIn</a
+    >
+    <a
+      href="https://blog.ifs.com/author/alexander-harenstam/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      IFS Blog</a
+    >
+    <a href="https://github.com/alehar9320" target="_blank" rel="noopener noreferrer"> GitHub</a>
   </p>
 </footer>
 <div class="visit-panel" id="visit-glance-panel" hidden>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 6a6945a7..f4b63602 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -90,7 +90,14 @@ const isCurrentPage = (href: string) => {
       <div class="socials">
         {
           iconLinks.map(({ href, icon, label, event, surface }) => (
-            <a href={href} class="social" data-hire-event={event} data-hire-surface={surface}>
+            <a
+              href={href}
+              class="social"
+              target="_blank"
+              rel="noopener noreferrer"
+              data-hire-event={event}
+              data-hire-surface={surface}
+            >
               <span class="sr-only">{label}</span>
               <Icon icon={icon} />
             </a>
@@ -121,7 +128,14 @@ const isCurrentPage = (href: string) => {
       <div class="socials">
         {
           iconLinks.map(({ href, icon, label, event, surface }) => (
-            <a href={href} class="social" data-hire-event={event} data-hire-surface={surface}>
+            <a
+              href={href}
+              class="social"
+              target="_blank"
+              rel="noopener noreferrer"
+              data-hire-event={event}
+              data-hire-surface={surface}
+            >
               <span class="sr-only">{label}</span>
               <Icon icon={icon} />
             </a>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 97f4632e..f152c2b5 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -255,7 +255,8 @@ const { title, description, ogTitle, shareUrl, canonicalUrl, robots } = Astro.pr
         white-space: nowrap;
       }
 
-      .sr-only.focus-visible:focus {
+      .sr-only.focus-visible:focus,
+      .sr-only.focus-visible:focus-visible {
         clip: auto;
         height: auto;
         margin: auto;
@@ -280,6 +281,8 @@ const { title, description, ogTitle, shareUrl, canonicalUrl, robots } = Astro.pr
         font-family: var(--font-brand);
         font-weight: 500;
         box-shadow: var(--shadow-lg);
+        outline: 2px solid var(--accent-regular);
+        outline-offset: 4px;
       }
     </style>
   </body>