diff --git a/packages/cookie-banner/src/components/cookie-list.ts b/packages/cookie-banner/src/components/cookie-list.ts index c04d75d55..3d79ad834 100644 --- a/packages/cookie-banner/src/components/cookie-list.ts +++ b/packages/cookie-banner/src/components/cookie-list.ts @@ -14,7 +14,7 @@ import type { CookieItem } from "../types"; import { humanizeDuration } from "../cookie-utils"; -import { getCookieDetailLabels } from "../i18n"; +import { getCookieDetailLabels, getTrackerTypeLabel, interpolate } from "../i18n"; import { ProboElement } from "./base"; import type { ProboCategory } from "./category"; import type { ProboCookieBannerRoot } from "./cookie-banner-root"; @@ -55,19 +55,28 @@ export class ProboCookieList extends ProboElement { ? humanizeDuration(cookie.max_age_seconds, lang) : humanizeDuration(0, lang); + const type = getTrackerTypeLabel(cookie.tracker_type); + const wrapper = document.createElement("probo-cookie"); wrapper.setAttribute("name", cookie.name); const clone = this.template.content.cloneNode(true) as DocumentFragment; this.fillSlots(clone, { name: cookie.name, + type, duration, description: cookie.description, }); this.fillLabels(clone, labels, { + type, description: cookie.description, duration, }); + const typeEl = clone.querySelector(".cookie-type"); + if (typeEl && labels.label_type) { + typeEl.setAttribute("aria-label", interpolate(labels.label_type, { value: type })); + } + wrapper.appendChild(clone); this.appendChild(wrapper); } diff --git a/packages/cookie-banner/src/i18n.ts b/packages/cookie-banner/src/i18n.ts index 15170d2f4..64df2e2c5 100644 --- a/packages/cookie-banner/src/i18n.ts +++ b/packages/cookie-banner/src/i18n.ts @@ -43,16 +43,30 @@ export function interpolate( } const COOKIE_DETAIL_LABELS: Record> = { - en: { label_description: "Description: {{value}}", label_duration: "Duration: {{value}}" }, - fr: { label_description: "Description : {{value}}", label_duration: "Durée : {{value}}" }, - de: { label_description: "Beschreibung: {{value}}", label_duration: "Dauer: {{value}}" }, - es: { label_description: "Descripción: {{value}}", label_duration: "Duración: {{value}}" }, + en: { label_type: "Type: {{value}}", label_description: "Description: {{value}}", label_duration: "Duration: {{value}}" }, + fr: { label_type: "Type : {{value}}", label_description: "Description : {{value}}", label_duration: "Durée : {{value}}" }, + de: { label_type: "Typ: {{value}}", label_description: "Beschreibung: {{value}}", label_duration: "Dauer: {{value}}" }, + es: { label_type: "Tipo: {{value}}", label_description: "Descripción: {{value}}", label_duration: "Duración: {{value}}" }, }; export function getCookieDetailLabels(lang: string): Record { return COOKIE_DETAIL_LABELS[lang] ?? COOKIE_DETAIL_LABELS.en; } +// Tracker type names are Web platform API names (proper nouns), so they are +// not translated; only the surrounding "Type:" label is localized. +const TRACKER_TYPE_LABELS: Record = { + COOKIE: "Cookie", + LOCAL_STORAGE: "Local storage", + SESSION_STORAGE: "Session storage", + INDEXED_DB: "IndexedDB", + CACHE_STORAGE: "Cache storage", +}; + +export function getTrackerTypeLabel(type: string): string { + return TRACKER_TYPE_LABELS[type] ?? type; +} + const GPC_LABELS: Record = { en: "Opt-Out Preference Signal Honored", fr: "Signal de préférence de désinscription respecté", diff --git a/packages/cookie-banner/src/themed-banner/styles.ts b/packages/cookie-banner/src/themed-banner/styles.ts index 8e37d65f6..5b951b524 100644 --- a/packages/cookie-banner/src/themed-banner/styles.ts +++ b/packages/cookie-banner/src/themed-banner/styles.ts @@ -353,6 +353,10 @@ export const THEMED_STYLES = ` font-family: monospace; } + .cookie-type { + font-size: calc(var(--_font-size) - 3px); + } + .cookie-detail { color: var(--_text); font-weight: 500; diff --git a/packages/cookie-banner/src/themed-banner/themed-banner.ts b/packages/cookie-banner/src/themed-banner/themed-banner.ts index cdbcdf523..1d5e36347 100644 --- a/packages/cookie-banner/src/themed-banner/themed-banner.ts +++ b/packages/cookie-banner/src/themed-banner/themed-banner.ts @@ -99,6 +99,7 @@ export class ProboThemedBanner extends HTMLElement {