/* ========================================================================== ACCESIBILIDAD (WCAG 2.1 AA) -------------------------------------------------------------------------- Modulo unico de accesibilidad, registrado el ULTIMO en el array CSS de etc/theme-config.php para garantizar maxima prioridad de cascada frente a Bootstrap (jquery.libs.css) y cualquier CSS legacy del proyecto, sin necesitar !important salvo casos puntuales documentados. Referencia: ~/.claude/guides/accessibility-guide.md (seccion 2.1 y 2.5), patron portado de template7.neobookings (implementacion WCAG 2.1 AA ya validada en produccion). Los tonos del anillo de foco reutilizan las variables de marca ya definidas en neobookings.css (--primary-color, --button-color) en vez de colores fijos, para no alterar el diseño ni depender de los colores concretos de otro proyecto. ========================================================================== */ :root { --focus-ring-width: 2px; --focus-ring-light: #fff; --focus-ring-corporate: var(--button-color); --focus-ring-dark: var(--primary-color); } /* Texto solo para lectores de pantalla: visualmente oculto, presente en el arbol de accesibilidad y en el orden de Tab. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link: oculto fuera del viewport hasta recibir foco por teclado; al enfocar se fija arriba como barra de ancho completo. z-index muy alto para quedar por encima de header/modales/popups del proyecto. */ .skip-link { position: absolute; top: -100%; left: 0; z-index: 100000; width: 100%; box-sizing: border-box; padding: 14px 16px; background: #000; color: #fff; text-align: center; text-decoration: none; } .skip-link:focus, .skip-link:focus-visible { position: fixed; top: 0; outline: 2px solid #fff; outline-offset: -2px; } /* 1) Reset del focus ring nativo del navegador/Bootstrap: va ANTES de las reglas :focus-visible de abajo (a igual especificidad ganaria la ultima regla del archivo y anularia el anillo). */ a:focus, button:focus, input:focus, select:focus, textarea:focus, .form-control:focus, [tabindex]:not([tabindex="-1"]):focus { outline: none; } /* 2) Anillo global de TRES tonos concentricos (claro + corporativo + oscuro), visible sobre cualquier fondo (blanco, oscuro, imagen). Solo con teclado (:focus-visible), nunca con click de raton. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .form-control:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-dark); outline-offset: calc(var(--focus-ring-width) * 2); box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-light), 0 0 0 calc(var(--focus-ring-width) * 2) var(--focus-ring-corporate); } /* 3) Foco no oculto bajo header sticky / CTA inferior fijo en movil: el scroll-margin solo afecta al desplazamiento automatico al enfocar, no tiene efecto visual. */ a, button, input, select, textarea, [tabindex] { scroll-margin-top: 120px; scroll-margin-bottom: 90px; } /* 4) Focusables dentro de un carrusel Owl (overflow:hidden en .owl-stage-outer): el anillo exterior se recortaria a ras del borde, asi que aqui va INSET. Tres tonos (no dos) para la galeria de fotos: con solo dark+light, contra una imagen concreta (una pared oscura, un plato claro...) alguno de los dos tonos puede fundirse con el fondo y el usuario no aprecia que ese item tiene el foco - el tercer tono (corporativo) hace que SIEMPRE haya al menos una banda que contraste, sea cual sea el color de la foto de fondo. */ .owl-carousel .owl-stage-outer a:focus-visible, .owl-carousel .owl-stage-outer button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-dark); outline-offset: calc(var(--focus-ring-width) * -1); box-shadow: inset 0 0 0 calc(var(--focus-ring-width) * 2) var(--focus-ring-light), inset 0 0 0 calc(var(--focus-ring-width) * 3) var(--focus-ring-corporate); } /* 4b) Galeria de fotos (.gallery-link): el box-shadow inset de arriba queda TAPADO por la propia a pantalla completa dentro del - un box-shadow inset se pinta por debajo del contenido del propio elemento, no por encima. Solo el outline sobrevive (se pinta siempre por encima de todo, por eso se recomienda para foco), pero una linea de 1-2px sola se pierde facilmente contra una foto. El anillo de tres tonos vive en el ::before que YA trae el tema base para el velo oscuro de hover (.gallery .owl-carousel .owl-item a::before, neobookings.css) - ese ::before es un elemento generado aparte del , asi que su box-shadow SI se ve por encima de la imagen. Ver our-promotions.css: ahi se anade el disparador :focus-visible (el tema base solo traia :hover) para que el mismo velo+lupa+anillo aparezcan tambien al tabular, sin duplicar el efecto con un ::after propio. */ /* 5) Dots de carruseles: van pegados entre si (gap minimo), un anillo de 6px pisaria el dot vecino. Version compacta de dos tonos. */ .owl-carousel .owl-dots .owl-dot:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-dark); outline-offset: var(--focus-ring-width); box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-light); } /* 6) WOW.js oculta cada .wow con "visibility: hidden" inline hasta que hace scroll y lo revela (ver head.xsl/neobookings.css: html.has-js .wow{visibility: hidden}). Un elemento visibility:hidden esta fuera del orden de Tab, asi que cualquier bloque .wow por debajo del viewport inicial (footer incluido) es inalcanzable por teclado hasta que el usuario hace scroll con el raton para dispararlo - un usuario que solo tabula nunca llega a verlo revelado. NO se puede cambiar la regla base a opacity:0 (ver scroll-animations-guide.md Regla 6b: WOW.js quita "animated" en animationend con resetAnimation:true, y sin ese "fill-mode:both" el bloque cae para siempre al opacity:0 estatico). Se mantiene visibility:hidden como base y se vence con !important solo cuando neobookings.js marca , usando opacity (que no saca del arbol de accesibilidad) para conservar el mismo ocultamiento visual pre-animacion. wow-seen lo anade el propio JS en cuanto WOW.js revela el bloque de verdad (clase "animated"), sincronizando la opacidad con el estado real en vez de mostrarlo antes de tiempo. */ html.wow-a11y .wow { visibility: visible !important; } html.wow-a11y .wow:not(.wow-seen) { opacity: 0; } html.wow-a11y .wow.wow-seen { opacity: 1; } @media (prefers-reduced-motion: reduce) { html.wow-a11y .wow:not(.wow-seen) { opacity: 1; } }