Enforce web interface guidelines: a11y, motion & theming fixes + eslint gate#474
Open
veksen wants to merge 11 commits into
Open
Enforce web interface guidelines: a11y, motion & theming fixes + eslint gate#474veksen wants to merge 11 commits into
veksen wants to merge 11 commits into
Conversation
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
The theme toggler was a clickable div, unreachable by keyboard. Convert the wrapper to a reset <button type="button"> so it is focusable and operable via Enter/Space, per the web interface guidelines. Layout and appearance are unchanged; keyboard users now get a focus ring. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a skip link as the first focusable element so keyboard and screen reader users can bypass the sidebar navigation and jump straight to <main>, per the web interface guidelines. Visible only on keyboard focus. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Emit a <meta name="theme-color"> matching the active theme's page background so mobile browser chrome aligns with the page, updating when the user toggles themes, per the web interface guidelines. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add no-restricted-syntax rules that block, in styled-components CSS: `transition: all`, bare `:focus` (prefer :focus-visible), and `outline: none/0` without a focus replacement. Encodes the mechanical rules from the web interface guidelines so CI fails on regressions. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The web interface guidelines now live at docs/design/ (added in a separate PR) rather than the gitignored .context/ working copy. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
✅ Deploy Preview for tph ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Raises baseline quality across the site against the web interface guidelines, with no visual redesign. Behind-the-scenes fixes: scope
transition: allto explicit properties, a globalprefers-reduced-motionguard,color-schemeand atheme-colormeta bound to the active theme,:focus→:focus-visible,touch-action: manipulationon interactive elements, andscroll-margin-topon anchored headings. Accessibility fixes: the theme toggler is now a semantic keyboard-operable<button>and the content layout has a skip-to-content link. Finally,.eslintrc.jsgainsno-restricted-syntaxrules that fail CI ontransition: all, bare:focus, or unguardedoutline: nonein styled-components, so these don't regress. Build is green (108/108 pages) and the guideline docs land separately in #473.🤖 Generated with Claude Code