/* ==========================================================================
DS v3 — WCAG AA Accessibility Audit (utilities/accessibility.css)
Issue: #228 · Parent: #192 (FASE-4)
==========================================================================
Auditoria completa de acessibilidade WCAG 2.1 AA para superfícies glass.
CRITÉRIOS COBERTOS:
─────────────────────────────────────────────────────────────────────────
1.3.1 Information and Relationships — live regions visuais
1.4.3 Contrast (Minimum) — tokens de texto verificados por nível glass
1.4.4 Resize Text — layout sobrevive a 200% zoom (min-width: 0)
1.4.11 Non-text Contrast — focus ring ≥ 3:1 sobre qualquer glass
1.4.12 Text Spacing — sem overflow com espaçamento expandido
1.4.13 Content on Hover/Focus — tooltips com pointer-events: auto
2.1.1 Keyboard — todos os interativos acessíveis via teclado
2.4.1 Bypass Blocks — skip navigation link
2.4.7 Focus Visible — anel de foco universal
3.2.2 On Input — sem mudança de contexto inesperada
RESPONSABILIDADES:
- Focus ring universal para TODOS os elementos interativos (não só .ds-glass*)
- Tokens de contraste de texto verificados por nível de profundidade glass
- .sr-only e .sr-only-focusable para leitores de tela
- Skip navigation link (pular para conteúdo principal)
- forced-colors: active — Windows High Contrast Mode (WHCM)
- WCAG 1.4.12 text spacing survivability em containers glass
- Live region indicators visuais ([role="status"], [role="alert"])
- prefers-contrast: more — cobertura global (complementa utilities/glass.css)
- prefers-reduced-motion — cobertura global de animações
Depende de: tokens/color.css, tokens/depth.css, utilities/glass.css
Carregado APÓS: todos os tokens e utilities/glass.css
========================================================================== */
@layer ds-utilities {
/* ═══════════════════════════════════════════════════════════════════════
SCREEN READER ONLY
Oculta visualmente sem remover do accessibility tree (AT).
Conforme WCAG Technique C7 — conteúdo fora da viewport mas acessível.
═══════════════════════════════════════════════════════════════════════ */
/*
Diferença de display:none (remove do AT) e visibility:hidden (oculta do AT):
position:absolute + clip-path: inset(50%) mantém o elemento no AT sem
ocupar espaço visual.
width/height de 1px (não 0) previne colapso de texto com white-space:nowrap.
*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/*
Variant focusable: retorna ao fluxo normal ao receber foco via Tab.
Essencial para skip links — devem aparecer visivelmente ao ser focados.
*/
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
position: static;
width: auto;
height: auto;
padding: inherit;
margin: inherit;
overflow: visible;
clip: auto;
clip-path: none;
white-space: inherit;
}
/* ═══════════════════════════════════════════════════════════════════════
SKIP NAVIGATION LINK
Primeiro elemento focusável do DOM — pula blocos repetitivos.
WCAG 2.4.1 (Bypass Blocks).
Uso no template base (antes de qualquer outro elemento):
Pular para conteúdo principal
…
═══════════════════════════════════════════════════════════════════════ */
.skip-link {
position: fixed;
top: 16px;
left: 16px;
z-index: var(--ds-z-spotlight, 400);
padding: 12px 20px;
font-family: var(--ds-font-body);
font-weight: var(--ds-font-weight-semibold, 600);
font-size: 0.875rem;
text-decoration: none;
border-radius: var(--ds-radius-lg, 0.5rem);
/* Opaco para máxima legibilidade sobre qualquer conteúdo */
background: var(--ds-glass-bg-solid);
border: 2px solid var(--ds-primary);
box-shadow: var(--ds-depth-4-shadow), var(--ds-glass-glow-primary);
/* Garante que texto nunca quebra — link curto */
white-space: nowrap;
}
/* Light theme: texto escuro sobre glass claro */
[data-theme="light"] .skip-link {
color: oklch(15% 0.015 260);
}
/* Dark theme (default): texto claro sobre glass escuro */
[data-theme="dark"] .skip-link,
:root[data-theme-effective="dark"] .skip-link {
color: oklch(97% 0.006 210);
}
.skip-link:focus-visible {
outline: 3px solid var(--ds-primary);
outline-offset: 3px;
}
/* ═══════════════════════════════════════════════════════════════════════
TOKENS DE CONTRASTE DE TEXTO — Por Nível Glass
Verificados para ≥ 4.5:1 (texto normal) e ≥ 3:1 (texto grande).
WCAG 1.4.3 (Contrast Minimum).
ANÁLISE DE CONTRASTE (valores calculados):
─────────────────────────────────────────────────────────────────────
Dark theme (default) — glass sobre bg oklch(8% 0.005 260):
depth-1 bg composto ≈ oklch(13%) → texto oklch(95%) ≈ 16:1 ✓
depth-2 bg composto ≈ oklch(11%) → texto oklch(95%) ≈ 18:1 ✓
depth-3 bg composto ≈ oklch(10%) → texto oklch(95%) ≈ 19:1 ✓
secondary oklch(80%) sobre oklch(13%) ≈ 8:1 ✓
muted oklch(65%) sobre oklch(13%) ≈ 4.5:1 ✓
Light theme — glass sobre bg oklch(98% 0.005 260):
depth-1 bg composto ≈ oklch(97%) → texto oklch(33%) ≈ 7.5:1 ✓
depth-2 bg composto ≈ oklch(95%) → texto oklch(33%) ≈ 7.0:1 ✓
depth-3 bg composto ≈ oklch(93%) → texto oklch(33%) ≈ 6.5:1 ✓
secondary oklch(44%) sobre oklch(97%) ≈ 4.8:1 ✓
muted oklch(55%) sobre oklch(97%) ≈ 3.2:1 (≥ 3:1 large) ✓
─────────────────────────────────────────────────────────────────────
Nota: "muted" ≥ 3:1 para texto grande (≥ 18px normal / ≥ 14px bold).
Para texto de corpo (< 18px) use --ds-text-on-glass-secondary.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* ── Light theme (fundo claro) ── */
/* Primário: slate-700 ≈ oklch(33%) → ≥ 7:1 sobre bg glass light */
--ds-text-on-glass: var(--ds-slate-700);
/* Secundário: slate-600 ≈ oklch(44%) → ~4.8:1 sobre glass light */
--ds-text-on-glass-secondary: var(--ds-slate-600);
/* Muted: oklch(55%) → ~3.2:1 — apenas para texto grande (≥ 18px) */
--ds-text-on-glass-muted: oklch(55% 0.016 260);
/* Links: cyan-700 escuro → ≥ 4.5:1 sobre glass light ✓ */
--ds-link-on-glass: oklch(44% 0.20 210);
--ds-link-on-glass-hover: oklch(33% 0.17 210);
}
/* Dark theme (default) — sobrepõe com valores para fundos escuros */
[data-theme="dark"],
:root[data-theme-effective="dark"] {
/* Primário: oklch(95%) → ≥ 16:1 sobre dark glass ✓ */
--ds-text-on-glass: oklch(95% 0.005 260);
/* Secundário: oklch(80%) → ~8:1 sobre dark glass ✓ */
--ds-text-on-glass-secondary: oklch(80% 0.010 260);
/* Muted: oklch(65%) → ~4.5:1 sobre dark glass depth-1 ✓ */
--ds-text-on-glass-muted: oklch(65% 0.012 260);
/* Links: cyan primary → oklch(62%) → ≥ 5:1 sobre dark glass ✓ */
--ds-link-on-glass: var(--ds-primary);
--ds-link-on-glass-hover: var(--ds-primary-hover);
}
/* ═══════════════════════════════════════════════════════════════════════
FOCUS RING UNIVERSAL
Cobre TODOS os elementos interativos — não apenas .ds-glass*.
WCAG 2.4.7 (Focus Visible) + 1.4.11 (Non-text Contrast ≥ 3:1).
Estratégia duplo-anel:
1. outline branco/escuro cria separação do elemento
2. box-shadow primário cyan identifica o sistema (contrast ratio alto)
3. glow sutil amplifica visibilidade periférica
Resultado: visível sobre dark glass, light glass, imagens, gradientes.
═══════════════════════════════════════════════════════════════════════ */
/*
Suprime anel do browser APENAS para interações com mouse/touch.
:focus-visible aplica para navegação por teclado e AT.
Padrão seguro: browsers sem :focus-visible ainda exibem o :focus padrão.
*/
/* Apenas remove outline — NÃO zera box-shadow para preservar
sombras de profundidade (.ds-depth-*-shadow) em elementos glass clicados. */
:focus:not(:focus-visible) {
outline: none;
}
/* Dark theme (default): anel branco visível sobre qualquer glass escuro */
:focus-visible {
outline: 2px solid oklch(100% 0 0 / 0.90);
outline-offset: 2px;
box-shadow:
0 0 0 1px oklch(0% 0 0 / 0.25),
0 0 0 4px var(--ds-primary),
0 0 12px oklch(62% 0.22 210 / 0.35);
}
/* Light theme: anel escuro visível sobre glass claro */
[data-theme="light"] :focus-visible {
outline-color: oklch(25% 0.015 260);
box-shadow:
0 0 0 1px oklch(100% 0 0 / 0.80),
0 0 0 4px oklch(44% 0.20 210), /* cyan-600 — contrast > 3:1 sobre claro ✓ */
0 0 12px oklch(44% 0.20 210 / 0.30);
}
/*
Inputs, selects, textareas: outline-offset 0 para alinhar ao campo.
Evita que o anel ultrapasse bordas e sobreponha labels adjacentes.
*/
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline-offset: 0;
box-shadow:
0 0 0 3px var(--ds-primary),
0 0 8px oklch(62% 0.22 210 / 0.30);
}
[data-theme="light"] input:focus-visible,
[data-theme="light"] select:focus-visible,
[data-theme="light"] textarea:focus-visible {
box-shadow:
0 0 0 3px oklch(44% 0.20 210),
0 0 8px oklch(44% 0.20 210 / 0.25);
}
/* ═══════════════════════════════════════════════════════════════════════
WCAG 1.4.12 — TEXT SPACING SURVIVABILITY
Layout não deve perder funcionalidade com as seguintes sobreposições:
line-height: ≥ 1.5× font-size
letter-spacing: ≥ 0.12em
word-spacing: ≥ 0.16em
paragraph gap: ≥ 2× font-size
Risco crítico no DS v3: .ds-glass usa overflow:hidden para conter
::before (specular) e ::after (noise). Se um container glass tem
height fixo, texto com espaçamento expandido será clipado.
Solução: garantir min-height automático e overflow visível em
sub-elementos de texto dentro de .ds-glass.
═══════════════════════════════════════════════════════════════════════ */
/* Texto direto em containers glass: overflow visível para text-spacing */
.ds-glass p,
.ds-glass h1, .ds-glass h2, .ds-glass h3,
.ds-glass h4, .ds-glass h5, .ds-glass h6,
.ds-glass label,
.ds-glass li {
overflow: visible;
min-height: 0;
}
/*
.ds-glass base: garante que o container expande conforme conteúdo.
min-width:0 previne overflow horizontal em flex/grid.
word-break:break-word evita overflow de URLs/hashes longos.
*/
.ds-glass {
min-width: 0;
word-break: break-word;
}
/* ═══════════════════════════════════════════════════════════════════════
LIVE REGIONS — Indicadores Visuais
Visual sincronizado com anúncios de leitores de tela.
WCAG 1.3.1 (Info and Relationships) + 4.1.3 (Status Messages).
O CSS define apenas o visual; o comportamento AT é nativo do HTML
(role="status" = aria-live="polite"; role="alert" = aria-live="assertive").
═══════════════════════════════════════════════════════════════════════ */
/* Status (polite): contexto positivo/neutro */
[role="status"] {
border-left: 3px solid var(--ds-primary);
padding-left: 0.75em;
}
/* Alert (assertive): urgência — atenção imediata */
/* Light theme: oklch(50%) garante ≥ 3:1 sobre glass claro (WCAG 1.4.11) */
[role="alert"] {
border-left: 3px solid oklch(50% 0.22 30);
padding-left: 0.75em;
}
/* Dark theme: 60% tem contraste suficiente sobre dark glass (≈ oklch 13%) */
[data-theme="dark"] [role="alert"],
:root[data-theme-effective="dark"] [role="alert"] {
border-left-color: oklch(60% 0.22 30);
}
@media (prefers-contrast: more) {
[role="status"] {
border-left-width: 4px;
border-left-color: var(--ds-primary);
}
[role="alert"] {
border-left-width: 4px;
border-left-color: oklch(50% 0.22 30);
}
}
/* ═══════════════════════════════════════════════════════════════════════
WCAG 1.4.13 — CONTENT ON HOVER/FOCUS
Tooltips e popovers devem ser hoverable (pointer pode entrar neles
sem fechá-los) — permite copiar texto ou clicar em links dentro.
═══════════════════════════════════════════════════════════════════════ */
/*
pointer-events: auto permite que o mouse entre no tooltip sem fechar.
O componente ds-tooltip.ts usa mouseenter/mouseleave com 100ms de delay
para dar tempo de mover o cursor do trigger para o tooltip.
*/
[role="tooltip"] {
pointer-events: auto;
}
/* ═══════════════════════════════════════════════════════════════════════
WINDOWS HIGH CONTRAST MODE — forced-colors: active
WCAG 1.4.11 (Non-text Contrast) em ambientes de alto contraste forçado.
Em WHCM o browser substitui todas as cores por system colors.
backdrop-filter é ignorado (GDI rendering bypassa compositor CSS).
box-shadow é forçado para transparent — apenas outline funciona.
═══════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
/* Glass surfaces: system colors com bordas visíveis */
.ds-glass,
.ds-glass--d2,
.ds-glass--d3,
.ds-glass--d4 {
background-color: Canvas;
border-color: ButtonText;
color: CanvasText;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none; /* box-shadow é transparente em WHCM */
}
/*
Pseudo-elementos (specular + noise) são invisíveis em WHCM mas podem
criar artefatos de rendering em alguns browsers (Edge Chromium no WHCM).
Remover preventivamente.
*/
.ds-glass::before, .ds-glass::after,
.ds-glass--d2::before, .ds-glass--d2::after,
.ds-glass--d3::before, .ds-glass--d3::after,
.ds-glass--d4::before, .ds-glass--d4::after {
display: none;
}
/* Interactive: ButtonFace/ButtonText system colors */
.ds-glass--interactive {
background-color: ButtonFace;
color: ButtonText;
}
.ds-glass--interactive:hover,
.ds-glass--interactive:focus {
background-color: Highlight;
color: HighlightText;
}
/* Accent: Highlight color para preservar semântica de "selecionado" */
.ds-glass--accent {
border-color: Highlight;
box-shadow: none;
}
/* Focus ring: Highlight system color — a única garantia em WHCM */
:focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
box-shadow: none; /* forçado a transparent em WHCM de qualquer forma */
}
/* Inputs */
input, select, textarea {
border: 1px solid ButtonBorder;
background-color: Field;
color: FieldText;
}
/* Botões */
button,
[role="button"] {
background-color: ButtonFace;
color: ButtonText;
border-color: ButtonBorder;
}
/* Links */
a { color: LinkText; }
a:visited { color: VisitedText; }
a:hover, a:focus { color: ActiveText; }
/* Skip link */
.skip-link {
background-color: ButtonFace;
color: ButtonText;
border: 2px solid Highlight;
}
/* Texto desabilitado: GrayText system color */
:disabled,
[aria-disabled="true"] {
color: GrayText;
border-color: GrayText;
}
/* Live regions: usar ButtonText para bordas */
[role="status"],
[role="alert"] {
border-left-color: ButtonText;
}
/* Elementos decorativos: nenhum impacto funcional em WHCM */
[data-ambient-bg],
[class*="ambient-orb"],
[data-glass-tilt]::before {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════
PREFERS-CONTRAST: MORE — Cobertura Global
Complementa utilities/glass.css (que cobre .ds-glass*).
Este bloco cobre elementos não-glass e padrões globais de sistema.
═══════════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
/* Focus ring reforçado: outline mais espesso, sem glow blur */
:focus-visible {
outline: 3px solid oklch(0% 0 0);
outline-offset: 3px;
box-shadow:
0 0 0 1px oklch(100% 0 0),
0 0 0 5px oklch(0% 0 0);
}
/* Dark theme: inverter fundo do anel */
[data-theme="dark"] :focus-visible,
:root[data-theme-effective="dark"] :focus-visible {
outline: 3px solid oklch(100% 0 0);
box-shadow:
0 0 0 1px oklch(0% 0 0),
0 0 0 5px oklch(100% 0 0);
}
/* Forçar texto muted ao texto padrão (sem opacidade reduzida) */
.ds-text-muted,
.ds-text-secondary {
opacity: 1;
color: inherit;
}
/* Placeholders: contraste mínimo sobre fundo de input */
::placeholder {
opacity: 1;
color: oklch(45% 0.010 260); /* ~5:1 sobre white input */
}
[data-theme="dark"] ::placeholder,
:root[data-theme-effective="dark"] ::placeholder {
color: oklch(75% 0.010 260); /* claro sobre dark input */
}
/* Inputs: borda mais espessa e sólida */
input, select, textarea {
border: 2px solid oklch(20% 0.012 260);
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
:root[data-theme-effective="dark"] input,
:root[data-theme-effective="dark"] select,
:root[data-theme-effective="dark"] textarea {
border: 2px solid oklch(85% 0.010 260);
}
/* Desativar backgrounds decorativos que possam interferir com leitura */
[data-ambient-bg],
[class*="ambient-orb"] {
background-image: none;
animation: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════
PREFERS-REDUCED-MOTION — Cobertura Global
Complementa utilities/glass.css (que cobre .ds-glass*).
Desativa TODAS as animações e transitions do sistema DS v3.
WCAG 2.3.3 (Animation from Interactions — AAA, mas implementado como AA).
═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
/*
Cobertura global: garante que nenhum elemento anima quando
o usuário preferir menos movimento, independente de CSS específico.
O !important é necessário pois este é um override de preferência
de sistema — deve prevalecer sobre qualquer especificidade de componente.
*/
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* View transitions: desativar animações entre páginas */
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
mix-blend-mode: normal;
}
/* Ambient orbs: decorativos, podem causar distúrbio vestibular */
[data-ambient-bg],
[class*="ambient-orb"] {
animation: none !important;
}
/* Scroll-driven reveals: mostrar imediatamente sem animação de entrada */
[data-scroll-reveal] {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* GlassTilt: desativar transforms dinâmicos */
[data-glass-tilt] {
transform: none !important;
}
}
}