🎨 Palette: External links security & focus state enhancement

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

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>

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>

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>