Accessibility fixes

.gitignore

@@ -1,9 +1,11 @@
 /node_modules
 /dist/*.js
+/dist/*.cjs
+/dist/*.mjs
 /dist/*.css
 /dist/*.scss
-/dist/*.LICENSE.txt
+/dist/*.ts
+/dist/*.cts
+/dist/*.mts
+/dist/stats.json
 /dist/example-assets/migrations.js
-/lib
-/es
-/stats.json

.npmignore

@@ -1,5 +1,8 @@
 *
 !/dist/*.js
+!/dist/*.cjs
+!/dist/*.mjs
+!/dist/*.d.ts
 !/dist/*.css
 !/dist/*.scss
 !/dist/*.LICENSE.txt

README.md

@@ -81,7 +81,7 @@ For external scripts or img tags (for tracking pixels), do the same, and rename
 
 You need to pass Orejime 🍪 a configuration object with, at the very least, `purposes` and `privacyPolicyUrl` properties. Each purpose listed in `purposes` must itself have at least `id`, `title` and `cookies`.
 
-<details open>
+<details>
     <summary>Here is a fully-detailed annotated example of a configuration object:</summary>
 &nbsp;
 
@@ -140,8 +140,12 @@ var orejimeConfig = {
     // with the image `src` and `alt` attributes: `logo: {src: '...', alt: '...'}`
     logo: '/img/logo.png',
 
+    // Optional. The theme used to render the UI (See the "theming" section below).
+    // If unset, this will default to "orejime", the classic built-in UI.
+    theme: 'orejime',
+
     // You can overwrite existing translations and add translations for your
-    // purpose descriptions and purposes. See `src/translations.yml` for a full
+    // purpose descriptions and purposes. See `src/translations` for a full
     // list of translations that can be overwritten
     translations: {
         modal: {
@@ -284,38 +288,75 @@ When including the script, the lib checks if the `window.orejimeConfig` variable
 Orejime.init(orejimeConfig);
 ```
 
-### Styling
+#### As a module
+
+If you're using Orejime within a bundler like webpack or vite, you have to provide actual themes and translations. This allows the bundler to perform better tree shaking as dependencies are explicitly stated.
+
+For example, with the `orejime` theme and english translations:
+
+```ts
+import {orejime, orejimeTheme, en} from 'orejime';
+
+const instance = orejime({
+    lang: 'en',
+    translations: en,
+    theme: orejimeTheme,
+    privacyPolicyUrl: 'http://example.org/privacy-policy',
+    purposes: [{
+        id: 'analytics',
+        title: 'Analytics',
+        cookies: []
+    }]
+})
+```
+
+If you want full control over the UI, you might want to use only the [consent manager](`./src/core/Manager.ts`), which is the core of Orejime. You can then use it with vanilla JS or your framework of choice.
+
+```ts
+import {manager} from 'orejime';
+
+const instance = manager([
+    {
+        id: 'analytics',
+        title: 'Analytics',
+        cookies: []
+    }
+]);
+
+console.log(instance.getConsent('analytics')); // false
+instance.setConsent('analytics', true);
+console.log(instance.getConsent('analytics')); // true
+```
 
-#### CSS
+### Theming
 
-Either replace the original CSS entirely, or add your custom stylesheet to overwrite only some of the rules.
-For example:
+Orejime support multiple themes to accomodate for every situation.
+
+#### Default theme
+
+This theme is loaded by default. It is meant to be simple but elegant enough to be used as-is on any website. It is easily customizable by tweaking some CSS properties.
+
+Of course, you can either replace the original CSS entirely, or add your custom stylesheet to overwrite only some of the rules.
 
 ```css
 /* custom-style.css */
