diff --git a/.Jules/palette.md b/.Jules/palette.md index 2d107a4c..6aa1f777 100644 --- a/.Jules/palette.md +++ b/.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. diff --git a/src/pages/biography.astro b/src/pages/biography.astro index 0004f09a..6c638d32 100644 --- a/src/pages/biography.astro +++ b/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; diff --git a/src/pages/index.astro b/src/pages/index.astro index 5b263497..c6288052 100644 --- a/src/pages/index.astro +++ b/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 { diff --git a/src/pages/roadmap.astro b/src/pages/roadmap.astro index 6be9af1a..ed154172 100644 --- a/src/pages/roadmap.astro +++ b/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 { diff --git a/src/pages/work.astro b/src/pages/work.astro index 4b1cb93f..3a2aaee1 100644 --- a/src/pages/work.astro +++ b/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); diff --git a/src/pages/work/[...slug].astro b/src/pages/work/[...slug].astro index 772f203c..29423aea 100644 --- a/src/pages/work/[...slug].astro +++ b/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;