Repository navigation
Stop the row opacity compounding, which failed AA on 18 tags - #26
Merged
Merged
Conversation
tests.yml runs the Python and R suites and says nothing about the nine HTML files this repository serves. The traps are all written down in CLAUDE.md and none of them was checked by anything. taguette_coding/tag_summary_export.html opened with <html><body> and had no head at all: no viewport, no charset, no title, no lang. Without a viewport a phone lays the page out at desktop width and zooms out, so the text arrives too small to read, and it looks correct on the machine it was built on. Without a charset the curly quotes and the en dash in the exported transcript depend entirely on the server's default. The exported content is untouched; only a head is added above it. scripts/check_site.py runs 40 checks over the eight pages. Three are worth naming. GitHub Pages runs jekyll-readme-index, so a folder becomes a page only if it holds a README.md. The index links two folders, data_starters/dhs-south-asia/ and data_starters/plfs-india/, and both work only because they hold one. A folder link without a README is a 404 in production and a 200 under python -m http.server, which generates a directory listing; CLAUDE.md records that mistake shipping once. _config.yml must set no theme and must keep applying the default layout. Before that layout existed the config set theme: minima, and any rendered README opened in stock styling, so a click-through stopped looking like the site. And no page may carry its own <style> block, because the house style is one file shared verbatim across the stack repositories and a page reaching for its own CSS is how that quietly stops being true. Three checks were fault-injected against a real failure to confirm they bite. Also verified while doing this, and not changed because nothing was wrong: the landing page and all six calculators render at 390x844 with documentElement.scrollWidth equal to clientWidth, so the white-space: nowrap fix CLAUDE.md describes is holding. The only element outside the viewport is the skip link at -999px, which is where it belongs. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MrvR2NXsJFVRCeJZFCPuNL
`.row span { opacity: .7 }` matched more than the tag it was written
for. `.t` is itself a span, wrapping the title and the tag, so the
selector applied to the tag twice and to the title once.
Measured on this landing page at 1280x900 and 390x844:
tag 0.7 x 0.7 = 0.49 -> #84827f on #f6f2ea, 3.43:1, 10.56px
title 0.7 -> 6.98:1, at font-weight 600
axe-core reported 18 serious colour-contrast violations, one per row.
AA needs 4.5:1 for text that size. The title being dimmed at all is the
opposite of what `.row b { font-weight: 600 }` exists to do.
Scoping the opacity to `.row .t > span` gives:
tag 0.7 -> #535251 on #f6f2ea, 6.98:1
title 1.0 -> 17.39:1
hover tag 0.7 white on ink 8.68:1
The comment twelve lines below already records this same selector doing
this same thing to `white-space`: a description is also a span, so it
inherited nowrap and ran off the side of a phone. That was scoped and
this was not. One selector, two properties, the same trap, fixed a year
apart.
assets/css/stack.css is byte-identical across InsightStack, FieldStack,
EquityStack and SignalStack by design, so the same change lands in all
four and they stay identical. Counted before the fix: InsightStack 18
elements, EquityStack 12, SignalStack 7. FieldStack's landing page uses
different markup and had none, and takes the file to stay in step.
After: 0 serious or critical violations on all four landing pages at
both widths, no horizontal overflow, and the six calculators were clean
throughout.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MrvR2NXsJFVRCeJZFCPuNL
The remote branch still carried a commit that reached main as a squash merge. Its content is identical to main, so this merge changes no file; it exists only so the branch can fast-forward.
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
2 participants
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.
.row span { opacity: .7 }matched more than the tag it was written for..tis itself a span, wrapping the title and the tag, so the selector applied to the tag twice and to the title once.Measured on this landing page at 1280×900 and 390×844:
#84827fon#f6f2ea, 3.43:1 at 10.56pxfont-weight: 600axe-core reported 18 serious colour-contrast violations, one per row. AA needs 4.5:1 at that size. The title being dimmed at all is the opposite of what
.row b { font-weight: 600 }exists to do.Scoping to
.row .t > span:#535251on#f6f2ea, 6.98:1The same selector, the same trap, twice
The comment twelve lines below already records this:
white-spacewas scoped.opacitywas not. One selector, two properties, the same mistake, caught a year apart.Family-wide
assets/css/stack.cssis byte-identical across InsightStack, FieldStack, EquityStack and SignalStack by design, so the change lands in all four and they stay identical (49c6c2ae…).Counted before the fix, per landing page: InsightStack 18, EquityStack 12, SignalStack 7, FieldStack 0 — FieldStack's page uses different markup and takes the file only to stay in step.
Verified
0 serious or critical axe violations on all four landing pages at both widths, no horizontal overflow. The six calculators were clean throughout, before and after. Suites re-run: EquityStack 101 pass, SignalStack 23 pass plus
companions --check, and this repo's five Python suites pass (18, 8, 9, 4, 17) against pandas 3.0.6 — thedtype == objecthazard CLAUDE.md warns about is already handled indata_validation/validate.py.One pre-existing moderate violation is left alone:
<section class="hero">sits outside<main>, so axe'sregionrule flags it. It is structural, affects each landing page's own markup rather than the shared CSS, and is not this change.🤖 Generated with Claude Code
https://claude.ai/code/session_01MrvR2NXsJFVRCeJZFCPuNL
Generated by Claude Code