30 lines
3.5 KiB
Markdown
30 lines
3.5 KiB
Markdown
### index.html
|
|
[ERROR] Accessibility: FAQ accordion buttons lack `aria-controls` and panels lack `id`s (line 217). Verified by checking markup. Confidence: 100%.
|
|
[WARN] Accessibility: Calculator `aria-live="polite"` (line 197) contains the entire output ledger. Refutation attempt: Maybe `app.js` debounces input? No, `app.js:125` fires `recalc()` and rewrites DOM immediately on every `input` event, causing severe screen reader spam while typing. Confidence: 100%.
|
|
[OK] Form labels (line 261): Explicitly linked via `for`/`id`.
|
|
[OK] Focus visibility: Custom outlines exist for inputs, and default browser outlines remain intact for buttons since no global reset exists. Confidence: 100%.
|
|
|
|
### styles.css
|
|
[ERROR] WCAG Contrast (Light): `--ink-3` (`#837868`) on `--paper` (`#F7F3EB`) yields ~3.8:1, failing AA 4.5:1. Refutation attempt: Is it only used for large text? No, it's used for small body text like `.hero__note` and `.calc__foot`. Corrected hex: `#6D6456`. Confidence: 100%.
|
|
[ERROR] Accessibility: Collapsed FAQ answers `.faq__a` (line 327) hide visually via `max-height: 0` but lack `visibility: hidden`. Screen readers will inappropriately read collapsed answers. Confidence: 100%.
|
|
[ERROR] Responsive: Mobile nav links are `display: none` < 880px (line 127). Refutation attempt: Because it is a single-page site, users can still scroll. However, removing primary wayfinding without a hamburger fallback completely breaks standard user expectation. Confidence: High.
|
|
[WARN] Responsive: Pricing tables lack a horizontal overflow wrapper. A 5-column table will break 320px mobile viewports. Confidence: 100%.
|
|
[OK] WCAG Contrast (Dark): `--ink-3` (`#9A8C77`) on `#1C1814` is 5.3:1. Both light/dark `--accent-ink` and button texts pass AA comfortably. Confidence: 100%.
|
|
|
|
### app.js
|
|
[WARN] Calculator Edge Case: Typing an empty string `""` evaluates safely to `0` mathematically (line 64). Refutation attempt: Does this break the math? No. Does it break UI state? Yes, `input.value` is not overwritten in the UI during typing, leaving the input visually blank while the calculator computes `0`. Confidence: 100%.
|
|
[OK] Calculator Math: Divide-by-zero is handled safely via `endpoints > 0` condition (line 112). `NaN` correctly defaults to `0`. Confidence: 100%.
|
|
[OK] Theme Toggle: Properly sets `aria-pressed` and respects system preferences dynamically (line 16). Confidence: 100%.
|
|
|
|
### Design & Art Direction
|
|
[OK] AI-slop: None detected. The "Sonoran Ledger" constraints (strict 24px baseline, tabular-nums, sparse orange accent) are mathematically and visually respected. Copy is direct and avoids generic SaaS bloat words.
|
|
|
|
### PRIORITIZED FIX LIST
|
|
1. **[CRITICAL]** Update `--ink-3` in `styles.css:12` to `#6D6456` to meet WCAG AA contrast.
|
|
2. **[CRITICAL]** Add `visibility: hidden` to `.faq__a` (`styles.css:327`) and `visibility: visible` to its expanded state to prevent screen reader leakage.
|
|
3. **[HIGH]** Implement a mobile menu fallback for viewports `< 880px` rather than purely hiding `.nav__link` (`styles.css:127`).
|
|
4. **[HIGH]** Wrap `.plan-table` in an `overflow-x: auto` container to prevent layout breakage on narrow screens (`index.html:120`).
|
|
5. **[MED]** Add `id`s to FAQ panels and `aria-controls` to FAQ buttons (`index.html:217`).
|
|
6. **[MED]** Scope `aria-live` to specific total spans or debounce the `input` listener to prevent screen reader spam (`index.html:197`, `app.js:125`).
|
|
7. **[LOW]** Add a `blur` listener to calculator inputs to visually sync empty/invalid inputs back to `"0"` (`app.js:61`).
|