JavaScript compartido

El mismo script se usa en las tres variantes del banner (EU & USA, Northweek y Rest of World). Se encarga de cuatro responsabilidades:

1. Animación de entrada de la barra principal.
2. Apertura y cierre del panel de preferencias.
3. Acordeones de categorías de cookies.
4. Trampa de foco (Tab / Shift+Tab) para accesibilidad por teclado.

---

Referencias DOM

Se obtienen en el ámbito global al cargar el script:

Variable	Selector	Descripción
focusableElements	(string)	Selector que enumera todos los elementos interactivos del DOM.
cookieBannerSliderPos	—	Contador de píxeles para la animación de slide. Se resetea a 0 al completarse.
preferencesButton	#config-button	Botón "Personalizar" de la barra principal.
preferencesCloseButton	#close-preferences	Botón × del panel de preferencias.
preferencerWrapper	.cookiebannerPreferencesWrapper	Contenedor del panel de preferencias.
preferencesAccordionsButtons	.preferences-consent__option	Todos los botones de categoría del acordeón.
preferencesCheckboxes	input.preferences-consent__option__right	Checkboxes visibles de Estadísticas y Publicidad.
preferencesCheckbox	#CybotCookiebotDialogBodyLevelButtonPreferences	Checkbox oculto de "Preferencias", sincronizado con el de Publicidad.

---

Funciones públicas

Estas dos funciones son invocadas externamente por la plataforma Cookiebot:

showCookieBanner()

Anima la entrada de la barra desde fuera de la pantalla usando un bucle recursivo de setTimeout con incrementos de 4px. Al terminar:

• Fija la barra en bottom: 0.
• Muestra el overlay (opacity: 1).
• Mueve el foco al primer elemento interactivo de #cookiebannerWrapper.
• Activa la trampa de foco en la barra principal.

function showCookieBanner() {
  var cookiebanner = document.getElementById('cookiebanner');
  var cookiebaroverlay = document.getElementById('cookiebanner-overlay');
  var dialogHeight = parseInt(cookiebanner.offsetHeight);
  cookiebanner.style.bottom = cookieBannerSliderPos - dialogHeight + 'px';
  cookieBannerSliderPos += 4;
  cookiebaroverlay.style.opacity = 1;
  if (cookieBannerSliderPos < dialogHeight) {
    setTimeout(showCookieBanner, 1);
  } else {
    cookieBannerSliderPos = 0;
    cookiebanner.style.bottom = '0px';
  }
  // foco y trampa...
}

hideCookieBanner()

Oculta el banner completo (display: none), cierra el panel de preferencias si estuviera abierto y elimina la trampa de foco activa. Llamada por Cookiebot tras Aceptar, Rechazar o Confirmar selección.

---

Comportamiento de los event listeners

Sincronización de checkboxes

El checkbox de "Publicidad" (#CybotCookiebotDialogBodyLevelButtonMarketing) y el oculto de "Preferencias" (#CybotCookiebotDialogBodyLevelButtonPreferences) deben estar sincronizados para que Cookiebot los registre correctamente. El listener detiene la propagación del evento para evitar que active el acordeón padre.

preferencesCheckboxes.forEach((checkbox) => {
  checkbox.addEventListener('click', (e) => {
    if (e && e.stopPropagation) e.stopPropagation();
    if (e.target.id === 'CybotCookiebotDialogBodyLevelButtonMarketing') {
      preferencesCheckbox.checked = e.target.checked;
    }
  });
});

Acordeones de categorías

Añade/quita la clase open en el botón pulsado. CSS controla la visibilidad del <aside> y la rotación del icono +.

preferencesAccordionsButtons.forEach((accordionButton) => {
  accordionButton.addEventListener('click', () => {
    accordionButton.classList.toggle('open');
  });
});

Abrir el panel de preferencias

Al pulsar "Personalizar":

1. Añade la clase open a .cookiebannerPreferencesWrapper.
2. Mueve el foco al primer elemento interactivo del panel.
3. Desactiva la trampa de foco de la barra principal y activa la del panel.

Cerrar el panel de preferencias

Al pulsar ×:

1. Quita la clase open del panel.
2. Devuelve el foco al primer elemento de #cookiebannerWrapper.
3. Reactiva la trampa de foco de la barra principal.

---

Trampa de foco (accesibilidad)

Garantiza que Tab y Shift+Tab no salgan del componente activo mientras el banner está visible.

function trapFocus(e, modalId) {
  const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
  if (!isTabPressed) return;

  const modal = document.querySelector(modalId);
  const focusable = modal.querySelectorAll(focusableElements);
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  if (e.shiftKey) {
    if (document.activeElement === first) { last.focus(); e.preventDefault(); }
  } else if (document.activeElement === last) {
    first.focus(); e.preventDefault();
  }
}

Hay dos instancias registradas en document.addEventListener:

Función	Modal objetivo
initTrapFocusFirstModal	#cookiebannerWrapper (barra principal)
initTrapFocusPreferencesModal	.cookiebannerPreferencesWrapper (panel)

Solo una está activa a la vez: al abrir el panel se intercambian; al cerrarlo se recupera la de la barra.

---

Flujo completo

Cookiebot llama a showCookieBanner()
  └─ Anima entrada + activa trampa en barra

Usuario pulsa "Personalizar"
  └─ Abre panel + mueve trampa al panel

Usuario pulsa "×" (cerrar)
  └─ Cierra panel + devuelve trampa a barra

Cookiebot llama a hideCookieBanner()  (tras aceptar / rechazar / confirmar)
  └─ Oculta todo + elimina trampa