Fix homepage P2 remainder from #898: dependency snippet, evidence-loop close, grid breakpoints/subgrid, contrast/motion/perf by MohabMohie · Pull Request #901 · ShaftHQ/shafthq.github.io

MohabMohie · 2026-07-27T12:16:40Z

Summary

Second P2 fast-follow to #899 / #900. Both of those PRs explicitly scoped down to a subset and said "Findings 7, 8, 11, 14, 16, 17, 18-21, 23, 25-29 were not assigned to this pass" (#900's own description). This PR picks up all 9 of the concrete, fixable P2 items from that remainder: 7, 8, 11, 14, 16, 17, 19, 20, 21. Branched fresh from origin/master (post-#900) in an isolated worktree.

Findings addressed

#	Finding	Change
7	Evidence loop read as a straight line, not a loop	Added a closing "Improve loops back to Execute — every run repeats the cycle." affordance with a rotate-left icon under the grid, instead of silently terminating at card 5.
8	No copyable dependency coordinate anywhere on the page	Added a `<dependency>` XML snippet (Docusaurus `CodeBlock`, built-in copy button) in the guide-paths intro, sourcing the version from the existing `releases.json` single source of truth rather than hardcoding it.
11	`.loopStep::after` (`'>'`) and `.handledPanel li::before` (`'+'`) used bare CSS `content` strings, announced by screen readers	Switched both to the alt-text form: `content: '>' / ''`.
14	Composited-contrast coverage stopped short of the hero/final secondary buttons and `.heroTrustLinks`	Added a border-contrast measurement (WCAG 1.4.11 — composites the border's own rgba analytically over the sampled backdrop rather than sub-pixel-sampling the 1px stroke) plus a text-contrast case for the trust links. The border case caught a real borderline failure: 0.42 alpha measured 2.94:1 against the hero backdrop; raised to 0.48 (~3.4:1) per the issue's own guidance ("raise the alpha rather than the text colour").
16	`will-change: opacity, transform` sat permanently on ~20 reveal elements for the page's whole lifetime	Removed — transitions on `opacity`/`transform` already promote their own layer for the transition's duration.
17	`useHoverGlow` forced a synchronous layout read on every `pointermove` across 28 elements	Now caches the rect once on `pointerenter` (via a `WeakMap`) and reuses it in the `pointermove` handler.
19	The 5-column path/loop/badge grids collapsed straight from 5 to 1 column at 980px, leaving ~150px-wide cards in the 981–1180px band	Added an intermediate 2-column step at a new `max-width: 1180px` breakpoint.
20	`.audienceLane`/`.loopStep` pinned content rows to fixed heights (`2.1rem`/`4.4rem` and `1.8rem`/`3rem`), which a 3rd description line or a multi-word loop title would overflow	Replaced with CSS `subgrid` so cross-card row alignment now follows content instead of a guessed height cap.
21	`height: 3.45rem` on CTA buttons whose labels are explicitly allowed to wrap (`white-space: normal`)	Changed to `min-height: 3.45rem`.

Not in scope for this PR

P3 findings 23, 25–29 — heading-alignment consistency, duplicate CSS blocks, dead centring CSS, the global [data-hover-glow] selector leak, the 3-colors-from-5-classes syntax highlighting, and the small copy/consistency items. These are real but lower-severity findings; leaving them for a further pass to keep this diff reviewable.
Finding 18 (scroll-reveal roll-back-on-upward-scroll) — the issue itself explicitly frames this as needing an owner decision, not a bug ("flagged for an intentional decision, not filed as a bug"). Left untouched; its existing test coverage (homepage.spec.js:197-203, homepage-performance.test.js's rolled-back assertion) is unmodified.

Test impact / evidence (TDD)

Every new/changed assertion was written and watched RED against the pre-fix source first, then implementation followed until GREEN:

tests/homepage-performance.test.js: static assertions for all 9 findings — will-change absence outside the reduced-motion block, alt-text content strings, min-height (and no bare height: 3.45rem), pointerenter rect-caching, the 1180px breakpoint's presence, subgrid rows on the evidence-loop parent, the loop-return copy/testid, the dependency-snippet import/testid sourced from releases.engineVersion, and the still-single "Maven Central" occurrence.
tests/e2e/composited-contrast.spec.js: new compositeOver + measureBorderContrast helper and two new tests (secondary CTA border, hero trust links text) — the border test is the one that caught the real 2.94:1 failure before the alpha fix.
tests/e2e/homepage.spec.js: extended the existing mobile CTA-overflow check to also catch vertical overflow, added a dedicated 800px test for the previously-unguarded 761–900px wrap band, and a parametrized test at 1000/1100/1180px confirming the path/loop grids sit at 2–4 columns with no horizontal page overflow.
Recaptured test-screenshots/01-homepage-before-chat.png against the live built site (reduced-motion emulated so below-the-fold sections aren't caught mid-reveal) to keep it current, per this repo's convention (matches what Fix homepage P1 findings from #898: CTA hierarchy, star-repo copy, guide-path order/numbering #899 did).

Test plan

node tests/homepage-performance.test.js — watched RED per finding, then GREEN
npx tsc --noEmit -p tsconfig.json — clean
npm run build — clean production build
npx playwright test tests/e2e/homepage.spec.js tests/e2e/composited-contrast.spec.js tests/e2e/hash-scroll-sync.spec.js — 20/20 pass, headless, against docusaurus serve on the fresh build
npm run test:docs (docs-loader, docs-quality, design-contrast 9/9 WCAG pairs, duplicate-check) — pass, no regressions
npm run test:release-template, npm run test:history — pass
Full-page + close-up screenshots captured against the live built site to visually confirm the dependency snippet, evidence-loop return note, 2-column grid at 1100px, and the more visible secondary-button border

Ref #898

🤖 Generated with Claude Code

https://claude.ai/code/session_019wEoJduy4Q4jfHWejcizCe

…p close, grid breakpoints/subgrid, contrast/motion/perf cleanup Second P2 fast-follow to #899/#900. Covers the 9 P2 findings from #898's homepage audit those PRs explicitly deferred (7, 8, 11, 14, 16, 17, 19, 20, 21). Branched fresh from origin/master (post-#900) in an isolated worktree. Findings addressed: - 7: evidence loop read as a straight line, not a loop -- added a closing "Improve loops back to Execute" affordance with a rotate-left icon under the grid instead of silently terminating at the 5th card. - 8: no copyable dependency coordinate anywhere on the page -- added a <dependency> XML snippet (Docusaurus CodeBlock, built-in copy button) in the guide-paths intro, sourcing the version from the existing releases.json single source of truth (not hardcoded). - 11: .loopStep::after ('>') and .handledPanel li::before ('+') used bare CSS content strings, announced by screen readers -- switched both to the alt-text form (content: '>' / ''). - 14: composited-contrast coverage stopped short of the hero/final secondary buttons and .heroTrustLinks. Added a border-contrast measurement (WCAG 1.4.11, composites the border's own rgba over the sampled backdrop rather than sub-pixel-sampling the 1px stroke) plus a text-contrast case for the trust links. The border case caught a real borderline failure -- 0.42 alpha measured 2.94:1; raised to 0.48 (~3.4:1) per the issue's own guidance to adjust alpha, not text color. - 16: will-change: opacity, transform sat permanently on ~20 reveal elements for the page's whole lifetime -- removed; transitions still promote their own layer for the transition's duration. - 17: useHoverGlow forced a synchronous layout read on every pointermove across 28 elements -- now caches the rect once on pointerenter and reuses it in the pointermove handler. - 19: the 5-column path/loop/badge grids collapsed straight from 5 to 1 column at 980px, leaving ~150px-wide cards in the 981-1180px band -- added an intermediate 2-column step at 1180px. - 20: .audienceLane/.loopStep pinned content rows to fixed heights (2.1rem/4.4rem and 1.8rem/3rem), which a 3rd description line or a multi-word loop title would overflow -- replaced with CSS subgrid so cross-card row alignment now follows content instead of a guessed cap. - 21: height: 3.45rem on CTA buttons whose labels are explicitly allowed to wrap (white-space: normal) -- changed to min-height. Not in scope for this PR (per dispatch): P3 findings 23, 25-29, and finding 18 (scroll-reveal roll-back), which the issue itself frames as an owner decision, not a bug -- left untouched. Test impact / evidence (TDD): every new/changed assertion was written and watched RED against the pre-fix source first. - tests/homepage-performance.test.js: static assertions for all 9 findings (will-change absence, alt-text content strings, min-height, pointerenter caching, the 1180px breakpoint's presence, subgrid rows, the loop-return copy/testid, the dependency-snippet import/testid, and the still-single "Maven Central" occurrence). - tests/e2e/composited-contrast.spec.js: new border-contrast helper (compositeOver + measureBorderContrast) and two new tests (secondary CTA border, hero trust links text). - tests/e2e/homepage.spec.js: extended the existing mobile CTA-overflow check to also catch vertical overflow, added a dedicated 800px test for the previously-unguarded 761-900px wrap band, and a parametrized test at 1000/1100/1180px confirming the path/loop grids sit at 2-4 columns with no horizontal page overflow. - Recaptured test-screenshots/01-homepage-before-chat.png against the live built site (reduced-motion emulated so below-the-fold sections aren't mid-reveal) to keep it current. Test plan: - [x] node tests/homepage-performance.test.js -- watched RED per finding, then GREEN - [x] npx tsc --noEmit -p tsconfig.json -- clean - [x] npm run build -- clean production build - [x] npx playwright test tests/e2e/homepage.spec.js tests/e2e/composited-contrast.spec.js tests/e2e/hash-scroll-sync.spec.js -- 20/20 pass, headless, against docusaurus serve on the fresh build (includes the border-contrast test that caught the real 2.94:1 failure before the alpha fix) - [x] npm run test:docs (docs-loader, docs-quality, design-contrast 9/9 WCAG pairs, duplicate-check) -- pass, no regressions - [x] npm run test:release-template, npm run test:history -- pass - [x] Full-page + close-up screenshots captured against the live built site to visually confirm the dependency snippet, evidence-loop return note, 2-column grid at 1100px, and the more visible secondary-button border Ref #898 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019wEoJduy4Q4jfHWejcizCe

cloudflare-workers-and-pages · 2026-07-27T12:18:07Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	shaft-engine	`c07f73d`	Commit Preview URL Branch Preview URL	Jul 27 2026, 12:18 PM

… dead centring CSS, hover-glow selector leak, code-sample colors, small consistency items Picks up the remaining P3 items after #899/#900/#901: findings 23, 25, 26, 27, 28, 29. - Finding 23: AudienceSection had no section-level heading at all (the real outlier among four alignment treatments). Gave it an eyebrow + <h2> + id matching its sibling sections, demoted lane titles from <h2> to <h3> so the heading outline is no longer promoted to section level. Kept the existing centered/left-aligned split for the other sections as-is to keep the diff reviewable, matching PR #901's own precedent. - Finding 25: merged 6 selectors (.pathCard small, .loopStep small, .footerBadges strong, .finalKicker, .proofGrid, .proofCard) that were each split across two distant blocks of the same file, preserving declaration order so no computed style changes. - Finding 26: removed the dead ::after optical-centring spacer and the inert text-align: center on hero/final CTA buttons (they render left-aligned icon+label; neither declaration did anything). - Finding 27: scoped every `[data-hover-glow]` CSS selector under a `.hoverGlow` module class so the styling cannot leak globally out of this page's CSS module onto any future `data-hover-glow` element elsewhere on the site. - Finding 28: gave `.codeAnnotation`/`.codeKeyword` their own color-mix values (65%/50% primary-into-on-dark, same technique as the existing `.codeString`) instead of sharing muted with `.codeCall`, so the Java sample's 5 token classes render 5 distinct colors instead of 3. Both percentages hand-verified against the WCAG relative-luminance formula (>=4.5:1 in both themes) before use. - Finding 29 (six small items): external links now consistently open in a new tab with a visible arrow-icon affordance; the self-referential "SHAFT" wordmark link (/ to /) is now a non-interactive span; heroMeta no longer restates Java 25/MIT/Allure native already in footerBadges; .allureGrid .sectionHeading no longer sits above vertical center; .heroGrid (display: block) renamed to .heroLayout; the dense 32-word hero sub-copy sentence naming four products is tightened. TDD: added ~25 new assertions to tests/homepage-performance.test.js, each watched RED against the pre-fix source, then GREEN after the corresponding fix. Updated composited-contrast.spec.js where my changes directly affect existing assertions (.audienceLane h2->h3, heroBrand no longer an <a>, comment accuracy). Test plan: - node tests/homepage-performance.test.js -- pass - npx tsc --noEmit -p tsconfig.json -- clean - npm run build -- clean production build - npx playwright test tests/e2e/homepage.spec.js tests/e2e/composited-contrast.spec.js tests/e2e/hash-scroll-sync.spec.js -- 20/20 pass - npm run test:docs (docs-loader, docs-quality, design-contrast 9/9 WCAG pairs, duplicate-check) -- pass - npm run test:release-template, npm run test:history -- pass - Recaptured test-screenshots/01-homepage-before-chat.png against the live built site, per this repo's convention - Full-page and close-up screenshots (audience section, hero trust links, code proof, footer, allure grid) visually confirmed Ref #898 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019wEoJduy4Q4jfHWejcizCe

* Fix homepage P3 findings from #898: heading alignment, duplicate CSS, dead centring CSS, hover-glow selector leak, code-sample colors, small consistency items Picks up the remaining P3 items after #899/#900/#901: findings 23, 25, 26, 27, 28, 29. - Finding 23: AudienceSection had no section-level heading at all (the real outlier among four alignment treatments). Gave it an eyebrow + <h2> + id matching its sibling sections, demoted lane titles from <h2> to <h3> so the heading outline is no longer promoted to section level. Kept the existing centered/left-aligned split for the other sections as-is to keep the diff reviewable, matching PR #901's own precedent. - Finding 25: merged 6 selectors (.pathCard small, .loopStep small, .footerBadges strong, .finalKicker, .proofGrid, .proofCard) that were each split across two distant blocks of the same file, preserving declaration order so no computed style changes. - Finding 26: removed the dead ::after optical-centring spacer and the inert text-align: center on hero/final CTA buttons (they render left-aligned icon+label; neither declaration did anything). - Finding 27: scoped every `[data-hover-glow]` CSS selector under a `.hoverGlow` module class so the styling cannot leak globally out of this page's CSS module onto any future `data-hover-glow` element elsewhere on the site. - Finding 28: gave `.codeAnnotation`/`.codeKeyword` their own color-mix values (65%/50% primary-into-on-dark, same technique as the existing `.codeString`) instead of sharing muted with `.codeCall`, so the Java sample's 5 token classes render 5 distinct colors instead of 3. Both percentages hand-verified against the WCAG relative-luminance formula (>=4.5:1 in both themes) before use. - Finding 29 (six small items): external links now consistently open in a new tab with a visible arrow-icon affordance; the self-referential "SHAFT" wordmark link (/ to /) is now a non-interactive span; heroMeta no longer restates Java 25/MIT/Allure native already in footerBadges; .allureGrid .sectionHeading no longer sits above vertical center; .heroGrid (display: block) renamed to .heroLayout; the dense 32-word hero sub-copy sentence naming four products is tightened. TDD: added ~25 new assertions to tests/homepage-performance.test.js, each watched RED against the pre-fix source, then GREEN after the corresponding fix. Updated composited-contrast.spec.js where my changes directly affect existing assertions (.audienceLane h2->h3, heroBrand no longer an <a>, comment accuracy). Test plan: - node tests/homepage-performance.test.js -- pass - npx tsc --noEmit -p tsconfig.json -- clean - npm run build -- clean production build - npx playwright test tests/e2e/homepage.spec.js tests/e2e/composited-contrast.spec.js tests/e2e/hash-scroll-sync.spec.js -- 20/20 pass - npm run test:docs (docs-loader, docs-quality, design-contrast 9/9 WCAG pairs, duplicate-check) -- pass - npm run test:release-template, npm run test:history -- pass - Recaptured test-screenshots/01-homepage-before-chat.png against the live built site, per this repo's convention - Full-page and close-up screenshots (audience section, hero trust links, code proof, footer, allure grid) visually confirmed Ref #898 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019wEoJduy4Q4jfHWejcizCe * fix(tests): avoid constructing RegExp from href literals in external-link check CodeQL flagged two href string literals (central.sonatype.com, opensource.googleblog.com) as "Incomplete regular expression for hostnames" because they get interpolated into new RegExp() -- even though the existing .replace() escape already neutralizes all regex metachars. Rather than fight CodeQL's sanitizer recognition, drop the regex construction entirely: locate the anchor tag via plain indexOf/lastIndexOf substring search and check target/rel on the extracted tag slice. Verified equivalent pass/fail behavior on the positive case, missing-target/rel case, and missing-href case. --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

MohabMohie enabled auto-merge (squash) July 27, 2026 12:16

MohabMohie merged commit 1ce5233 into master Jul 27, 2026
5 checks passed

MohabMohie deleted the claude/issue-898-p2-remainder branch July 27, 2026 12:19

MohabMohie mentioned this pull request Jul 27, 2026

Fix homepage P3 findings from #898 (#898 P3) #902

Merged

8 tasks

MohabMohie mentioned this pull request Jul 27, 2026

Landing page (src/pages/index.tsx) enhancement & polish audit #898

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix homepage P2 remainder from #898: dependency snippet, evidence-loop close, grid breakpoints/subgrid, contrast/motion/perf - #901

Fix homepage P2 remainder from #898: dependency snippet, evidence-loop close, grid breakpoints/subgrid, contrast/motion/perf#901
MohabMohie merged 1 commit into
masterfrom
claude/issue-898-p2-remainder

MohabMohie commented Jul 27, 2026

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

MohabMohie commented Jul 27, 2026

Summary

Findings addressed

Not in scope for this PR

Test impact / evidence (TDD)

Test plan

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 27, 2026

Deploying with Cloudflare Workers

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant