From 2cdcf5a5b31546541088707ac537ad70c8d09e65 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Mon, 22 Jun 2026 00:04:50 -0400 Subject: [PATCH 01/11] style: replace transition: all with explicit properties Scope the menu underline and markdown link transitions to the exact properties that animate, per the web interface guidelines (never use `transition: all`). No visual change. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/Home/styles.tsx | 3 ++- src/components/Markdown/styles.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Home/styles.tsx b/src/components/Home/styles.tsx index b6d48aa0..6235a6ee 100644 --- a/src/components/Home/styles.tsx +++ b/src/components/Home/styles.tsx @@ -111,7 +111,8 @@ export const MenuItemLine = styled.div` margin-top: -3px; bottom: 0; background: ${(props) => props.theme.main.foreground}; - transition: all 0.3s; + transition: padding 0.3s, height 0.3s, background 0.3s, box-shadow 0.3s, + margin 0.3s, border-radius 0.3s; left: 0; ` diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx index c0ccfbba..465f98d2 100644 --- a/src/components/Markdown/styles.tsx +++ b/src/components/Markdown/styles.tsx @@ -178,7 +178,7 @@ export const MarkdownWrapper = styled.div` background-repeat: no-repeat; background-size: 100% 3px; background-position: 0 100%; - transition: all 0.125s ease-in; + transition: color 0.125s ease-in, background-size 0.125s ease-in; font-weight: 700; word-break: break-all; &:hover { From 96e26dfeb9037cb98b2aa2f0e20fa522749ccbc2 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Mon, 22 Jun 2026 00:04:56 -0400 Subject: [PATCH 02/11] a11y: add global prefers-reduced-motion guard Neutralize animations, transitions and smooth scroll for users who request reduced motion, per the web interface guidelines. No change for users with default motion settings. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/globalStyles.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/globalStyles.tsx b/src/globalStyles.tsx index a295a9c4..5d0da0dd 100644 --- a/src/globalStyles.tsx +++ b/src/globalStyles.tsx @@ -19,4 +19,15 @@ export const GlobalStyles = createGlobalStyle` -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + + @media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + } ` From e030afa3e20db63dccf0677063a6664e3a830151 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Mon, 22 Jun 2026 00:22:26 -0400 Subject: [PATCH 03/11] style: set color-scheme to match active theme Bind CSS `color-scheme` to the active theme name so native UI (scrollbars, form controls, spinners) renders in the correct light/dark mode, per the web interface guidelines. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/globalStyles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/globalStyles.tsx b/src/globalStyles.tsx index 5d0da0dd..ab62492c 100644 --- a/src/globalStyles.tsx +++ b/src/globalStyles.tsx @@ -8,6 +8,7 @@ import { export const GlobalStyles = createGlobalStyle` html { font-family: ${fontFamily.body}; + color-scheme: ${(props) => props.theme.name}; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } From db8ba10e3b3232e62a430cbbbacf05e2a5c1b19f Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Mon, 22 Jun 2026 00:31:37 -0400 Subject: [PATCH 04/11] a11y: use :focus-visible for link focus styles Switch link focus affordances from :focus to :focus-visible across Footer, Link, PageNavigation, PageSidebarLink, FourZeroFourHint and the home layout, per the web interface guidelines. Hover and keyboard focus look identical; mouse clicks no longer leave the focus style stuck. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/Footer/styles.tsx | 2 +- src/components/FourZeroFourHint/styles.tsx | 2 +- src/components/Link/styles.tsx | 2 +- src/components/PageNavigation/styles.tsx | 2 +- src/components/PageSidebarLink/styles.tsx | 2 +- src/layouts/HomeLayout/styles.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx index 76b11fbd..a1d2bd11 100644 --- a/src/components/Footer/styles.tsx +++ b/src/components/Footer/styles.tsx @@ -22,7 +22,7 @@ export const FooterWrapper = styled.footer` } &:hover, - &:focus { + &:focus-visible { background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); background-clip: text; -webkit-background-clip: text; diff --git a/src/components/FourZeroFourHint/styles.tsx b/src/components/FourZeroFourHint/styles.tsx index 4dbcb2f7..354ff9c0 100644 --- a/src/components/FourZeroFourHint/styles.tsx +++ b/src/components/FourZeroFourHint/styles.tsx @@ -9,7 +9,7 @@ export const StyledLink = styled(Link)` transition: color 0.3s; &:hover, - &:focus { + &:focus-visible { color: #5dbbea; transition: none; } diff --git a/src/components/Link/styles.tsx b/src/components/Link/styles.tsx index 23ecbf5c..ff7ed7af 100644 --- a/src/components/Link/styles.tsx +++ b/src/components/Link/styles.tsx @@ -23,7 +23,7 @@ const linkStyle = css` } &:hover, - &:focus { + &:focus-visible { background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%); background-clip: text; -webkit-background-clip: text; diff --git a/src/components/PageNavigation/styles.tsx b/src/components/PageNavigation/styles.tsx index fa615358..8833cb6f 100644 --- a/src/components/PageNavigation/styles.tsx +++ b/src/components/PageNavigation/styles.tsx @@ -22,7 +22,7 @@ export const NavLink = styled(Link)` text-decoration: none; &:hover, - &:focus { + &:focus-visible { color: ${(props) => props.theme.main.foreground}; text-decoration: underline; } diff --git a/src/components/PageSidebarLink/styles.tsx b/src/components/PageSidebarLink/styles.tsx index 13b816e0..d103da70 100644 --- a/src/components/PageSidebarLink/styles.tsx +++ b/src/components/PageSidebarLink/styles.tsx @@ -7,7 +7,7 @@ const extraLink = css` word-break: break-word; &:hover, - &:focus { + &:focus-visible { text-decoration: underline; } ` diff --git a/src/layouts/HomeLayout/styles.tsx b/src/layouts/HomeLayout/styles.tsx index 038a16fd..7591af08 100644 --- a/src/layouts/HomeLayout/styles.tsx +++ b/src/layouts/HomeLayout/styles.tsx @@ -29,7 +29,7 @@ export const MainContent = styled.main` transition: color 0.3s; &:hover, - &:focus { + &:focus-visible { color: #5dbbea; transition: none; } From e1b05eab8d8ceaa9d07e954a6e0e592bd4c26caf Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Mon, 22 Jun 2026 00:32:04 -0400 Subject: [PATCH 05/11] perf: add touch-action: manipulation to interactive elements Remove the 300ms tap delay and double-tap-to-zoom on links, buttons, labels and summaries, per the web interface guidelines. No visual change. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/globalStyles.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/globalStyles.tsx b/src/globalStyles.tsx index ab62492c..d19dec5a 100644 --- a/src/globalStyles.tsx +++ b/src/globalStyles.tsx @@ -21,6 +21,14 @@ export const GlobalStyles = createGlobalStyle` -moz-osx-font-smoothing: grayscale; } + a, + button, + label, + summary, + [role="button"] { + touch-action: manipulation; + } + @media (prefers-reduced-motion: reduce) { *, *::before, From 4ed1b3fa376649c7da836180451fb83e485df03a Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Mon, 22 Jun 2026 00:33:23 -0400 Subject: [PATCH 06/11] fix: add scroll-margin-top to anchored headings Deep links to markdown headings no longer hide under the fixed mobile header, per the web interface guidelines. No change to normal rendering. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/components/Markdown/styles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx index 465f98d2..ea0f1493 100644 --- a/src/components/Markdown/styles.tsx +++ b/src/components/Markdown/styles.tsx @@ -42,6 +42,7 @@ export const MarkdownWrapper = styled.div` overflow-wrap: break-word; margin-top: ${BASE_LINE_HEIGHT * 2}px; margin-bottom: ${BASE_LINE_HEIGHT}px; + scroll-margin-top: 80px; } h1 { From 864620af481bc5efd8e2010a971e597ff2a02b6c Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Mon, 22 Jun 2026 00:59:09 -0400 Subject: [PATCH 07/11] a11y: make theme toggler a semantic button The theme toggler was a clickable div, unreachable by keyboard. Convert the wrapper to a reset