fix(public): bring in-content links up to WCAG 2.2 24px tap targets - #25
Merged
Conversation
PR #22 fixed only .footer-links; the trust-critical in-content links on the app and privacy pages - mailto support emails, plain-list navigation, top-nav, product links, and the homepage hero-rail links - stayed plain inline anchors with ~17px hit areas, below the WCAG 2.2 24px minimum on every tinystudio.in page at mobile widths. Give .top-nav a, .product-links a, .plain-list a, and .rail-item strong a the same treatment as the footer: inline-block with min-height 24px and 4px vertical padding (rendered ~31-43px), so the whole row is tappable. Renames scripts/test-public-footer-targets.mjs to scripts/test-public-link-targets.mjs and extends it (wired into npm test and npm run ci) to assert every in-content link on all 12 public pages lives inside a styled container or CTA class, that each container rule enforces the 24px minimum, and that footer links stay covered. verify: /home/nish/.local/bin/test-gate npm test; /home/nish/.local/bin/test-gate npm run ci; git diff --check; node --check scripts/test-public-link-targets.mjs; Playwright 390x844 audit on /promptly/privacy/, /drishti/privacy/, /privacy-choices/, /promptly/, /, /contact/, /terms/ shows zero in-content links below 24x24 (pre-fix: 17px) Co-authored-by: Claude <noreply@anthropic.com>
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
📝 WalkthroughWalkthroughThe PR replaces footer-only link validation with checks across public pages and link styles. It adds 24px interactive link targets for several link groups and updates npm test and CI commands to run the new validator. ChangesPublic link target validation
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@public/styles.css`:
- Around line 150-152: Update each affected anchor selector in
public/styles.css, including the blocks near the existing min-height rules, to
enforce a minimum inline dimension of 24px by adding min-width or
min-inline-size. Extend scripts/test-public-link-targets.mjs to validate that
each matching selector declares the same 24px minimum-width requirement while
preserving the existing height checks.
In `@scripts/test-public-link-targets.mjs`:
- Around line 94-102: Update the coverage calculation around
countChromeOrCtaLinks(), linksInside(), and railItemStrongLinks() to track
covered anchors by source position, deduplicating overlaps across selectors.
Compare the resulting unique covered-anchor set against the complete anchor set,
while preserving the existing requirement that coverage is nonzero and reporting
accurate unique counts.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4cda208a-eecd-4e2e-be07-27e4a2374450
📒 Files selected for processing (4)
package.jsonpublic/styles.cssscripts/test-public-footer-targets.mjsscripts/test-public-link-targets.mjs
💤 Files with no reviewable changes (1)
- scripts/test-public-footer-targets.mjs
Comment on lines
+150
to
+152
| display: inline-block; | ||
| min-height: 24px; | ||
| padding: 4px 0; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Enforce the 24px inline dimension.
These rules only enforce target height. A short anchor can remain narrower than 24px and still pass scripts/test-public-link-targets.mjs, because that validator does not check width.
Add min-width: 24px or min-inline-size: 24px to each selector. Extend the validator to require the same property.
Also applies to: 325-329, 414-416, 698-702
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@public/styles.css` around lines 150 - 152, Update each affected anchor
selector in public/styles.css, including the blocks near the existing min-height
rules, to enforce a minimum inline dimension of 24px by adding min-width or
min-inline-size. Extend scripts/test-public-link-targets.mjs to validate that
each matching selector declares the same 24px minimum-width requirement while
preserving the existing height checks.
Comment on lines
+94
to
+102
| const covered = | ||
| countChromeOrCtaLinks(content) + | ||
| linksInside(content, TOP_NAV) + | ||
| linksInside(content, PLAIN_LIST) + | ||
| linksInside(content, PRODUCT_LINKS) + | ||
| railItemStrongLinks(content) | ||
| ok( | ||
| total === covered && covered > 0, | ||
| `${page} has no uncovered in-content links (${covered}/${total} in styled containers or CTA classes)` |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
De-duplicate covered anchors before comparison.
A CTA link inside .top-nav counts once in countChromeOrCtaLinks() and again in linksInside(content, TOP_NAV). An uncovered anchor can offset that duplicate, so total === covered passes even though the page has an uncovered link.
Track each anchor by its source position and compare the unique covered-anchor set with the complete anchor set.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@scripts/test-public-link-targets.mjs` around lines 94 - 102, Update the
coverage calculation around countChromeOrCtaLinks(), linksInside(), and
railItemStrongLinks() to track covered anchors by source position, deduplicating
overlaps across selectors. Compare the resulting unique covered-anchor set
against the complete anchor set, while preserving the existing requirement that
coverage is nonzero and reporting accurate unique counts.
This was referenced Aug 11, 2026
This was referenced Aug 14, 2026
nish3451
added a commit
that referenced
this pull request
Aug 22, 2026
… live check now green (#221) PR #22 fixed only footer links; PR #25 (b0f5f06) brought the in-content links (top-nav, plain-list, product-links, rail-item strong a) up to the WCAG 2.2 24px minimum and is merged on main. Static guard: 77 checks, 0 failures. Live guard: 32 checks, 0 failures — the stale-deployment gap from the PR #152 lane is closed. Co-authored-by: minimax-vps <minimax-vps@MiniMax.local> Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
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.
What
PR #22 brought the footer links up to the WCAG 2.2 (SC 2.5.8) 24px tap-target minimum. The in-content links on every public page stayed plain inline anchors with ~17px hit areas — including the trust-critical ones: support mailto emails, "Privacy choices and requests", top-nav, product links, and the homepage hero-rail links.
This change gives
.top-nav a,.product-links a,.plain-list a, and.rail-item strong athe same treatment the footer got:display: inline-block; min-height: 24px; padding: 4px 0;(rendered ~31–43px tall). Copy, colors, and layout otherwise unchanged.Regression
scripts/test-public-footer-targets.mjsrenamed toscripts/test-public-link-targets.mjsand extended (wired intonpm testandnpm run ci):min-height: 24px, ≥4px vertical padding).button,.text-link,.ghost-button) still ≥ 24pxThe regression fails 8 ways against the pre-fix CSS and passes (74 checks) with the fix.
Rendered proof
Playwright at 390x844 against the built pages: zero in-content links below 24x24 on
/promptly/privacy/,/drishti/privacy/,/privacy-choices/,/promptly/,/,/contact/,/terms/; zero horizontal overflow on every page. Samples (pre-fix → post-fix): "Promptly support email" 160x17 → 160x31, "Privacy choices and requests" ~17 → 204x31, top-nav 24.3 → 32, hero-rail links → 43.Verify
/home/nish/.local/bin/test-gate npm test— pass/home/nish/.local/bin/test-gate npm run ci— passgit diff --check— cleanCloses the backlog item: "In-content links stay below the WCAG 2.2 24px tap-target minimum - merged PR #22 fixes only .footer-links".
Summary by CodeRabbit