docs(a11y): pisos obrigatórios — contraste fg-subtle, ring 3:1 e piso tipográfico com exceções - #132
Conversation
Espelha as regras endurecidas na auditoria #388/#390 do produto: - Contrast: fg-subtle sobe de "AA large" para AA obrigatório em todo texto legível; proibido clarear texto com opacidade (quebra no claro) - Focus & keyboard: ring canônico ganha piso de contraste 3:1 (WCAG 2.4.7) — em tokens color-mix isso pede ~80% de opacidade no claro — e regra global de :focus-visible como cobertura por omissão - Typography: piso de 11px formalizado com as duas únicas exceções documentadas (eixos SVG 9-10px, contadores de micro-badge ≥10px) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cc900824b4
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| | `--foreground` sobre `--background` | **AA obrigatório** | Corpo, tabelas e leitura contínua | | ||
| | `--fg-secondary` sobre `--background` | **AA obrigatório** | Metadados e descrições de apoio | | ||
| | `--fg-subtle` sobre `--background` | **AA large ou decorativo** | Kicker, label secundário, linhas auxiliares | | ||
| | `--fg-subtle` sobre `--background` | **AA obrigatório** | Kicker, label secundário, linhas auxiliares — se o token falhar AA em alguma superfície, recalibre o token no produto, não rebaixe a exigência | |
There was a problem hiding this comment.
When consumers use the documented light-theme pair, the shipped token still fails the new requirement: src/app/globals.css defines --background: #FBFAF7 and --fg-subtle: #8C8B94, which is only about 3.23:1, below the 4.5:1 AA floor for normal text. Because this row lists --fg-subtle on --background as an allowed AA combination, product text can follow the DS contract and still fail accessibility checks unless the DS token is updated or the status stays AA-large/decorative.
Useful? React with 👍 / 👎.
| | Propriedade | Valor | | ||
| |---|---| | ||
| | Cor | `--ring` | | ||
| | Contraste | ≥ 3.0:1 sobre a superfície, nos dois temas (WCAG 2.4.7) — em tokens `color-mix`, isso pede opacidade ≥ 80% da cor de marca sobre fundo claro | |
There was a problem hiding this comment.
This criterion makes the current canonical ring invalid in the same docs/site: src/app/globals.css still defines --ring as 32% in light and 40% in dark, with the light token only around 1.6:1 over #FBFAF7 before registry components add another /40 or /50 alpha. In focus states using the shipped tokens, keyboard users and consumers following this contract still do not get the promised 3:1 focus indicator unless the tokens/examples are recalibrated in this change.
Useful? React with 👍 / 👎.
| | Espessura | `2px` | | ||
| | Offset | `2px` | | ||
| | Pseudo-classe | `:focus-visible` | | ||
| | Cobertura | Regra global de `:focus-visible` no CSS base — nenhum elemento focável fica sem anel por omissão | |
There was a problem hiding this comment.
For custom focusable elements that don't add their own focus classes, this documented fallback does not exist: repo-wide search shows the base CSS only assigns outline-color on * in src/app/globals.css:615-619, not a :focus-visible rule that sets outline width/style/offset. Engineers can therefore rely on this row and omit component-level rings, leaving controls with only UA-dependent focus or none if they also use outline-none.
Useful? React with 👍 / 👎.
|
|
||
| ## Piso tipográfico | ||
|
|
||
| **11px (`--text-micro`) é o menor tamanho de texto de UI** — inclusive kickers, badges e chips `sm`. Abaixo disso a leitura falha para baixa visão e telas densas. |
There was a problem hiding this comment.
This new floor says Badge/chip sm text must be 11px except for 10px counters inside micro-badges ≤16px, but the exported Badge sm size is a normal 20px-tall badge (min-h-5) with text-[10px] in registry/pulso/ui/badge.tsx:32. Consumers using the shipped Badge size="sm" now receive contradictory guidance and fail the new typography contract unless the component is updated or this exception covers that supported size.
Useful? React with 👍 / 👎.
2 participants
Espelha no DS oficial as regras de acessibilidade endurecidas na auditoria WCAG 2.1 AA do Crisis Monitor (Crisis-Monitor/Crisis-Monitor#388 e #390, rastreio em Crisis-Monitor/Crisis-Monitor#406).
O que muda
accessibility/contrast.mdx--fg-subtlesobre--backgroundsobe de "AA large ou decorativo" para AA obrigatório — a auditoria mostrou que na prática o token é usado em texto legível; quando falhar, recalibra-se o token no produto (como o Crisis Monitor fez), não se rebaixa a exigênciatext-muted-foreground/60) — quebra o contraste no tema claro; hierarquia vem da escala de foregroundaccessibility/focus-keyboard.mdxcolor-mix, ~80% de opacidade da cor de marca sobre fundo claro:focus-visibleno CSS base, para nenhum focável ficar sem anel por omissãofoundations/typography.mdx+DESIGN.mdNota para revisão (fora do escopo deste PR)
Os valores atuais de
--ringno spec do DS (32%/40%/45% emDESIGN.md) ficam abaixo do piso de 3:1 que este PR documenta. No Crisis Monitor o token foi elevado a 80%. Sugiro tratar a recalibração dos tokens do próprio DS em PR separado, já que pode afetar o site/registry.🤖 Generated with Claude Code