🎨 Palette: Standardize :focus-visible outlines on content links and cards

.Jules/palette.md

@@ -1,5 +1,11 @@
 # Palette 🎨 - UX & Accessibility Journal
 
+## 2026-05-21 - Standardizing Focus-Visible Indicators & Card Radius Alignment
+
+**Learning:** Scoped link selectors inside markdown content containers (such as `.content :global(a)`) and list sections (`.earlier a`) must use `:focus-visible` with site-standard outline indicators (`outline: 2px solid var(--accent-regular)`, `outline-offset: 4px`, `border-radius: 0.25rem`) rather than raw `:focus` text-decoration properties. Replacing raw `:focus` prevents sticky focus underlines on mouse clicks, while adding explicit `:focus-visible` outlines and rounded corner alignment ensures a high-visibility, visually clean experience for keyboard navigation.
+
+**Action:** Added `:focus-visible` 2px accent outlines with 4px offset and 0.25rem border-radius for `.earlier a` in `work.astro`, `.proof-card` in `index.astro` and `roadmap.astro`, and scoped content links (`.content :global(a:focus-visible)`) in `biography.astro` and `work/[...slug].astro`.
+
 ## 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/pages/biography.astro

@@ -186,10 +186,16 @@ const schema = {
   }
 
   .content :global(a:hover),
-  .content :global(a:focus) {
+  .content :global(a:focus-visible) {
     text-decoration-color: currentColor;
   }
 
+  .content :global(a:focus-visible) {
+    outline: 2px solid var(--accent-regular);
+    outline-offset: 4px;
+    border-radius: 0.25rem;
+  }
+
   @media (min-width: 50em) {
     .content {
       padding-bottom: 0;

src/pages/index.astro

@@ -185,6 +185,7 @@ const schema = {
   .proof-card:focus-visible {
     outline: 2px solid var(--accent-regular);
     outline-offset: 4px;
+    border-radius: 0.25rem;
   }
 
   .proof-eyebrow {

src/pages/roadmap.astro

@@ -121,6 +121,7 @@ const schema = {
   .proof-card:focus-visible {
     outline: 2px solid var(--accent-regular);
     outline-offset: 4px;
+    border-radius: 0.25rem;
   }
 
   .proof-eyebrow {

src/pages/work.astro

@@ -228,6 +228,12 @@ const schema = {
     text-decoration-color: currentColor;
   }
 
+  .earlier a:focus-visible {
+    outline: 2px solid var(--accent-regular);
+    outline-offset: 4px;
+    border-radius: 0.25rem;
+  }
+
   .earlier p {
     margin: 0;
     font-size: var(--text-sm);

src/pages/work/[...slug].astro

@@ -325,13 +325,14 @@ const robots = entry?.id === 'lidkoping-stenhuggeri' ? 'noindex' : undefined;
   }
 
   .back-link:hover,
-  .back-link:focus,
+  .back-link:focus-visible,
   .content :global(a:hover),
-  .content :global(a:focus) {
+  .content :global(a:focus-visible) {
     text-decoration-color: currentColor;
   }
 
-  .back-link:focus-visible {
+  .back-link:focus-visible,
+  .content :global(a:focus-visible) {
     outline: 2px solid var(--accent-regular);
     outline-offset: 4px;
     border-radius: 0.25rem;