# 02 — Bannière cookies : migrer vers l'API Popover native

> **Specs** : Popover API — tier **recommended** · Invoker commands — tier optional
> **Verdict** : 🔴 **FAIL** (pour le seul widget concerné du site) · **Priorité : P3**
> **Effort estimé** : 2-3 h
> **Lié** : le heading `H4 「🍪 Gestion des cookies」` de ce même widget casse la hiérarchie de headings — [SEO issue 07](../../audit-seo/issues/07-headings.md). Un seul chantier pour les deux fixes.

## Constat

Sondes DOM site-wide : `[popover]` = 0, `<dialog>` = 0, `[role=dialog]` = 0, `[aria-modal]` = 0.

Le site n'a en réalité **qu'un seul widget overlay** : la bannière de consentement cookies (« 🍪 Gestion des cookies », boutons *Tout accepter / Personnaliser / Refuser* — d'ailleurs les 3 seuls `<button>` de tout le site, en styled-components). Son markup actuel :

- une pile de `<div>` sans `role`, sans `aria-modal`, sans gestion de focus déclarée ;
- un `<h4>` décoratif qui pollue l'outline de page ;
- affichage/masquage géré en JS custom.

Pas de burger de nav (nav CSS-only), pas d'accordéon FAQ (contenu statique), pas de tooltip : la bannière cookies est **l'unique** cas d'usage — et c'est précisément le cas d'école de la spec (« ARIA-puzzled JavaScript modals »).

## Impact

- Sans `role`/top-layer/gestion de focus, la bannière est invisible en tant que région pour les lecteurs d'écran et peut passer sous d'autres éléments en `z-index`.
- Du JS custom maintient ce que le navigateur fait nativement (top layer, état ouvert/fermé, câblage accessibilité).

## Correctif

Bannière de consentement = choix requis → **`popover="manual"`** (pas de light-dismiss par clic extérieur ni Échap) :

```html
<div id="cookie-consent" popover="manual" aria-labelledby="cookie-title">
  <p id="cookie-title"><strong>🍪 Gestion des cookies</strong></p>  <!-- plus un <h4> : fixe aussi l'issue headings -->
  <p>Nous utilisons des cookies…</p>
  <button data-action="accept">Tout accepter</button>
  <button data-action="customize">Personnaliser</button>
  <button data-action="refuse">Refuser</button>
</div>
<script>
  // à l'init, si pas de consentement stocké :
  document.getElementById('cookie-consent').showPopover();
  // au clic sur un des 3 boutons : enregistrer le choix puis hidePopover()
</script>
```

Gains immédiats : rendu en **top layer** (au-dessus de tout z-index), sémantique et câblage accessibilité gérés par le navigateur, suppression du JS de positionnement/empilement custom.

**Invoker commands (optionnel, même geste)** : si un lien « gérer mes cookies » en footer doit rouvrir le panneau, le câbler déclarativement sans handler :

```html
<button commandfor="cookie-consent" command="show-popover">Gérer mes cookies</button>
```

Support : Popover API est *Baseline Newly available* (tous moteurs) ; `command`/`commandfor` plus récent — prévoir le fallback JS existant en `@supports`-check si le trafic vieux navigateurs compte.

Note : si un jour une vraie modale bloquante est nécessaire (formulaire de devis en overlay), c'est `<dialog>.showModal()` qu'il faut, pas popover — la spec distingue les deux.

## Vérification

- `document.querySelector('#cookie-consent').matches(':popover-open')` → true à la première visite, false après choix.
- Lecteur d'écran (VoiceOver) : la bannière est annoncée à l'ouverture, le focus est atteignable, les 3 boutons sont listés.
- L'outline de page ne contient plus de `H4` cookies ([vérif issue 07 SEO](../../audit-seo/issues/07-headings.md)).
- La bannière passe au-dessus de tout élément positionné (test avec le zoom image de la galerie ouvert).