feat: accessibility improvements, high contrast mode, i18n audit#139
Open
thedavidweng wants to merge 3 commits into
Open
feat: accessibility improvements, high contrast mode, i18n audit#139thedavidweng wants to merge 3 commits into
thedavidweng wants to merge 3 commits into
Conversation
Accessibility:
- Add aria-describedby on all form inputs to associate validation
errors with their fields (prompt, lyrics, duration, bpm, negative
prompt, inference steps, guidance scale)
- Add aria-expanded to Collapsible and FailedRunsDrawer toggle buttons
- Improve --color-text-dimmer contrast: #7a7a82 → #8a8a8e (light),
#6f7780 → #858d96 (dark), #66666d → #808087 (darker) — meets WCAG AA
High contrast mode:
- Add highContrast store state + setHighContrast action
- Add toggle in Settings > General
- Add [data-high-contrast] CSS that raises --color-text-dim and
--color-text-dimmer for users who need stronger contrast
- Toggle applies data-high-contrast attribute on <html> via useEffect
i18n audit:
- Remove all defaultValue fallbacks from t() calls in settings sections,
SetupScreen, LogsSection, NetworkActivitySection — every string now
goes through the locale files
- Add missing keys: noNetworkActivity, networkTime, networkMethod,
networkUrl, networkStatus, anonymousErrorReports(+Description),
downloadedBadge, shortcutsHint, shortcut_{toggleSidebar,newGeneration,
toggleSettings,submitGeneration,togglePlayback}
- Add zh-CN translations for all new keys
- Add ja-JP/ko-KR feasibility notes in i18n.ts
Tests updated to assert on i18n keys instead of defaultValue strings.
Closes #61
Generated with [Devin](https://devin.ai)
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #139 +/- ##
=====================================
Coverage 71.9% 71.9%
=====================================
Files 61 61
Lines 2389 2407 +18
Branches 710 720 +10
=====================================
+ Hits 1719 1732 +13
- Misses 476 479 +3
- Partials 194 196 +2
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
Greptile SummaryThis PR improves accessibility, adds a high-contrast mode, and audits i18n coverage across settings and setup screens. All previously flagged issues (persistence of high contrast, wrong "Ready" badge text) have been addressed in the latest commits.
Confidence Score: 5/5Safe to merge — the changes are well-scoped accessibility and i18n improvements with correct persistence of the new high contrast preference. The high contrast round-trip (Rust model → hydration → Zustand → CSS → UI toggle) is correctly implemented end-to-end, previously flagged issues with the "Ready" badge text and missing persistence have been fixed, all new i18n keys are present in both locale files, and accessibility attributes follow established patterns throughout the form. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[App startup / hydrateFromPersistence] -->|reads mergedSettings.highContrast| B[Zustand store\nhighContrast state]
B --> C[useHighContrast hook\nin App.tsx]
C -->|useEffect| D[document.documentElement\n.toggleAttribute\n'data-high-contrast']
D --> E["CSS [data-high-contrast]\n--color-text-dim: #bbbbc0\n--color-text-dimmer: #9e9ea3"]
F[GeneralSection\nhigh contrast checkbox] -->|onChange| G[setHighContrast action]
G --> B
G -->|isTauriRuntime| H[api.setSetting\n'highContrast', enabled]
H --> I[Rust AppSettings\nhigh_contrast field\npersisted to disk]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[App startup / hydrateFromPersistence] -->|reads mergedSettings.highContrast| B[Zustand store\nhighContrast state]
B --> C[useHighContrast hook\nin App.tsx]
C -->|useEffect| D[document.documentElement\n.toggleAttribute\n'data-high-contrast']
D --> E["CSS [data-high-contrast]\n--color-text-dim: #bbbbc0\n--color-text-dimmer: #9e9ea3"]
F[GeneralSection\nhigh contrast checkbox] -->|onChange| G[setHighContrast action]
G --> B
G -->|isTauriRuntime| H[api.setSetting\n'highContrast', enabled]
H --> I[Rust AppSettings\nhigh_contrast field\npersisted to disk]
Reviews (3): Last reviewed commit: "fix: add HighContrast backend setting ke..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
- Add setup.engineReady i18n key for backend engine badge (was showing "Pack downloaded") - Persist highContrast preference via api.setSetting and load on hydration - Add tests for high contrast toggle in GeneralSection Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
The frontend setHighContrast calls api.setSetting("highContrast", ...)
but the Rust SettingKey enum had no HighContrast variant, so parse()
returned a validation error and the preference was never persisted.
Add HighContrast to SettingKey, AppSettings.high_contrast, parse(),
as_str(), apply_setting(), entries(), and the known-keys test. The
setting now round-trips through SQLite and loads on hydration.
Addresses Greptile P1 review comment on #139.
Generated with [Devin](https://devin.ai)
Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
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.
Summary
Accessibility
aria-describedbyon all form inputs to associate validation errors with their fields (prompt, lyrics, duration, bpm, negative prompt, inference steps, guidance scale)aria-expandedto Collapsible and FailedRunsDrawer toggle buttons--color-text-dimmercontrast: #7a7a82 to #8a8a8e (light), #6f7780 to #858d96 (dark), #66666d to #808087 (darker) — meets WCAG AAHigh contrast mode
highContraststore state +setHighContrastaction[data-high-contrast]CSS that raises--color-text-dimand--color-text-dimmerfor users who need stronger contrastdata-high-contrastattribute on<html>viauseEffecti18n audit
defaultValuefallbacks fromt()calls in settings sections, SetupScreen, LogsSection, NetworkActivitySection — every string now goes through the locale filesnoNetworkActivity,networkTime,networkMethod,networkUrl,networkStatus,anonymousErrorReports(+Description),downloadedBadge,shortcutsHint,shortcut_{toggleSidebar,newGeneration,toggleSettings,submitGeneration,togglePlayback}i18n.tsCloses #61
Test plan
pnpm typecheckcleanpnpm lintcleanpnpm format:checkcleanpnpm test:run(957 passed)Generated with Devin