/* Marca de foco visible — override del tema `lumi`. * * POR QUÉ. El tema apaga el contorno de foco en OCHO reglas de su style.css * (líneas 84, 699, 714, 1586, 1600, 2373, 2735 y 2769), cubriendo enlaces, * botones, inputs, selects, textareas, el submit y el botón de búsqueda. Con el * teclado no se ve dónde estás. Incumple WCAG 2.4.7 (Focus Visible). * * QUÉ SE HACE. Se devuelve el contorno SOLO en `:focus-visible`, que es el * estado que el navegador reserva para teclado y no se dispara al hacer clic * con el ratón. Eso conserva el diseño de siempre para quien usa ratón y * devuelve la referencia a quien navega con teclado. * * POR QUÉ `!important`. Las ocho reglas del tema tienen especificidades * distintas —desde `button:focus` (0,1,1) hasta * `.page-template-default input:focus` (0,2,1)— y están repartidas por todo el * fichero. Igualar cada una con selectores cada vez más específicos sería * frágil y se rompería en cuanto el tema cambie. Se marcan solo las dos * propiedades del contorno, nada más: es lo mínimo que garantiza el resultado. * * REVERSIBLE. Todo vive en este fichero y en `includes/foco-visible.php`. * Quitar el `include` lo deja exactamente como estaba. */ :root{ /* Verde de la marca. Sobre blanco da ~3,3:1 y sobre el casi-negro de la cabecera ~4,3:1; por encima del 3:1 que pide WCAG 1.4.11 en los dos. */ --aiden-foco: #0E7A67; --aiden-foco-halo: rgba(19,150,126,.28); } /* UNIVERSAL, sin lista de tipos. La primera versión enumeraba `a[href]`, `button`, `[tabindex]`… y se dejaba fuera lo que el navegador hace enfocable por su cuenta: Chrome da foco a los contenedores DESPLAZABLES sin ningún `tabindex`, para poder recorrerlos con el teclado. Aparecieron así `.qa-body` (el cuerpo del modal de dominios) y `.ac-track` (la pista del carrusel), enfocables y sin marca. Cualquier lista se queda corta antes o después; `:focus-visible` a secas no. */ :focus-visible{ outline: 3px solid var(--aiden-foco) !important; outline-offset: 2px !important; } /* Anillo de DOS TONOS, y no un color por contenedor. Primer intento: contorno blanco dentro de los contenedores que yo daba por oscuros. Mal: el banner de Complianz es CLARO (#e9eae9) y el blanco sobre él daba 1,05:1. Adivinar el fondo por contenedor es frágil y se rompe en cuanto alguien cambia un color. Esto no adivina nada: un anillo verde por fuera y un halo blanco pegado al elemento. Sobre fondo claro destaca el verde; sobre fondo oscuro, el blanco. Siempre hay uno de los dos que contrasta, sin saber qué hay detrás. El `box-shadow` solo se aplica MIENTRAS hay foco de teclado, así que no pisa la sombra de diseño del componente en reposo. */ /* El contorno no debe quedar cortado por un contenedor con overflow. */ :where(a[href], button, [role="button"]):focus-visible{ position: relative; z-index: 1; } /* ANILLO INTERIOR, para lo que sí se recorta. Un `outline` se pinta FUERA de la caja, así que un ancestro con `overflow:hidden` se lo come. Medido: pasa en `.atb` (que lleva overflow:hidden), en el modal de dominios y, en móvil de 340 px, con el `` y su overflow-x. La sombra `inset` se pinta DENTRO del elemento, así que no hay ancestro que pueda recortarla: aunque se pierda todo lo de fuera, sigue viéndose el foco. Va además del contorno, no en su lugar. */ :focus-visible{ box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--aiden-foco), inset 0 0 0 2px var(--aiden-foco), inset 0 0 0 4px #fff !important; } /* Y en nuestra propia banda superior se levanta el recorte MIENTRAS hay foco dentro, que es lo mínimo: fuera del foco sigue recortando como siempre. */ .atb:has(:focus-visible){ overflow: visible; } /* La marca de foco NO debe animarse. El tema transiciona `all .2s`, así que el anillo entraba desvaneciéndose desde currentColor. Durante esos 200 ms el contraste real es el del color de partida, no el del final —me costó una auditoría entera darme cuenta, porque medía justo en ese hueco—. Un indicador de foco tiene que estar a pleno color desde el primer fotograma: quien tabula rápido no espera a que aparezca. */ :focus-visible{ transition-property: none !important; } /* Alto contraste / colores forzados (Windows, y el modo de contraste de algunos navegadores). Ahí el sistema descarta sombras y colores de autor, así que el halo no sirve de nada: se usa `Highlight`, que es el color que el propio sistema reserva para la selección, y se retira el box-shadow para no dejar un hueco muerto alrededor. */ @media (forced-colors: active){ :focus-visible{ outline: 3px solid Highlight !important; outline-offset: 2px !important; box-shadow: none !important; } } /* Un elemento desactivado no debe parecer interactivo ni recibir anillo. */ :where(a[href], button, input, select, textarea):disabled:focus-visible, :where([aria-disabled="true"]):focus-visible{ outline: none !important; box-shadow: none !important; }