fix(captcha): the widget's corners and typography, and a guard for both (#1053) - #1070
Merged
Merged
Conversation
…th (#1053) Two findings from the testes environment, both mine, and both invisible anywhere but the rendered page. The rounded corners were asked for with var(--ffc-radius) — a token declared only in the recruitment and user-dashboard sheets, neither of which loads on the pages the widget renders on. An undefined custom property makes the whole declaration invalid at computed-value time, in silence, so the widget's own var(--altcha-border-radius, 0) fell through to its fallback and the box had square corners. It now names --ffc-radius-sm, the radius of the input the box sits beside. Typography was inherited. Everything inside the widget is font-family and font-size inherit, while the form's own fields carry their own sizes, so on a theme with a 20px body the captcha rendered in the theme's face one size larger than the question next to it. Measured in Chromium rather than reasoned about: 20px Georgia against the form's 18px. It is now set to the math row's label size and the plugin's family. The same measurement corrected a claim in that stylesheet's own comment: the widget renders into the light DOM, not a shadow root. CssTokenReferenceTest fails when a var(--ffc-*) without a fallback resolves in neither its own file nor ffc-common.css. Run over the whole directory it finds exactly this bug and three deliberate runtime tokens, which are allowlisted with the reason inline. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012XWx9qJdjZdAq8crxM9GCU
rpgmem
marked this pull request as ready for review
September 5, 2026 23:45
rpgmem
enabled auto-merge (squash)
September 5, 2026 23:45
Coverage Report for CI Build 33999277230Warning Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes. Warning No base build found for commit Coverage: 89.897%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsRequires a base build to compare against. How to fix this → Coverage Stats
💛 - Coveralls |
84 tasks
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
3 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.
Summary
Dois achados do smoke no ambiente de testes, ambos meus, e ambos invisíveis fora da página renderizada.
var(--ffc-radius)— um token declarado só emffc-recruitment-public.csseffc-user-dashboard.css, que não carregam nas páginas onde o widget aparece. Uma custom property indefinida invalida a declaração inteira em silêncio, então ovar(--altcha-border-radius, 0)do próprio widget caía no fallback0. Passa a nomear--ffc-radius-sm, o raio do.ffc-inputao lado do qual a caixa fica.font-family: inherit/font-size: inherit, enquanto os campos do formulário têm tamanho próprio — num tema de corpo 20px o captcha saía na tipografia do tema, um tamanho acima da pergunta ao lado. Agora é o tamanho do label da linha matemática (18px) e a família do plugin.CssTokenReferenceTestfalha quando umvar(--ffc-*)sem fallback não resolve nem no próprio arquivo nem emffc-common.css.Medido, não deduzido
Rodei o widget no Chromium com uma página que imita a estrutura e os tokens do formulário. Antes e depois, computados:
-apple-system-apple-system* a sonda usou
--ffc-radius-md; o commit usa--ffc-radius-sm(4px), que é o do.ffc-input.A mesma medição corrigiu uma afirmação do comentário daquele bloco: o widget renderiza em light DOM, não em shadow root (
element.shadowRoot === null). Os internos continuam sendo endereçados pelas custom properties e não por classe — são a superfície que o bundle publica; um nome de classe pode mudar entre versões.Por que um guarda, e não só a correção
É a segunda vez neste épico que eu nomeio uma variável CSS que não existe (a primeira foram nomes
--altcha-*inventados). O modo de falha é o pior possível: zero erro no console, a regra simplesmente não se aplica. Rodado sobreassets/css/inteiro o guarda encontra exatamente este bug e mais três referências deliberadas a--ffc-color, escrito inline por elemento como swatch de cor — allowlistadas com o motivo ao lado.Type of change
Test plan
vendor/bin/phpunit— 7593 testes, 21792 asserções, verdecomposer lint(PHPStan) — não rodado localmente: ovendor/deste container não tem o PHPStan e ocomposer installnão autentica no github.com. Nenhum arquivo PHP de produção mudou nesta PR, então o escopo analisado não muda; a CI é o gatephpcs-tests.xml.distlimposCssTokenReferenceTestverificado falhando contra o token original (ffc-frontend.css:513 references --ffc-radius…) e voltando a passar com a correçãoChecklist
npm run build:css),.min.csscommitadoCHANGELOG.mdatualizado ([Unreleased] / Fixed)readme.txt— não se aplica: a versão só é consolidada na PR de releaseParte do épico #1053.
🤖 Generated with Claude Code
https://claude.ai/code/session_012XWx9qJdjZdAq8crxM9GCU
Generated by Claude Code