Add Dyslexic font option to Accessibility settings#70
Merged
Conversation
Add a `dyslexicFont` Boolean preference to the User model, mirroring the existing `cvdMode` field's plumbing: schema column with `@default(false)`, squawk-clean migration, `UpdateMeDto` validation, and `UsersService.updateMe` handling. Wave 1 of 5 for the Dyslexic font accessibility option; front-end wiring follows in later waves. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
👁️ Tuffgal visual regressionOutcome: pass
|
Vendor self-hosted OpenDyslexic faces and add the [data-dyslexic-font='on'] override behind the (not-yet-wired) Accessibility toggle. - Sans (Regular + Bold woff2, SIL OFL 1.1) drives --font-sans and Preflight's --default-font-family; Mono (Regular otf, CC BY 3.0 + Bitstream Vera) drives --font-mono. Mono ships no Bold face, so the browser synthesizes bold. - Override the font custom properties (not font-family on a selector) in an unlayered block mirroring [data-cvd='on'], so every .font-sans/.font-mono utility and the body default resolve to OpenDyslexic at runtime. Font Awesome and .app-mock-asemic set font-family on themselves and are unaffected. - Add letter/word/line spacing below the WCAG 1.4.12 reference ceiling with no !important, so a user's own text-spacing override still wins. - Families are referenced only inside the scoped block, so the files are never fetched while the toggle is off (verified against compiled dist CSS). - Commit both license files and correct the stale "only @font-face" comment. Toggle wiring (ThemeContext, UI) lands in later waves. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Wave 3 of the Dyslexic font accessibility option. Connects wave 1's persisted `dyslexicFont` user field to wave 2's `[data-dyslexic-font='on']` CSS block by mirroring the existing CVD state plumbing: - storage.ts: `DYSLEXIC_FONT_KEY` + `DYSLEXIC_FONT_UPDATED_AT_KEY` - useThemeState: `isDyslexicFont` state, layout effect toggling `data-dyslexic-font` on `<html>`, and `enableDyslexicFont`/ `disableDyslexicFont` actions (pure attribute toggle, no theme coupling, so they return void unlike the CVD actions) - ThemeContext + AuthContext types, MeResponse, and mapMeToUser mapping - App.tsx: server-sync effect with the same 30s local-change race guard No UI control and no server PATCH yet (wave 4); no Tuffgal stories (wave 5). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds a DyslexicFontToggle to the Accessibility settings section, wired
between the CVD-mode and keyboard-shortcuts toggles. It reads and flips
the OpenDyslexic override exposed on ThemeContext (wave 3), optimistically
toggling then persisting via PATCH /users/me with { dyslexicFont }, and
reverts the local flip if the request fails.
The font preference is independent of the color theme, so no theme field
rides along with the request (unlike CVD mode). Copy avoids efficacy verbs
per the pre-build accessibility gate; the switch mirrors CvdModeToggle's
role="switch" / aria wiring 1:1 with dyslexic-font-* ids.
Also adds dyslexicFont to updateMe's input type and a DyslexicFontToggle
mock to SettingsView's test.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
![tuffgal[bot]](https://github.githubassets.com/images/gravatars/gravatar-user-420.png){kind=avatar}
Address crew-pass warnings on the dyslexic-font feature (no blockers): - Extract shared SettingSwitch from the three role="switch" toggles (CVD, dyslexic font, keyboard shortcuts); each caller keeps its own state and persistence and renders the shared markup. Standardize the knob on w-4 h-4. - Extract useServerBooleanPrefSync so App's CVD and dyslexic-font syncs share one guarded hook; brings App.tsx back under 100 lines. - Register SettingSwitch.tsx in the chrome-token MIGRATED_FILES allowlist so the extracted chrome tokens stay tripwire-protected. - Reword the dyslexic-font description for parallel grammar (mechanism only). - Recast feature-introduced em-dashes in comments to commas, colons, or parens. - Add the data-dyslexic-font hook mention to apps/web/README.md. - Add dyslexicFont to seven mock user factories. Behavior-neutral: rendered DOM and ARIA for all three toggles are unchanged; the existing toggle tests pass with no assertion changes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Mirror the CVD-mode story/action shape for DyslexicFontToggle. The action navigates to /settings, clicks the "OpenDyslexic font" switch, then proves the swap two ways: a read step asserts the html[data-dyslexic-font="on"] attribute that index.css keys off (the actual font-swap mechanism, not just the toggle UI), and a scoped expect on the aria-labelledby switch confirms aria-checked flips. Scoping avoids a false pass against the always-on keyboard-shortcuts switch. Tuffgal has no computed-style primitive, so the DOM attribute is the strongest available proof the font truly engages. Move DyslexicFontToggle's rendered-state coverage to the story layer, dropping the three pure-render unit tests (unchecked/checked/aria ids) now that the story owns them, matching CvdModeToggle which has no unit test. The persist tests stay: they assert the PATCH payload carries dyslexicFont alone with no theme field, a contract a story cannot observe. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…lectors Reformat the [data-dyslexic-font='on'] multi-value custom properties into Prettier's canonical multi-line form. npm run format never touches this file (its glob excludes .css), so npx prettier --write was run directly. Whitespace-only; built CSS values are byte-identical. Swap escaped double-quotes for single quotes in the toggle-dyslexic-font Tuffgal action selectors to match the sibling-action house style. CSS attribute selectors are quote-agnostic, so matching is unchanged. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
nschneble
marked this pull request as ready for review
July 24, 2026 00:42
|
🚀 Committed candidate baselines to
To make the check clear itself automatically, pass a PAT / GitHub App token via the |
…neble/linklater into feature/dyslexic-font-accessibility
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.
Adds a Dyslexic font option to Accessibility settings, letting users render the interface in a dyslexia-friendly typeface.