Cookie lišta

Cookie lišta slouží k získání souhlasu uživatele s ukládáním cookies. Zobrazuje se při první návštěvě, volbu uživatele ukládá do cookie a při další návštěvě se už nezobrazí — místo ní nabízí plovoucí tlačítko pro změnu nastavení.

Použití ​

• Lišta se zobrazuje při první návštěvě webu jako karta ukotvená vlevo dole.
• Uživatel může souhlas udělit („Souhlasím se všemi" – primary), odmítnout („Odmítnout všechny" – outlined), nebo (při nakonfigurovaných kategoriích) otevřít „Podrobné nastavení" a granulárně vybrat kategorie.
• Podrobné nastavení se otevírá v modálním okně (gov-dialog) — ne jako rozbalení uvnitř lišty. Zavřít ho lze křížkem, klávesou Esc nebo kliknutím mimo.
• Volba se ukládá do cookie (výchozí název gov-cookiebar-consent, platnost 365 dní) — je tak čitelná i pro serverovou část aplikace.
• Po uložení volby se lišta sbalí do plovoucího tlačítka, přes které lze modální nastavení kdykoli znovu otevřít.

Anatomie komponenty ​

Komponenta má tři vizuálně odlišné stavy. Který se zobrazí, řídí uložený souhlas — aplikace nic přepínat nemusí.

1. Lišta (karta) ​

Plovoucí karta ukotvená vlevo dole, kterou uživatel vidí při první návštěvě.

• Nadpis — slot headline, typicky <h2>; text dodává aplikace.
• Vysvětlující text — výchozí slot; stručně vysvětluje, k čemu souhlas slouží.
• Primární akce — „Souhlasím se všemi" (solid) a „Odmítnout všechny" (outlined). Obě volby jsou stejně dostupné, ani jedna není skrytá ani potlačená.
• Sekundární akce — „Podrobné nastavení" (base). Vykreslí se jen tehdy, když jsou nakonfigurované kategorie přes prop categories.
• Na mobilu se tlačítka přeskládají pod sebe na plnou šířku.

Sady tlačítek lze celé nahradit vlastními přes sloty actions-primary a actions-secondary.

2. Modální okno s podrobným nastavením ​

Otevírá se z „Podrobné nastavení" a je to gov-dialog — tedy modál se správou focusu, ne rozbalení uvnitř lišty.

• Titulek — prop label-settings-title.
• Kategorie — pro každou položku z categories jeden řádek: název, přepínač (gov-form-switch) a pod ním popis účelu.
• Chip „Vždy zapnuto" — gov-tag u kategorie s required: true; její přepínač je zamčený. Text chipu je prop label-always-on.
• Odkaz na zásady zpracování — pod kategoriemi, text label-privacy, cíl privacy-url. Bez zadané URL se odkaz nevykreslí.
• Uložit — tlačítko v patičce modálu, prop label-save.
• Zavřít lze křížkem, klávesou Esc nebo kliknutím mimo.

3. Plovoucí tlačítko (badge) ​

Kruhové tlačítko s ikonou cookie vlevo dole, které nahradí lištu poté, co uživatel volbu uložil. Slouží ke kdykoliv opakované změně nastavení. Vypnout ho lze propem badge="false", odsazení od okraje tokenem --gov-cookiebar-badge-offset.

Kategorie cookies ​

Kategorie se konfigurují atributem categories (JSON) a zobrazují se v modálním okně, každá s přepínačem a popisem účelu. Kategorie s required: true je zamčená (přepínač je vypnutý pro interakci a označený chipem „Vždy zapnuto", text lze změnit přes label-always-on).

Místo tabulky jednotlivých cookies je pod kategoriemi jeden odkaz na zásady zpracování — text nastavíte přes label-privacy, cílovou URL přes privacy-url (dodává aplikace; když není zadaná, odkaz se nezobrazí).

<gov-cookiebar
  privacy-url="/zasady-cookies"
  categories='[
    {"name":"necessary","label":"Nezbytné cookies","required":true,
     "description":"Nutné pro základní chod webu. Nelze je vypnout."},
    {"name":"functional","label":"Funkční",
     "description":"Rozšířené funkce a zapamatování vašich voleb."},
    {"name":"statistics","label":"Statistické a výkonnostní",
     "description":"Anonymně měří návštěvnost a výkon webu."},
    {"name":"marketing","label":"Reklamní",
     "description":"Umožňují relevantnější reklamu a měření její účinnosti."}
  ]'>
  <h2 slot="headline">Můžeme si u vás uložit cookies?</h2>
  <p>…</p>
</gov-cookiebar>

Napojení na analytiku ​

Komponenta žádné skripty nenačítá — jen emituje událost gov-consent a vystavuje stav přes metodu getConsent(). Analytické skripty načítá aplikace:

const cookiebar = document.querySelector('gov-cookiebar');

cookiebar.addEventListener('gov-consent', (e) => {
  if (e.detail.categories.analytics) {
    loadAnalytics();
  }
});

const consent = await cookiebar.getConsent();
if (consent?.categories.analytics) {
  loadAnalytics();
}

Znovuotevření lišty (např. z odkazu v patičce) zajistí metoda show().

Přístupnost ​

• Lišta má roli dialog s popiskem (accessible-label), je ne-modální — stránka zůstává plně použitelná.
• Podrobné nastavení se otevírá v modálním okně (gov-dialog) s vlastní správou focusu (focus-trap, zavření Esc) a přístupným popiskem zavíracího tlačítka (accessible-close-label).
• Přepínače kategorií mají přístupný název odvozený z názvu kategorie (i bez viditelného labelu).
• Všechny akce jsou ovladatelné klávesnicí; při otevření z plovoucího tlačítka (accessible-badge-label) se nastavení otevře rovnou v modálním okně.

Doporučení ​

• Texty lišty dodává aplikace přes sloty headline a výchozí slot — právní znění konzultujte.
• Při změně cookie policy změňte hodnotu cookie-name (např. přidáním verze) — uživatelé tak budou požádáni o souhlas znovu.