Comment Coder une Bannière Cookies 100% Accessible (WCAG 2.2 AA) &

  

    
Gestion des cookies et respect de votre vie privée
    

      Nous utilisons des traceurs techniques indispensables au fonctionnement du site ainsi que des traceurs d'analyse d'audience soumis à votre consentement préalable. Vous pouvez librement accepter, paramétrer ou refuser ces dépôts. L'absence de choix ou la fermeture équivaut à un refus.
    
    

      
        Tout refuser
      
      
        Personnaliser
      
      
        Tout accepter
      
    
  

class AccessibleCookieBanner {
  constructor(modalId) {
    this.modal = document.getElementById(modalId);
    this.focusableSelectors = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
    this.previouslyFocusedElement = null;
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.init();
  }

  init() {
    const rejectBtn = this.modal.querySelector('#btn-reject-all');
    const acceptBtn = this.modal.querySelector('#btn-accept-all');
    
    rejectBtn.addEventListener('click', () => this.recordConsent(false));
    acceptBtn.addEventListener('click', () => this.recordConsent(true));
    
    // Vérification de l'état de consentement existant (ex: Cookie ou localStorage)
    if (!this.hasUserChoice()) {
      this.open();
    }
  }

  hasUserChoice() {
    return document.cookie.split('; ').some(row => row.startsWith('cdx_consent='));
  }

  open() {
    this.previouslyFocusedElement = document.activeElement;
    this.modal.classList.remove('cdx-hidden');
    document.addEventListener('keydown', this.handleKeyDown);
    
    // Positionner le focus sur le bouton Tout refuser (évite le biais vers Tout accepter)
    const firstFocusable = this.modal.querySelector('#btn-reject-all');
    if (firstFocusable) {
      firstFocusable.focus();
    }
  }

  close() {
    this.modal.classList.add('cdx-hidden');
    document.removeEventListener('keydown', this.handleKeyDown);
    if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
      this.previouslyFocusedElement.focus();
    }
  }

  recordConsent(consented) {
    const value = consented ? 'full' : 'rejected';
    const maxAge = 180 * 24 * 60 * 60; // 6 mois de validité (recommandation CNIL)
    document.cookie = `cdx_consent=${value}; path=/; max-age=${maxAge}; SameSite=Lax; Secure`;
    this.close();
    window.dispatchEvent(new CustomEvent('consentUpdated', { detail: { consented } }));
  }

  handleKeyDown(event) {
    if (event.key === 'Escape') {
      event.preventDefault();
      // RGPD : la fermeture passive sans validation équivaut à un refus complet
      this.recordConsent(false);
      return;
    }

    if (event.key === 'Tab') {
      const focusables = Array.from(this.modal.querySelectorAll(this.focusableSelectors))
        .filter(el => !el.hasAttribute('disabled') && el.offsetParent !== null);
      
      if (focusables.length === 0) return;

      const firstItem = focusables[0];
      const lastItem = focusables[focusables.length - 1];

      if (event.shiftKey) {
        if (document.activeElement === firstItem) {
          event.preventDefault();
          lastItem.focus();
        }
      } else {
        if (document.activeElement === lastItem) {
          event.preventDefault();
          firstItem.focus();
        }
      }
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  new AccessibleCookieBanner('cookie-banner-modal');
});

.cdx-cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  max-width: 640px;
  margin: 0 auto;
  background-color: #0f172a;
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  padding: 1.5rem;
  z-index: 999999;
  font-family: system-ui, -apple-system, sans-serif;
}

.cdx-hidden {
  display: none !important;
}

.cdx-cookie-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  color: #ffffff;
}

.cdx-cookie-text {
  font-size: 0.925rem;
  line-height: 1.5;
  color: #cbd5e1;
  margin: 0 0 1.25rem 0;
}

.cdx-cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cdx-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.625rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.cdx-btn:focus {
  outline: none;
}

.cdx-btn:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
}

.cdx-btn-primary {
  background-color: #2563eb;
  color: #ffffff;
  border: 1px solid #3b82f6;
}
.cdx-btn-primary:hover {
  background-color: #1d4ed8;
}

.cdx-btn-secondary {
  background-color: #334155;
  color: #ffffff;
  border: 1px solid #475569;
}
.cdx-btn-secondary:hover {
  background-color: #475569;
}

.cdx-btn-tertiary {
  background-color: transparent;
  color: #94a3b8;
  border: 1px solid #475569;
}
.cdx-btn-tertiary:hover {
  background-color: #1e293b;
  color: #f8fafc;
}

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test.describe('Cookie Banner A11y & GDPR Compliance Verification', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
  });

  test('Devrait respecter strictement les standards WCAG 2.2 AA sans violation', async ({ page }) => {
    const accessibilityScanResults = await new AxeBuilder({ page })
      .include('#cookie-banner-modal')
      .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
      .analyze();

    expect(accessibilityScanResults.violations).toEqual([]);
  });

  test('Devrait exécuter le Focus Trap cyclique sans sortir du conteneur', async ({ page }) => {
    const modal = page.locator('#cookie-banner-modal');
    await expect(modal).toBeVisible();

    const rejectBtn = page.locator('#btn-reject-all');
    const acceptBtn = page.locator('#btn-accept-all');

    await expect(rejectBtn).toBeFocused();

    // Avancer séquentiellement au clavier
    await page.keyboard.press('Tab'); // vers bouton Personnaliser
    await page.keyboard.press('Tab'); // vers bouton Tout accepter
    await expect(acceptBtn).toBeFocused();

    // Boucler vers le premier élément (Focus Trap)
    await page.keyboard.press('Tab');
    await expect(rejectBtn).toBeFocused();

    // Cycle inverse avec Shift+Tab
    await page.keyboard.press('Shift+Tab');
    await expect(acceptBtn).toBeFocused();
  });

  test('Touche Escape : doit fermer la bannière et enregistrer un refus RGPD strict', async ({ page, context }) => {
    await page.keyboard.press('Escape');
    const modal = page.locator('#cookie-banner-modal');
    await expect(modal).toBeHidden();

    const cookies = await context.cookies();
    const consentCookie = cookies.find(c => c.name === 'cdx_consent');
    expect(consentCookie).toBeDefined();
    expect(consentCookie?.value).toBe('rejected');
  });
});