-.orejime-Notice,
-.orejime-Modal {
-    background: pink;
-    color: white;
+.orejime-Env {
+    --orejime-font-family: monospace;
+    --orejime-background: black;
+    --orejime-color: yellow;
 }
 ```
+
 ```html
 <link rel="stylesheet" href="orejime.css" />
 <link rel="stylesheet" href="custom-style.css" />
 ```
 
-#### Sass
-
-You can import [the original Sass stylesheet](https://github.com/empreinte-digitale/orejime/blob/master/src/scss/orejime.scss) into your own, and tweak it as you wish.
-Orejime provides default variables that you can overwrite to quickly change its appearance.
-For example:
+#### DSFR theme
 
-```scss
-$orejime-theme-bg: pink;
-$orejime-theme-color: white;
+This theme is meant to be used on websites using the official design system of the french government. As those sites already include the DSFR styles, this theme does not provide any styles of its own but only makes use of the correct markup and class names.
 
-@import "~orejime/src/scss/orejime.scss"
-```
+See the [consent manager component](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/gestionnaire-de-consentement) on the DSFR docs for an overview.
 
 ## API
 
@@ -325,10 +366,17 @@ $orejime-theme-color: white;
 ### Orejime instance
 
 * `prompt()`: opens the consent modal
-* `preload()`: preloads the UI without showing it
 * `manager`: the Manager instance used. See `src/core/Manager.ts`
 * `config`: the complete config object used
 
+## Migrating
+
+### Version 3
+
+A major overhaul of the configuration took place in this version, as to clarify naming and align more with the GDPR vocabulary.
+
+If you were already using version 2, a tool to migrate your current configuration is available here : https://orejime.empreintedigitale.fr/migration.
+
 ## Development
 
 If you want to contribute to Orejime, or make a special build for yourself, clone the project then:

dist/dsfr.html

@@ -1,3 +1,5 @@
+<!DOCTYPE html>
+
 <html lang="fr">
 	<head>
 		<meta charset="utf-8" />
@@ -33,7 +35,7 @@
 			<div class="fr-header__body">
 				<div class="fr-container">
 					<div class="fr-header__body-row">
-						<div class="fr-header__brand fr-enlarge-link">
+						<div class="fr-header__brand">
 							<div class="fr-header__brand-top">
 								<div class="fr-header__logo">
 									<p class="fr-logo">Exemple</p>
@@ -49,12 +51,7 @@
 							</div>
 
 							<div class="fr-header__service">
-								<a
-									href="/dsfr.html"
-									title="Accueil - Intégration au système de design de l'état - Orejime"
-								>
-									<p class="fr-header__service-title">Orejime</p>
-								</a>
+								<p class="fr-header__service-title">Orejime</p>
 								<p class="fr-header__service-tagline">
 									Gestionnaire de consentement accessible et éco-conçu
 								</p>
@@ -98,9 +95,10 @@ <h1>
 				<div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center">
 					<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
 						<div class="fr-callout" id="privacy-policy">
-							<p class="fr-callout__title">
+							<h2 class="fr-callout__title">
 								Exemple de politique de confidentialité
-							</p>
+							</h2>
+
 							<p class="fr-callout__text">
 								Cette section tient lieu de page de politique de
 								confidentialité.
@@ -119,7 +117,6 @@ <h1>
 									<button
 										class="fr-btn"
 										data-orejime-open
-										data-orejime-preload
 									>
 										Configurer
 									</button>
@@ -179,7 +176,6 @@ <h1>
 							<button
 								class="fr-footer__bottom-link"
 								href="#"
-								data-orejime-preload
 								data-orejime-open
 							>
 								Gestion des cookies
@@ -207,6 +203,7 @@ <h1>
 			// see the annotated config in the README for details on how everything works
 			window.orejimeConfig = {
 				theme: 'dsfr',
+				lang: 'fr',
 				privacyPolicyUrl: '#privacyPolicy',
 				translations: {
 					modal: {

dist/example-assets/buttons.js

@@ -9,12 +9,3 @@ document.querySelectorAll('[data-orejime-reset]').forEach(function (trigger) {
 		window.orejime.manager.clearConsents();
 	});
 });
-
-document.querySelectorAll('[data-orejime-preload]').forEach(function (trigger) {
-	trigger.addEventListener('focus', function () {
-		window.orejime.preload();
-	});
-	trigger.addEventListener('mouseover', function () {
-		window.orejime.preload();
-	});
-});

dist/example-assets/style.css

@@ -81,6 +81,10 @@ a:active {
 	text-decoration: none;
 }
 
+.is-hidden {
+	display: none;
+}
+
 .Button {
 	display: inline-block;
 	border: 0;
@@ -106,6 +110,16 @@ a:active {
 	background: #b30443;
 }
 
+.ButtonGroup {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.ButtonGroup li {
+	display: inline-block;
+}
+
 .Container {
 	box-sizing: border-box;
 	margin: auto;
@@ -242,6 +256,21 @@ a.Tile:active {
 	max-width: 100%;
 }
 
+.MigrationForm-input,
+.MigrationForm-output {
+	margin-bottom: var(--unit);
+	border: 1px solid currentColor;
+	border-radius: calc(var(--unit) / 4);
+	width: 100%;
+	padding: calc(var(--unit) / 2);
+	font: inherit;
+	font-family: monospace;
+}
+
+.MigrationForm-output {
+	overflow-x: auto;
+}
+
 .Footer {
 	padding: calc(3 * var(--unit)) 0;
 	background: var(--contrast-surface);
@@ -272,5 +301,8 @@ a.Tile:active {
 }
 
 .orejime-Env {
-	--orejime-background: #eff9fd !important;
+	--orejime-color-background: #eff9fd !important;
+	--orejime-color-text: var(--on-surface) !important;
+	--orejime-color-interactive: var(--interactive) !important;
+	--orejime-color-shadow: 2, 10, 15 !important;
 }